AJAX

JavaScript to stop the action

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2007

Posts: 18

Reputation: Arch_Bytes is an unknown quantity at this point

Solved Threads: 0

Arch_Bytes Arch_Bytes is offline

Offline

Newbie Poster

JavaScript to stop the action

May 29th, 2007

In my Submit button I have a JavaScript coded that will validate certain textfields.. The problem is if the value in the text field fails I must make away to stop the form from submitting..

any suggestions? I'm using JSF with this Javascript.. and to get a picture of my button here's the code for that

Help with Code Tags

(Toggle Plain Text)

<h:commandButton value="Submit" 
action="#{statisticsController.someProccess}"
onclick="javascript:showItem(10,document.getElementById('statForm:txtTo').value,document.getElementById('statForm:txtFrom').value);" />

Thanks in advance!!

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: JavaScript to stop the action

May 29th, 2007

Here is some example code. The returns are the important bit:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
<script>
function checkForm()
{
  var oTarget = document.getElementById('must_be_hello');
  if(oTarget.value=="hello")
  {
    //Returning true! the form will submit.
    return true;
  }
  else
  {
    alert("Sorry you cannot submit anything but hello");
    //Returning false. Not today thanks.
    return false;
  }
}
</script>
</head>
<body>
<form action="http://google.com" method="POST" onsubmit="return checkForm();">
<input type="text" id="must_be_hello" value="?"/>
<input type="submit" value="Submit?"/>
</form>
</body>
</html>
<html>
<head>
<script>
function checkForm()
{
  var oTarget = document.getElementById('must_be_hello');
  if(oTarget.value=="hello")
  {
    //Returning true! the form will submit.
    return true;
  }
  else
  {
    alert("Sorry you cannot submit anything but hello");
    //Returning false. Not today thanks.
    return false;
  }
}
</script>
</head>
<body>
<form action="http://google.com" method="POST" onsubmit="return checkForm();">
<input type="text" id="must_be_hello" value="?"/>
<input type="submit" value="Submit?"/>
</form>
</body>
</html>

Notice this:

Help with Code Tags

(Toggle Plain Text)

<form action="http://google.com" method="POST" onsubmit="return checkForm();">

Returning this function to the form onsubmit event will make the submit dependant on the return of the function. So, if the function returns false; the onsubmit is cancelled; if the function returns true; the onsubmit continues.

The checkForm function is a silly example; but remember the function(s) that you do use should return a 'true' if submission should continue; and a 'false' if it should be aborted; and importantly; remember that onsubmit is a form event, not a submit button event.

Last edited by MattEvans; May 29th, 2007 at 10:16 am.

Plato forgot the nullahedron..