Change value of input and submit form in JavaScript

Question

I m currently working on a basic form  When you hit the submit button  it should first change the value of a field  and then submit the form as usual  It all looks a bit like this   lt form name  quot myform quot  id  quot myform quot  action  quot action php quot  gt       lt input type  quot hidden quot  name  quot myinput quot  value  quot 0 quot    gt       lt input type  quot text quot  name  quot message quot  value  quot  quot    gt       lt input type  quot submit quot  name  quot submit quot  onclick  quot DoSubmit   quot    gt   lt  form gt   And this is how far I ve come with the JavaScript code  It changes  quot myinput quot  s value to 1  but it does not submit the form  function DoSubmit      document myform myinput value    1     document getElementById  quot myform quot   submit

User · Answer

You can use the onchange event   lt form name  quot myform quot  id  quot myform quot  action  quot action php quot  gt       lt input type  quot hidden quot  name  quot myinput quot  value  quot 0 quot  onchange  quot this form submit   quot   gt       lt input type  quot text quot  name  quot message quot  value  quot  quot    gt       lt input type  quot submit quot  name  quot submit quot  onclick  quot DoSubmit   quot    gt   lt  form gt

User · Answer

This might help you  Your HTML   lt form id  quot myform quot  action  quot action php quot  gt   lt input type  quot hidden quot  name  quot myinput quot  value  quot 0 quot    gt   lt input type  quot text quot  name  quot message quot  value  quot  quot    gt   lt input type  quot submit quot  name  quot submit quot  onclick  quot save   quot    gt   lt  form gt    Your Script       lt script gt          function save                    myinput   val  1                    form   submit                   lt  script gt

User · Answer

You re trying to access an element based on the name attribute which works for postbacks to the server  but JavaScript responds to the id attribute  Add an id with the same value as name and all should work fine   lt form name  quot myform quot  id  quot myform quot  action  quot action php quot  gt     lt input type  quot hidden quot  name  quot myinput quot  id  quot myinput quot  value  quot 0 quot    gt     lt input type  quot text quot  name  quot message quot  id  quot message quot  value  quot  quot    gt     lt input type  quot submit quot  name  quot submit quot  id  quot submit quot  onclick  quot DoSubmit   quot    gt   lt  form gt   function DoSubmit      document getElementById  quot myinput quot   value    1     return true

User · Answer

Here is simple code  You must set an id for your input  Here call it  myInput   var myform   document getElementById  myform    myform onsubmit   function        document getElementById  myInput   value    1       myform submit

User · Answer

document getElementById  quot myform quot   submit     This won t work as your form tag doesn t have an id  Change it like this and it should work   lt form name  quot myform quot  id  quot myform quot  action  quot action php quot  gt

User · Answer

No  When your input type is submit  you should have an onsubmit event declared in the markup and then do the changes you want  Meaning  have an onsubmit defined in your form tag   Otherwise change the input type to a button and then define an onclick event for that button

User · Answer

You could do something like this instead   lt form name  quot myform quot  action  quot action php quot  onsubmit  quot DoSubmit    quot  gt       lt input type  quot hidden quot  name  quot myinput quot  value  quot 0 quot    gt       lt input type  quot text quot  name  quot message quot  value  quot  quot    gt       lt input type  quot submit quot  name  quot submit quot    gt   lt  form gt   And then modify your DoSubmit function to just return true  indicating that  quot it s OK  now you can submit the form quot  to the browser  function DoSubmit      document myform myinput value    1     return true     I d also be wary of using onclick events on a submit button  the order of events isn t immediately obvious  and your callback won t get called if the user submits by  for example  hitting return in a textbox

User · Answer

My problem turned out to be that I was assigning as document getElementById  quot myinput quot   Value    1   Notice the capital V in Value  Once I changed it to small case  i e   value  the data started posting  Odd as it was not giving any JavaScript errors either

[javascript] Change value of input and submit form in JavaScript

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to onclick

Examples related to submit