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
– Paparappa, Commented Aug 2, 2011 at 12:42

Peter Mortensen · Accepted Answer · 2020-07-13 21:23:53Z

93

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, 2020 at 21:23

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 2, 2011 at 12:44

valderman

8,8654 gold badges25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

valderman Over a year ago

No, you can access forms and their child elements using their name attributes like this.

Markus Pscheidt Over a year ago

+1 for pointing out that onclick events are not triggered when submitting by other means than pressing the button itself.

Peter Mortensen · Accepted Answer · 2020-07-13 22:20:37Z

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, 2020 at 22:20

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 2, 2011 at 12:42

Claude

8796 silver badges15 bronze badges

1 Comment

Paparappa Over a year ago

oh it has an ID, im sorry was just a little quick in my coding. edited the previous post.

Peter Mortensen · Accepted Answer · 2020-07-13 22:23:29Z

7

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, 2020 at 22:23

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 27, 2013 at 19:40

Said Marar

1052 silver badges7 bronze badges

Comments

Ashwin Krishnamurthy · Accepted Answer · 2015-06-09 17:01:22Z

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 9, 2015 at 17:01

answered Aug 2, 2011 at 12:45

Ashwin Krishnamurthy

3,7563 gold badges30 silver badges49 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2020-07-13 22:22:34Z

2

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

edited Jul 13, 2020 at 22:22

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 2, 2011 at 12:44

Chris Snowden

4,9921 gold badge27 silver badges34 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2020-07-13 22:25:09Z

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, 2020 at 22:25

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 29, 2014 at 23:55

Dinesh Rajan

2,60425 silver badges19 bronze badges

4 Comments

Xan Over a year ago

Why would it give an error? You're creating a new property "Value", which is perfectly fine.

Dinesh Rajan Over a year ago

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

Xan Over a year ago

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.

Dinesh Rajan Over a year ago

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

navidsoft · Accepted Answer · 2022-07-04 16:00:56Z

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 4, 2022 at 16:00

answered Jun 28, 2022 at 6:51

navidsoft

1561 gold badge4 silver badges7 bronze badges

1 Comment

ethry Over a year ago

Please don't provide code-only answers - it is very hard to understand stuff when it isn't explained.

Peter Mortensen · Accepted Answer · 2020-07-13 22:25:47Z

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, 2020 at 22:25

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 6, 2015 at 3:30

iCrazybest

3,1634 gold badges26 silver badges25 bronze badges

Comments

Partab Saifuddin Zakir · Accepted Answer · 2020-07-14 13:13:18Z

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, 2020 at 13:13

answered Mar 18, 2019 at 8:25

Partab Saifuddin Zakir

3913 gold badges6 silver badges17 bronze badges

Collectives™ on Stack Overflow

Change value of input and submit form in JavaScript

9 Answers 9

2 Comments

1 Comment

Comments

Comments

Comments

4 Comments

1 Comment

Comments

Your HTML

Your Script

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

1 Comment

Comments

Comments

Comments

4 Comments

1 Comment

Comments

Your HTML

Your Script

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related