javascript alerts

form validation...

[Tanya]

i have a button that processes a certain form.before the said form is processed, validation must take place. i tried to place a javascript alert on the onsubmit handler of the form element to check if the 'title' field is not empty.

<form onsubmit="return check(this);" action="...">

it worked pretty good, however, i have several submit buttons on the form and this code causes a problem everytime i click on the other submit buttons.

i also tried to call a javascript function in the 'ADD' button. the function worked well and does check if the 'title' field is not empty. however, after checking on the 'title' field, it still adds the record even if the 'title' field is empty.

how could i check if the said field is empty then cancels form processing if the said field is really is empty. thanks!

[ShawnR]

"...i have several submit buttons on the form and this code causes a problem everytime i click on the other submit buttons..."

Yes, by saying onsubmit="... you are requesting it fire whenever the form is submitted, regardless of which button is used to submit it. If you only want it to fire when a particular button is pressed, use the onclick attribute of the particular button instead of the onsubmit attribute of the whole form.

"...after checking on the 'title' field, it still adds the record even if the 'title' field is empty..."

Hard to say, without knowing more about your implementation. i.e. Is the record adding done with more Javascript? If so, probably a logical error in your javascript code. If not, is the record adding done by server side processing (php or asp)? Then what is happening is the action=... is being triggered. To prevent it, have your form validation routine return false if the form entry is not valid, and true if it is.

Shawn

[BlobFisk]

how could i check if the said field is empty then cancels form processing if the said field is really is empty.

I agree with ShawnR, a peek at your JavaScript may help, and as he says, no matter which submit button is pressed, the form will run the validation.

I have a question though, why do you have more than one submit button? If one submit button is above some form fields, when the user hits that button the form will submit without the user entering details below. Or am I missing the point?

[Tanya]

this is just a part of my code....i did not include other functions.

function validate(check) // function that checks if the Title field is empty
{
if(check.Title.value=="")
{
alert("You Must Enter a Title");
return(false);
}
else {return(true);}
}

<form name="modify" onsubmit="return validate(this)" method="post">

<textarea name="Title" cols="50" onBlur="validate(this.form)">
<?echo $title?></textarea> //this is the required field

/***i did not include other fields***/

<input type="submit" name="action" value="Add" src="modifyvf.php?agent=$agent"> //add button which processes the form
<input type="submit" name="action" value="Modify" src="modifyvf.php?agent=$agent&ID=$ID"> //modifies the title
<input type="submit" name="action" value="Search" src="modifyvf.php?agent=$agent&actions=$actions">; //searches for a certain title

</form>

when clicking on the Add button, it does validate if the title field is empty and cancels the form processing. however, when i click on other submit buttons (s.a. modify and search) they also validate if the title field is empty (which should not be the case).

what i did, instead of calling the jsfxn in the onsubmit handler of the form element, i placed it in the ADD button only using the onclick event.

<form name="modify" method="post">

<input type="submit" name="action" value="Add" src="modifyvf.php?agent=$agent" onclick="validate(this.form)">; //add button which processes the form

</form>

/*********i did not include my php scripts for fxns ADD,SEARCH and MODIFY*******/

this also works but after clicking the "ok" button in the alert message, the form is still processed thus adding an empty record in my database.

in this form, the user can search for a certain title and at the same time can modify it. that is the reason why there are several buttons in this form.

i know something is definitely wrong/missing in my code, please help...thanks!

[ShawnR]

Hi Tanya

To stop the form being sent if the validation fails, use the following: onclick="return validate(this.form)"

To stop the form being sent if a different button is pressed, you could use onclick="return false", but the real question is why use a submit button if you don't want the form submitted when the button is pressed? (perhaps I just don't understand what you are trying to do, or how you call your php functions.)

A few other things I can spot:

• "... ">; //searches for a certain title ..."

  Did you just comment it up like this for posting to this board? "//" can't be used for comments in html, only in javascript. Also the semicolon is not used to terminate html tags.
  
• All your buttons have the same name ("action"). The purpose of the name attribute is to uniquely identify the button for scripting languages, so each should be named differently.
  
• Your form doesn't include an action. Where does it go... How do you call your php functions?
  
• For each button you specify a src="..." It looks a bit strange to me. The src is for a graphic, so you can specify the location of a jpeg, gif or png file instead of the standard grey box buttons; but instead of a graphic you are refering to php files.
  
• The onblur statement checks the field, but doesn't return focus to it. Once you get the whole thing working, that might be an improvement you could add.
  
• Note that users can get around javascript validation tests, either intentionally or unintentionally. As this is driven by php, make sure the php code performs validation checking as well.
  

Shawn