Add input into form with jquery and submit

Question

I want to add an input into form using JQuery, and then submit the form with pure HTML without using javascript.

<form method="post" action="" id="myform" >
<input type="hidden" name="example" value="done" />
<input type="submit" value="try" />
</form>

Here my JQuery line that add new input:

$('#myform').append("<input name="example2" value="done" type='hidden'/>");

My issue is when i submit the form, i can't get example2 input value ! help me to figure it out.

You need `event.PreventDefault()` then invoke the submit event using `$form.submit()` — Adam Azad, Aug 18 '16 at 14:46
@BraveType, then kindly, remove `jQuery` tag. Afterwards, `.submit()` method is not exclusive to jQuery library. And, no need for exclamation marks. — Adam Azad, Aug 18 '16 at 14:50
The exclamation marks is because i noticed this in my post :) — Brave Type, Aug 18 '16 at 14:51
`.submit()` will use the old fashion way of form submission. In other words, in won't use `$.ajax` :) — Adam Azad, Aug 18 '16 at 14:52
Yes, i noticed to don't use `javascript` in order to submit the form, i want it in pure HTML :) — Brave Type, Aug 18 '16 at 14:53
`i can't get example2 input value` So maybe you can tell us how you are trying to retrieve it?! And post all relevant code in question itself because obviously, this is not the one you have posted (mis-match quoting...) — A. Wolff, Aug 18 '16 at 14:54
like this `$example_two = $_POST["example2"]; echo $example_two;` — Brave Type, Aug 18 '16 at 14:56
You are doing something wrong but it is not in your posted code as i can see it. — A. Wolff, Aug 18 '16 at 14:58

score 2 · Answer 1 · answered Aug 18 '16 at 15:02

2

Seems like the input box failed to append at the end of the form.

You could try inspect element and check if the HTML for the hidden field is generated. Check the quotes:

$('#myform').append('<input name="example2" value="done" type="hidden"/>');

answered Aug 18 '16 at 15:02

Indrasis Datta

8,692
2
14
32

score 2 · Accepted Answer · answered Aug 18 '16 at 15:27

What you need to do is download jquery library or use the external google cdn library as the one i have used in my case in the head of your html file.

Ensure that you append the input on the form as the document loads. If you intend to submit your form to Php as the server side check if the form is posted and print the output. You should save your file with .php extension.

Try the solution below. Thanks

$(document).ready(function() {
        $("form#myform").append("<input name='example2' value='done' type='hidden'/>")
      })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <form method="post" action="" id="myform">
      <input type="hidden" name="example" value="done" />
      <input type="submit" value="try" />
    </form>

score 0 · Answer 3 · answered Aug 18 '16 at 14:59

0

Your JQuery appears to use double quotes when single should be used:

$('#myform').append("<input name='example2' value='done' type='hidden'/>");

answered Aug 18 '16 at 14:59

Nick

16,066
3
16
32

score 0 · Answer 4 · edited May 23 '17 at 12:33

if you use "" at the start and at the end of the () , inside use '' . same if you use '' at the start and at the end of the () ,inside use ""

see more here : When to use double or single quotes in JavaScript?

or here : Single or Double quotes in jQuery

$('#myform').append("<input name='example2' value='done' type='hidden'>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="" id="myform" >
<input type="hidden" name="example" value="done" />
<input type="submit" value="try" />
</form>

score -1 · Answer 5 · edited Aug 18 '16 at 15:25

What you need to do is download jQuery library or use the external google CDN library as the one I have used in my case in the head of your html file.

Ensure that you append the input on the form as the document loads. If you intend to submit your form to PHP as the server side check if the form is posted and print the output. You should save your file with .php extension.

Try the solution below.

$(document).ready(function() {
        $("form#myform").append("<input name='example2' value='done' type='hidden'/>")
      })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <form method="post" action="" id="myform">
      <input type="hidden" name="example" value="done" />
      <input type="submit" value="try" />
    </form>

Add input into form with jquery and submit

5 Answers5