CODEWITHSUNDEEP
javascripthtmlformspost
martin
martin

Reputation: 1787

JavaScript: fill HTML form using JavaScript and submit

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?

Upvotes: 0

Views: 3919

Answers (2)

leopik
leopik

Reputation: 2351

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>

Upvotes: 2

zozo
zozo

Reputation: 8582

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

Upvotes: 0

Related Questions