Having a form submit automatically minimizes the end user's number of actions to achieve a desired goal. This is often seen when a user clicks a check box and a custom form relevant to the checked box is displayed; or chooses an option from a drop-down resulting in a page update; or passing a validation check prior to form submission, for example. Anyone who programs for too long in DHTML will become familiar with writing these forms. Let's begin by bringing all this to life in an example form:
Code:
<!DOCTYPE html PUBLIC "--W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Automatic Form Submission</title>
<script type="text/javascript">
</script>
</head>
<body>
<?php
echo "Now Showing Page Number ".max(1,(int)$_POST['page_number']);
?>
<form method="post" action="<?php echo $PHP_SELF;?>">
<label for="page_number">Page:</label>
<select name="page_number" id="page_number" onChange="this.form.submit();">
<?php
$num_pages = 5;
for ($counter=1;$counter<=$num_pages;$counter++) {
$selected = ($counter==(int)$_POST['page_number'])?' selected="selected" ':''; //Using the ternary operator
echo '<option value="'.$counter.'"'.$selected.'>'.$counter.'</option>';
}
?>
</select>
<input type="submit" value="Go" name="submit_button" id="submit_button" />
</form>
</body>
</html> The code above simply echoes out what page it happens to be on and selects the proper entry in the options. It works. You might think we are done, but we haven't overdone it yet. ;-) Take a look at this code:
Code:
<!DOCTYPE html PUBLIC "--W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Automatic Form Submission</title>
<script type="text/javascript">
</script>
</head>
<body>
<?php
echo "Now Showing Page Number ".max(1,(int)$_POST['page_number']);
?>
<form method="post" action="<?php echo $PHP_SELF;?>">
<label for="page_number">Page:</label>
<select name="page_number" id="page_number" onChange="this.form.submit();">
<?php
$num_pages = 5;
for ($counter=1;$counter<=$num_pages;$counter++) {
$selected = ($counter==(int)$_POST['page_number'])?' selected="selected" ':''; //Using the ternary operator
echo '<option value="'.$counter.'"'.$selected.'>'.$counter.'</option>';
}
?>
</select>
<input type="submit" value="Go" name="submit" id="submit" />
</form>
</body>
</html> Do you see the difference? Can you believe that the little difference in the code above is so significant that it causes the automatic submit to stop altogether? Don't believe me? Try them out. I'll wait.
...
Amazing, isn't it? I've spent hours trying to find out what was causing perfectly legitimate code to stop working. Here we have a
huge headstart as I've generated the error for you and shown both cases. When you're writing it yourself, you only see the non-functioning case. And searching around with not much for a clue takes a long time. Ok. So, let's get into the reason why it is that when you have a submit button named "submit", that you can't call the submit function of the form..."submit" really is a great word and that sentence is confusing enough to be a great way of pointing out that too much of a good thing can be bad.
When you create a button called "submit", it gets added to the DOM (Document Object Model). That makes form.submit a reference to the button. Now, you're also trying to call a function form.submit(). JavaScript does not automatically separate these two and the result is that you can't access the .submit() function anymore. The solution is easy enough - just rename the submit button so that it does not conflict with the submit function.
Hopefully you too will now be safeguarded against this insipid little submit bug.
Still not sure of the difference? It was in these lines:
Code:
<input type="submit" value="Go" name="submit_button" id="submit_button" />
Code:
<input type="submit" value="Go" name="submit" id="submit" />
06-15-2007, 06:57 AM
How Too Much Can Result In Nothing At All -- And How To Prevent It. 
). The form has a method called submit which you are accessing through javascript. When you add a button called submit that makes accessing the submit function through javascript impossible (or very, very difficult).
Linear Mode
