Javascript Beginner: Why isn't my form submitting

Question

Trying to teach myself javascript here so do bear with me.

Why isn't the following snippet working?

 <script type="text/javascript">
 function form() {
 var role_id = document.contextform.role.value;
 document.contextform.action="profile/" + role_id;
 document.contextform.submit();
 }
 </script>
 <form name="contextform" method="post" action="" />
 <div class="input_group">
 <select name="role" style="opacity: 0;" onchange="form();">
 <option value="none">Select Context</option>
 <option value="4">Profile 4</option>
 </select>
 </div>
 </form>

I'm basically trying to redirect the user based on the value of the option on the drop down list. Thanks.

Answer 1

you closed the form tag when you declare it

<form name="contextform" method="post" action="" />
.
.
</form>

changed it to this and try again

<form name="contextform" method="post" action="">
.
.
</form>

Answer 2

Your HTML is invalid

 <form name="contextform" method="post" action="" />

should be

 <form name="contextform" method="post" action="">

Also, your function name form() is a reserved word. Try something else for the name of that function.

Answer 3

Frist of all,

<select name="role" style="opacity: 0;" onchange="form();">

the opacity there makes it disappeared. So, you can just remove the style.

Secondly, the name form seemsed to be a reserved keyword. So, you can't use that name. Try to put some other name like form_handler()

<script type="text/javascript">
 function form_handler() {
 var role_id = document.contextform.role.value;
 document.contextform.action="profile/" + role_id;
 document.contextform.submit();
 }
 </script>

and change your html as well (with the style removed)

<select name="role" onchange="form_handler();">

Answer 4

Please change the function name form() to something else such as myForm().

Answer 5

If you change the name of your function to postForm in both the function declaration and in the onchange handler, it seems to work for me. There must be a conflict with a global identifier or reserved word named "form".

Answer 6

That script really isn't needed, try:

<form name="contextform" method="post" action="/profile">
 <div class="input_group">
 <select name="role" style="opacity: 0;" onchange="document.contextform.submit();">
 <option value="none">Select Context</option>
 <option value="4">Profile 4</option>
 </select>
 </div>
</form>

Answer 7

Try to replace all document.contextform on document.getElementsByName('contextform')

Answer 8

Nai,

The function name that you have is the same as the key word. That means the form() is the same as the tag "form" and therefore you will get an error and the submit will not work. If you change the function name to form1() it will do the trick. Another thing, role_id value is 4 so the path in action event would be "profile/4" but the file extension is not present so i do not think you will sent to the correct. Below is you code with the changes that i have suggested, hope they work for you.

 <script type="text/javascript"> 
 function form1() 
 { 
 var role_id = document.contextform.role.value; 
 document.contextform.action="profile/" + role_id + ".html"; 
 document.contextform.submit(); 
 } 
 </script> 
 <form name="contextform" method="post" action="">
 <div class="input_group"> 
 <select name="role" style="opacity: 0;" onchange="form1()"> 
 <option value="none">Select Context</option> 
 <option value="4">Profile 4</option> 
 </select> 
 </div> 
 </form>