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:

<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();
}

of course i could do that, but if thats what i wanted i woulden't have asked about it — Paparappa, Aug 02 '11 at 12:42

score 88 · Accepted Answer · edited Jul 13 '20 at 21:23

88

You could do something like this instead:

<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.

edited Jul 13 '20 at 21:23

Peter Mortensen

30,738
21
105
131

answered Aug 02 '11 at 12:44

valderman

8,365
4
22
29

3

No, you can access forms and their child elements using their `name` attributes like this. – valderman Aug 02 '11 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 07 '13 at 20:46

score 7 · Answer 2 · edited Jul 13 '20 at 22:20

7

document.getElementById("myform").submit();

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">

edited Jul 13 '20 at 22:20

Peter Mortensen

30,738
21
105
131

answered Aug 02 '11 at 12:42

Claude Schlesser

849
6
15

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

score 6 · Answer 3 · edited Jul 13 '20 at 22:23

6

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();
};

edited Jul 13 '20 at 22:23

Peter Mortensen

30,738
21
105
131

answered May 27 '13 at 19:40

Said Marar

95
2
7

Ashwin Krishnamurthy · Answer 4 · 2015-06-09T17:01:22.163

5

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.

edited Jun 09 '15 at 17:01

answered Aug 02 '11 at 12:45

Ashwin Krishnamurthy

3,750
3
27
49

score 2 · Answer 5 · edited Jul 13 '20 at 22:22

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.

<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;
}

score 1 · Answer 6 · edited Jul 13 '20 at 22:25

1

My problem turned out to be that I was assigning as document.getElementById("myinput").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.

edited Jul 13 '20 at 22:25

Peter Mortensen

30,738
21
105
131

answered Mar 29 '14 at 23:55

Dinesh Rajan

2,376
23
19

1

Why would it give an error? You're creating a new property "Value", which is perfectly fine. – Xan May 22 '14 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 '14 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 '14 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 '14 at 17:53

navidsoft · Answer 7 · 2022-07-04T16:00:56.690

1

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.

function SetHolderParent(value) {
   alert(value);
}

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

edited Jul 04 '22 at 16:00

answered Jun 28 '22 at 06:51

navidsoft

71
1
2
6

2

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

score 0 · Answer 8 · edited Jul 13 '20 at 22:25

0

You can use the onchange event:

<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>

edited Jul 13 '20 at 22:25

Peter Mortensen

30,738
21
105
131

answered Mar 06 '15 at 03:30

iCrazybest

2,935
2
24
24

Partab Saifuddin Zakir · Answer 9 · 2020-07-14T13:13:18.440

0

This might help you.

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>

edited Jul 14 '20 at 13:13

answered Mar 18 '19 at 08:25

Partab Saifuddin Zakir

371
1
6
16

Change value of input and submit form in JavaScript

9 Answers9

Your HTML

Your Script

Linked