CODEWITHSUNDEEP
javascripthtmlvalidation
Louismoore18
Louismoore18

Reputation: 167

javascript - why doesnt this work?

<form method="post" action="sendmail.php" name="Email_form">
Message ID <input type="text" name="message_id" /><br/><br/>
Aggressive conduct <input type="radio" name="conduct" value="aggressive contact" /><br/><br/>
Offensive conduct <input type="radio" name="conduct" value="offensive conduct" /><br/><br/>
Rasical conduct <input type="radio" name="conduct" value="Rasical conduct" /><br/><br/>
Intimidating conduct <input type="radio" name="conduct" value="intimidating conduct" /><br/><br/>
<input type="submit" name="submit" value="Send Mail" onclick=validate() />
</form>



    window.onload = init;  
    function init()     
    {          
        document.forms["Email_form"].onsubmit = function() 
        {                                                                 
            validate();                                                                 
            return false;                                                             

        };     
    } 

    function validate() 
    {     
        var form = document.forms["Email_form"]; //Try avoiding space in form name.     
        if(form.elements["message_id"].value == "") { //No value in the "message_id" 
            box     
            {         
                alert("Enter Message Id");         
                //Alert is not a very good idea.          
                //You may want to add a span per element for the error message        
                //An div/span at the form level to populate the error message is also ok        
                //Populate this div or span with the error message         
                //document.getElementById("errorDivId").innerHTML = "No message id";

                 return false;  //There is an error. Don't proceed with form submission.

            } 
        }
    }
</script>

Am i missing something or am i just being stupid?

edit*** sorry i should add! the problem is that i want the javascript to stop users going to 'sendmail.php' if they have not entered a message id and clicked a radio button... at the moment this does not do this and sends blank emails if nothing is inputted

Upvotes: 0

Views: 141

Answers (3)

Dennis
Dennis

Reputation: 32598

You forgot the underscore when identifying the form:

document.forms["Email_form"].onsubmit = ...

EDIT:

document.forms["Email_form"].onsubmit = function() {
    return validate();
};

function validate() {
    var form = document.forms["Email_form"];
    if (form.elements["message_id"].value == "") {
        alert("Enter Message Id");
        return false;
    }
    var conduct = form.elements['conduct']; //Grab radio buttons
    var conductValue; //Store the selected value
    for (var i = 0; i<conduct.length; i++) { //Loop through the list and find selected value
        if(conduct[i].checked) { conductValue = conduct[i].value } //Store it
    }
    if (conductValue == undefined) { //Check to make sure we have a value, otherwise fail and alert the user
        alert("Enter Conduct");
        return false;
    }
    return true;
}

return the value of validate. Validate should return true if your validation succeeds, and false otherwise. If the onsubmit function returns false, the page won't change.

EDIT: Added code to check the radio button. You should consider using a javascript framework to make your life easier. Also, you should remove the onclick attribute from your submit input button as validation should be handled in the submit even, not the button's click

Upvotes: 1

Delan Azabani
Delan Azabani

Reputation: 81384

You are using

validate();
return false;

...which means that the submit event handler always returns false, and always fails to submit. You need to use this instead:

return validate();

Also, where you use document.forms["Email form"] the space should be an underscore.

Here's a completely rewritten example that uses modern, standards-compliant, organised code, and works:

http://jsbin.com/eqozah/3

Note that a successful submission of the form will take you to 'sendmail.php', which doesn't actually exist on the jsbin.com server, and you'll get an error, but you know what I mean.

Here is an updated version that dumbs down the methods used so that it works with Internet Explorer, as well as includes radio button validation:

http://jsbin.com/eqozah/5

Upvotes: 4

Perception
Perception

Reputation: 80603

Most obvious error, your form has name attribute 'Email_form', but in your Javascript you reference document.forms["Email form"]. The ironic thing is, you even have a comment in there not to use spaces in your form names :)

Upvotes: 0

Related Questions