JavaScript: fill HTML form using JavaScript and submit

Question

I need to fill HTML form like this:

<form action="http://www.example.net/index.php" method="post">
<div class="poll">
<p class="poll-answer">
<label><input type='radio' name='option_id' value='12' />Abc</label>
</p>
<p class="poll-answer">
<label><input type='radio' name='option_id' value='34' />Def</label>
</p>
<input type="hidden" name="poll_id" value="56" />
<input type="submit" value="Submit!" />
</div>
</form>

I need to fill it using JavaScript and send it.

I writed:

<script>
function post(path) {
    method = "post";
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "radio");
    hiddenField.setAttribute("name", "option_id");
    hiddenField.setAttribute("value", "12");

    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "poll_id");
    hiddenField.setAttribute("value", "56");

    form.submit();
}
post('http://www.example.net/index.php');
</script>

But in response there are no data. I need to send form with slected Abc = value='12'. Form action is not on my domain. I have a.com, form is at b.com.

# nc -l 192.168.1.11 -p 80
POST /index.php HTTP/1.1
Host: example.net
Connection: keep-alive
Content-Length: 0
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: null
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.101 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip,deflate
Accept-Language: cs-CZ,cs;q=0.8

What I do bad?

looks like you forgot to append the hiddenfield to the form, and append the form to the document. — wwwmarty
– wwwmarty, Commented Oct 17, 2014 at 13:56

leopik · Accepted Answer · 2014-10-18 15:31:19Z

2

You're forgetting to append the hidden field to the form and form to the document.

<script>
function post(path) {
    method = "post";
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "radio");
    hiddenField.setAttribute("name", "option_id");
    hiddenField.setAttribute("value", "12");

    form.appendChild(hiddenField);

    hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "poll_id");
    hiddenField.setAttribute("value", "56");

    form.appendChild(hiddenField);
    document.body.appendChild(form);

    form.submit();
    }
post('http://www.example.net/index.php');
</script>

edited Oct 18, 2014 at 15:31

answered Oct 17, 2014 at 13:59

leopik

2,3512 gold badges19 silver badges32 bronze badges

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

5 Comments

Paul Roub Over a year ago

You're appending the same field object twice, even though the attributes have changed. Create a new input element the second time around.

martin Over a year ago

If I open html page with your code, nothing send to server. I look at /var/log/apache/access.log and /var/log/apache/error.log and there are no messages :-( What is bad?

martin Over a year ago

Chrome inspect element show me Uncaught TypeError: undefined is not a function file.html:26path file.html:26(anonymous function)

leopik Over a year ago

Which line is line 26?

martin Over a year ago

It was document.body.appenChild(form); instead of document.body.appendChild(form); now it works good. Thank you!

zozo · Accepted Answer · 2014-10-17 14:00:27Z

0

You added both form and field, into the document. You need to add the form to the document, and the field to the form:

var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);

var hiddenField = document.createElement("input");
// bla bla

form.appendChild(hiddenField);
document.body.appenChild(form);

answered Oct 17, 2014 at 14:00

zozo

8,64019 gold badges83 silver badges142 bronze badges

Collectives™ on Stack Overflow

JavaScript: fill HTML form using JavaScript and submit

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related