CODEWITHSUNDEEP
javascripthtmlformsonclicksubmit
Paparappa
Paparappa

Reputation: 2189

Change value of input and submit form in JavaScript

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

Upvotes: 65

Views: 278347

Answers (9)

navidsoft
navidsoft

Reputation: 159

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);" />

Upvotes: 1

Partab Saifuddin Zakir
Partab Saifuddin Zakir

Reputation: 381

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>

Upvotes: 0

iCrazybest
iCrazybest

Reputation: 3125

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>

Upvotes: 0

Dinesh Rajan
Dinesh Rajan

Reputation: 2584

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.

Upvotes: 1

Said Marar
Said Marar

Reputation: 105

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

Upvotes: 7

Chris Snowden
Chris Snowden

Reputation: 5002

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

Upvotes: 2

Claude
Claude

Reputation: 879

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

Upvotes: 7

valderman
valderman

Reputation: 8765

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.

Upvotes: 93

Ashwin Krishnamurthy
Ashwin Krishnamurthy

Reputation: 3758

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.

Upvotes: 5

Related Questions