表单“提交”按钮文本(和宽度/高度/值)在按键时消失或更改BTN值

form "submit" button text(and width/height/value) disappears on keypress or changes btn value

本文关键字:消失 BTN 高度 按钮 提交 文本 表单      更新时间:2023-09-26

所以我遇到的问题是,长话短说,我构建了一个带有验证等的表单,没有什么特别的,但是当单击"提交"按钮时,发生了一些我一生都无法发生的事情,找出原因。

最初,这个简单的提交按钮的 html 部分是这样的:

   <input type="submit" id="submit" value="Submit"/>

在按钮单击上,发生了以下事情之一。

  1. 按钮变得非常小,在幕后(Firebug 等)它里面的单词消失了,在 Firebug 检查中,代码看起来像这样

    <input type="submit" id="submit" value>

它完全去除了该表单元素属性的值部分。

2.提交按钮"值"成为我的错误消息之一。例如,您会看到类似

<input type="submit" id="submit" value="oops, you forgot something"/> 

当用户忘记填写字段时,这是我的错误消息之一。

  1. 在 Firefox 上,即使在新页面加载/重新加载时,在该按钮上右键单击,就像我右键单击它以选择"查看源代码"或"使用 Fbug 检查"一样,按钮变为绿色......正确满足参数时字段获得的绿色相同。

我不再搞砸这个,因为这些非常奇怪,所以我希望有人能帮助我解决这个问题。到目前为止,这是一个哆哆嗦嗦。哈哈

这是 js:

<script>

$('document').ready(function(e) {
//FORM VARS 
var firstName = $('#form-name');
var formEmail = $('#form-email');
var formSbj = $('#form-subj');
var formMssg = $('#form-mssg');
var mainF = $('#spForm');
var box = $("#box");
var addem = $('#addem');
var addemR = 8;
var formSubBtn = $('#submit');
var formFields = $('#spForm :input');

//FORM ERROR MESSAGES
var error_MK = 'oops, you forgot something';
var error_isntAnum = 'answer must be numerical please';
var error_numAddition = 'So whats 5 + 3 again???';
var finalCheck = false;
var pageErrorDiv = $('#gen_error');

//this one fires on click
function clearField(){
    if($(this).val() == this.defaultValue || $(this).val() == error_MK || $(this).val() == error_isntAnum || 
    $(this).val() == error_numAddition){
        this.value = '';
        //use this as a workaround for the disappearing "submit" text -->   formSubBtn.val('Submit');
    }
}
//this one fires on blur
function checkVals(){
    if($(this).val()==""){
        $(this).css("background-color","red");
        $(this).css("color","white");   
        $(this).val(error_MK);//error mssg
    } else {
        $(this).css("background-color","green");
        $(this).css("color","white");   
    }

}


//this one checks to see if the person can add lol...make sure its not a SPAM robot.
function checkAddem(){
    if(addem.val()== 'oops, you forgot something' || addem.val()=='AND THE TOTAL IS?'){
        addem.css('background-color','red');
        addem.css('color','white');
        addem.val(error_MK);    //error mssg
    } else if(isNaN(addem.val())){
        addem.css('background-color','red');
        addem.css('color','white');
        addem.val(error_isntAnum);//error mssg  
    } else if(addem.val() != addemR){
        addem.css('background-color','red');
        addem.css('color','white');
        addem.val(error_numAddition);//error mssg   
    }
}

formFields.click(clearField);
formFields.blur(checkVals);
addem.blur( checkAddem );

//FINAL CHECK b4 form submittal.
formSubBtn.bind('click', function(){
    //on click double check all fields
    if( firstName.val()=="" || firstName.val()=="ENTER YOUR NAME HERE" ||  firstName.val()== error_MK ||
    formEmail.val()=="" || formEmail.val()== error_MK || formEmail.val()=="ENTER YOUR EMAIL HERE" ||
    formSbj.val()=="" || formSbj.val()== error_MK || formSbj.val()=="SO WHAT DO YOU WANT TO CHAT ABOUT?" ||
    formMssg.val()=="" || formMssg.val()== error_MK || formMssg.val()=="ENTER YOUR MESSAGE HERE" ||
    addem.val() != addemR){
        pageErrorDiv.text("Information entered either no good or blah blah blah");
        return false;
    }else{
        return true;    
    }

});



});
</script>

哦,还有Ps;所以你可以看到发生了什么,这是我的测试链接。

http://somdowprod.net/4testing/spFormDev/spContForm

听起来您的提交按钮正在验证,这是有道理的,因为您选择它作为输入之一。而不是

var formFields = $('#spForm :input');

试试这个:

var formFields = $('#spForm :input').not('#submit');

我只是快速浏览了一眼,但这是否与此有关?

formFields.blur(checkVals);

我猜formFields包含提交按钮,当您单击它时,提交按钮不会返回值,因此它会注册checkVals函数,其中包括:

$(this).val(error_MK);//error mssg

这就是为什么您可能会收到错误消息oops, you forgot something

只是我的2美分...