Share Your Experience: Take the 2024 Developer Survey

Change value of input and submit form in JavaScript

Asked 12 years, 10 months ago Modified 1 year, 10 months ago Viewed 272k times

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:
64
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>

And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it
does not submit the form.

function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}

javascript html forms onclick submit

Share Improve this question Follow edited Jul 13, 2020 at 21:22 asked Aug 2, 2011 at 12:39
Peter Mortensen Paparappa
31.2k 22 109 132 2,149 3 18 35

why not just change myinput value to 1 in the html? – Andrea Aug 2, 2011 at 12:41

54 of course i could do that, but if thats what i wanted i woulden't have asked about it – Paparappa Aug 2,
2011 at 12:42

@Paparappa That response killed it! – qualebs May 14, 2017 at 19:58
 Ads by
Send feedback

Why this ad?

Report this ad

9 Answers Sorted by: Highest score (default)

You could do something like this instead:

92 <form name="myform" action="action.php" onsubmit="DoSubmit();">

<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>

And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can
submit the form" 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.

Share Improve this answer Follow edited Jul 13, 2020 at 21:23 answered Aug 2, 2011 at 12:44
Peter Mortensen valderman
31.2k 22 109 132 8,535 4 22 29

3 No, you can access forms and their child elements using their name attributes like this. – valderman Aug
2, 2011 at 13:30

16 +1 for pointing out that onclick events are not triggered when submitting by other means than pressing the
button itself. – Markus Pscheidt Jan 7, 2013 at 20:46
 document.getElementById("myform").submit();

7 This won't work as your form tag doesn't have an id.

Change it like this and it should work:

<form name="myform" id="myform" action="action.php">

Share Improve this answer Follow edited Jul 13, 2020 at 22:20 answered Aug 2, 2011 at 12:42
Peter Mortensen Claude Schlesser
31.2k 22 109 132 869 6 15

oh it has an ID, im sorry was just a little quick in my coding. edited the previous post. – Paparappa Aug 2,
2011 at 12:46

Here is simple code. You must set an id for your input. Here call it 'myInput':

7 var myform = document.getElementById('myform');

myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};

Share Improve this answer Follow edited Jul 13, 2020 at 22:23 answered May 27, 2013 at 19:40
Peter Mortensen Said Marar
31.2k 22 109 132 105 2 7

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.
5
Otherwise change the input type to a button and then define an onclick event for that button.

Share Improve this answer Follow edited Jun 9, 2015 at 17:01 answered Aug 2, 2011 at 12:45
Ashwin Krishnamurthy
3,758 3 29 49

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
2 all should work fine.
 <form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>

function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}

Share Improve this answer Follow edited Jul 13, 2020 at 22:22 answered Aug 2, 2011 at 12:44
Peter Mortensen Chris Snowden
31.2k 22 109 132 5,002 1 26 34

My problem turned out to be that I was assigning as document.getElementById("myinput").Value

= '1';

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.

Share Improve this answer Follow edited Jul 13, 2020 at 22:25 answered Mar 29, 2014 at 23:55
Peter Mortensen Dinesh Rajan
31.2k 22 109 132 2,514 24 19

1 Why would it give an error? You're creating a new property "Value", which is perfectly fine. – Xan May 22,
2014 at 12:26

What I am trying to say is i was referring to "value" as "Value". It of course will give a undefined error as this
property "Value" was not initialized – Dinesh Rajan May 22, 2014 at 17:48

Well, it would: 1) Give no error if you're setting it, 2) Silently return undefined if you're using it, which is
not an error. – Xan May 22, 2014 at 17:49

You are right..I should have clarified a bit more.. I was assigning a "Value" property and posting a form. The
POST received in the the server was looking for "value" and hence never found the value I was setting
– Dinesh Rajan May 22, 2014 at 17:53

I have done this and it works for me. At first you must add a script such as my SetHolderParent()
and call in the html code like below.
1
function SetHolderParent(value) {
alert(value);
}

<input type="submit" value="Submit" onclick="SetHolderParent(222);" />

 Run code snippet Expand snippet

Share Improve this answer Follow edited Jul 4, 2022 at 16:00 answered Jun 28, 2022 at 6:51
navidsoft
141 1 4 6

2 Please don't provide code-only answers - it is very hard to understand stuff when it isn't explained. – ethry
Jul 2, 2022 at 21:18

You can use the onchange event:

0 <form name="myform" id="myform" action="action.php">

<input type="hidden" name="myinput" value="0"
onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>

Share Improve this answer Follow edited Jul 13, 2020 at 22:25 answered Mar 6, 2015 at 3:30
Peter Mortensen iCrazybest
31.2k 22 109 132 3,025 3 24 24

This might help you.

0 Your HTML

<form id="myform" action="action.php">

<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>

Your Script

<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>

Share Improve this answer Follow edited Jul 14, 2020 at 13:13 answered Mar 18, 2019 at 8:25
Partab Saifuddin Zakir
381 2 6 16