Question

So the problem that i am having is that, well long story im building a form with validation etc, nothing special, but when the “submit” button is clicked, a few things are happening which i cant for the life of me, figure out why.

Originally, the html portion of this simple SUBMIT button is this:

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

on that buttons click, One of these things happen.

1. the button becomes VERY small, and behind the scenes(firebug etc) the words inside of it disappear and on firebug check, the code then looks like this

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

it completely strips out the value portion of that form element property.

OR

2.the submit buttons “value” becomes one of my error messages.
so for example, youll see something like

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

which is one of my error messages when a user forgets to fill out a field.

OR

1. on firefox, even on fresh page load/reload, on that buttons right click, as sOON as i right click it to select “view source” or “inspect with Fbug”, the button becomes green…….The same green that the fields get when a parameter has been properly satisfied.

Ive stopped messing with this since these are very weird so im hoping someone can help me out figure this one out. So far, its a doozy. lol

Here is the 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>

Oh and Ps; so you can see whats happening, here is my test link.

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

Answer 1

Well it sounds like your submit button is being validated, which makes sense because you’re selecting it as one of the inputs. Instead of

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

Try this:

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