SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Script processing form when it's not supposed to

    I have a snippet of javascript to check and make sure all the fields in a form are filled in. If they aren't then it shows an alert box telling you to put something in that form. If all the fields are filled in then it submits the form. That piece of code is this:
    Code:
     
    function checkFields() {
    var errors = "no";
    if(document.street_team.email.value == "") {
        alert("Please enter an e-mail address..");
    	errors = "yes";}
    if(document.street_team.name_first.value == ""){
        alert("Please enter your first name.");
    	errors = "yes";}
    if(document.street_team.name_last.value == ""){
        alert("Please enter your last name.");
    	errors = "yes";}
    if(document.street_team.loc_state.value == ""){
        alert("Please enter your state.");
    	errors = "yes";}	
    if(document.street_team.loc_city.value == ""){
        alert("Please enter your city.");
    	errors = "yes";}	
    if(errors != "yes"){
        document.street_team.submit();}	
    	}
    Then i used a button to start the script. That code is this:
    Code:
    <button onClick="checkFields()">Join</button>
    The problem is that if you don't have something filled in and the alert box pops up, once you click "ok" it still processes the form. Any ideas on how to keep it from doing that?

  2. #2
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably a little better way to do this is to call your function with the form's onsubmit event and return false if the form isn't completed. That should prevent submission. You might also want to consider using if/else/if statements to prevent the interpreter from having to test each if statement after one is found to be true. Only if the form passes all the tests should the function return true, allowing submission to proceed. This has the advantage of allowing those with JavaScript disabled to submit the form (albeit, with potential ommissions).

    Call the function with: onsubmit="return checkFields();" in the form tag to assure that the return value delivered by the function determines if submission proceeds.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2004
    Location
    Milano
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of this
    Code:
    if(errors != "yes"){
        document.street_team.submit();}
    try
    Code:
    if(errors != "yes"){ return true;} else { return false;}
    To prevent the submit action, just return FALSE;

  4. #4
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great. Problem solved!

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually...JVLB's solution was the correct one. JavaScript should supplement your page's behavior, never - if feasible - make its functioning impossible without JavaScript.
    ::: certified wild guess :::


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •