Check out some notes on HTML forms which I think is very useful.
1. If we use a form like this ::
<form name='f' action = "test.php?id=123&color=blue" method='GET'>
<input type='text' name='fname'>
<input type='submit' name='btn_submit' value='submit'>
</form>
the form is submitted to URL :: test.php?fname=john&btn_submit=submit (though the action is set to test.php?id=123&color=blue). The pre-defined URL parameters "id" and "color" are overwritten. Hence the "id" and "color" are never captured at the Server end.
But if we change the method to "POST", all the four parameters ("id", "color", "fname" and "btn_submit") are captured. PHP $_GET global variable receives "id", "color", $_POST gets "fname" and "btn_submit" parameters while $_REQUEST receives all fours of them.
2. If we use Image Submit buttons and suppose that element has a name 'submit_btn', we would receive two element's values at the server end. This is shown below.
<?php
if(!empty($_GET))
print_r( $_GET );
?>
<form name='f' method='GET'>
Enter your name <input type='text' name='c_name'>
<input type='image' name='btnsubmit' src='images/submit_btn.jpg'>
</form>
The above form consists of an input text element and another input element with type image. The second element works as a Submit button. When we submit the form, the URL becomes quite similar to this ...
http://127.0.0.1/test.php?c_name=&btnsubmit.x=2&btnsubmit.y=1
The btnsubmit.x and btnsubmit.y captures the co-ordinates on the Submit buttons's image where the click occurred. If you make the input element like this (remove the name attribute from the element itself) ::
<input type='image' src='images/submit_btn.jpg'>
the URL would become ::
http://127.0.0.1/test.php?c_name=cder&x=0&y=0
See that btnsubmit.x has been changed to only x and btnsubmit.y has been changed to only y.
3. Check and following code :
<html>
<body>
<!-- SCRIPT STARTS -->
<script type='text/javascript'>
function f_name(fname)
{
document.f.fname.value = fname;
document.f.submit();
}
</script>
<!-- SCRIPT ENDS -->
<!-- FORM STARTS -->
<form name='f' >
<input type='text' name='fname' placeholder="Enter your first name">
<input type='submit' name='submit' value='submit'>
</form>
<!-- FORM ENDS -->
I am <a href='javascript:;' onclick="f_name('Michael')">Michael</a> | <a href='javascript:;' onclick="f_name('John')">John</a> | <a href='javascript:;' onclick="f_name('Ramon')">Ramon</a>
</body>
</html>
The form looks like the pic below.
The form can be submitted two ways,
a. Enter your first name in the textbox given and hit the Submit button
b. Click on any one of the 3 links given at the bottom. This calls up the Javascript function f_name() which then submits the form though the statement ::
document.f.submit();
But wait, it gave an error message?
...
"document.f.submit is not a function".
This is a very common error I have seen while working with various web-forms.
The reason :: We can access all the elements inside a form as shown below.
document.form_name.element_name
example :
//// Changes value of 'fname' element within the form names 'f'
document.f.fname.value = "John";
Similarly, we can access the Submit button in the form above ::
//// This would change the Button text
document.f.submit.value = 'Hit Me !!!'
"submit" is the name of that Submit button input element. Hence, when we try to submit the form by calling document.f.submit() in the f_name() function, the Javascript engine identifies that it is name of an element existing within the form, hence it shows an error message which causes the form not to be submitted at all.
Solution :: Simply renaming the submit button to anything other than 'submit' would do. Even 'Submit' [S is in caps] makes it working as Javascript, being case-sensitive, distinguishes "Submit" to be different from "submit". Hence document.f.submit(); submits the form without any hassle as the submit button element has now been accessible with :: document.f.Submit (S is in caps).
1. If we use a form like this ::
<form name='f' action = "test.php?id=123&color=blue" method='GET'>
<input type='text' name='fname'>
<input type='submit' name='btn_submit' value='submit'>
</form>
the form is submitted to URL :: test.php?fname=john&btn_submit=submit (though the action is set to test.php?id=123&color=blue). The pre-defined URL parameters "id" and "color" are overwritten. Hence the "id" and "color" are never captured at the Server end.
But if we change the method to "POST", all the four parameters ("id", "color", "fname" and "btn_submit") are captured. PHP $_GET global variable receives "id", "color", $_POST gets "fname" and "btn_submit" parameters while $_REQUEST receives all fours of them.
2. If we use Image Submit buttons and suppose that element has a name 'submit_btn', we would receive two element's values at the server end. This is shown below.
<?php
if(!empty($_GET))
print_r( $_GET );
?>
<form name='f' method='GET'>
Enter your name <input type='text' name='c_name'>
<input type='image' name='btnsubmit' src='images/submit_btn.jpg'>
</form>
The above form consists of an input text element and another input element with type image. The second element works as a Submit button. When we submit the form, the URL becomes quite similar to this ...
http://127.0.0.1/test.php?c_name=&btnsubmit.x=2&btnsubmit.y=1
The btnsubmit.x and btnsubmit.y captures the co-ordinates on the Submit buttons's image where the click occurred. If you make the input element like this (remove the name attribute from the element itself) ::
<input type='image' src='images/submit_btn.jpg'>
the URL would become ::
http://127.0.0.1/test.php?c_name=cder&x=0&y=0
See that btnsubmit.x has been changed to only x and btnsubmit.y has been changed to only y.
3. Check and following code :
<html>
<body>
<!-- SCRIPT STARTS -->
<script type='text/javascript'>
function f_name(fname)
{
document.f.fname.value = fname;
document.f.submit();
}
</script>
<!-- SCRIPT ENDS -->
<!-- FORM STARTS -->
<form name='f' >
<input type='text' name='fname' placeholder="Enter your first name">
<input type='submit' name='submit' value='submit'>
</form>
<!-- FORM ENDS -->
I am <a href='javascript:;' onclick="f_name('Michael')">Michael</a> | <a href='javascript:;' onclick="f_name('John')">John</a> | <a href='javascript:;' onclick="f_name('Ramon')">Ramon</a>
</body>
</html>
The form looks like the pic below.
The form can be submitted two ways,
a. Enter your first name in the textbox given and hit the Submit button
b. Click on any one of the 3 links given at the bottom. This calls up the Javascript function f_name() which then submits the form though the statement ::
document.f.submit();
But wait, it gave an error message?
...
"document.f.submit is not a function".
This is a very common error I have seen while working with various web-forms.
The reason :: We can access all the elements inside a form as shown below.
document.form_name.element_name
example :
//// Changes value of 'fname' element within the form names 'f'
document.f.fname.value = "John";
Similarly, we can access the Submit button in the form above ::
//// This would change the Button text
document.f.submit.value = 'Hit Me !!!'
"submit" is the name of that Submit button input element. Hence, when we try to submit the form by calling document.f.submit() in the f_name() function, the Javascript engine identifies that it is name of an element existing within the form, hence it shows an error message which causes the form not to be submitted at all.
Solution :: Simply renaming the submit button to anything other than 'submit' would do. Even 'Submit' [S is in caps] makes it working as Javascript, being case-sensitive, distinguishes "Submit" to be different from "submit". Hence document.f.submit(); submits the form without any hassle as the submit button element has now been accessible with :: document.f.Submit (S is in caps).
No comments:
Post a Comment