Javascript - adding variables into a form submit

Question

I have a bit of javascript that finds an existing id and replaces it with a form.

Within that form I'd like to be able to add javascript variables to the submit url. I'm not sure if that's possible or if I'm just implementing it incorrectly.

$(document).ready(function () {
    $("#FB_cs_redirectTextBox")
    .replaceWith('<form class="cf" action="http://test.com/s/search.html?profile=_default&collection=general + document.getElementById(' + item-select + ').value" method="get">' +
                '<input type="search" placeholder="Search for stuff" name="search" class="searchbox-input" required="">' +
             '<select name="item-select" id="item-select" required="">' +
                '<option value="" selected="selected">Item type...</option>' +
                '<option value="level">item 1</option>' +
                '<option value="taste">item 2</option>' +
                '<option value="location">item 3</option>' +
                '<option value="month">item 4</option>' +
                '</select>' +   
             '<button type="submit" class="btn btn--green searchbox-submit">' +
                    'Search for items' +
                '</button>' +
            '</form>');


 });

So this is my problem line I think:

action="http://test.com/s/search.html?profile=_default&collection=general + document.getElementById(' + item-select + ').value"

I was also wondering if this is possible, how I could also add the value of the select to the url action. Would I do this by applying the same id to all the options and then calling document.getElementById on that id name?

All help greatly appreciated!

Possible duplicate : http://stackoverflow.com/questions/993834/adding-post-parameters-before-submit — Vikash, Jun 18 '15 at 14:32
What is one of the expected URLs for `action`? Something like `http://test.com/s/search.html?profile=_default&collection=generallevel`? — Sebastian Simon, Jun 18 '15 at 14:32
Whoops missed a bit off it should be: http://test.com/s/search.html?profile=_default&collection=general&search= then the variable amended here — hlh3406, Jun 18 '15 at 14:35

score 2 · Accepted Answer · answered Jun 18 '15 at 14:30

2

Give your form a name, then:

document.form_name.action = 'http://test.com/s/search.html?profile=_default&collection=general' + document.getElementById(' + item-select + ').value;

Make sure you do this after the DOM is loaded, otherwise it won't work.

answered Jun 18 '15 at 14:30

idoberko2

136
2

The name wasn’t the main problem. You also changed the string concatenation around `document.getElementById`, right? _This_ was the actual issue. – Sebastian Simon Jun 18 '15 at 14:31

score 1 · Answer 2 · answered Jun 18 '15 at 14:36

Replace your
This

action="http://test.com/s/search.html?profile=_default&collection=general + document.getElementById(' + item-select + ').value"

With

action="http://test.com/s/search.html?profile=_default&collection=general + document.getElementById(item-select).value"

You need to put ' and + only if 'item-select' is a variable but its not, its an ID, so remove ' and + marks. codes work

score 1 · Answer 3 · answered Jun 18 '15 at 14:38

Change this

'<form class="cf" action="http://test.com/s/search.html?profile=_default&collection=general + document.getElementById(' + item-select + ').value" method="get">'

to this

'<form class="cf" action="http://test.com/s/search.html?profile=_default&collection=general&search=' + document.getElementById('item-select').value + '" method="get">'

Then the JavaScript syntax is correct again.

These are the expected URLs for action:

http://test.com/s/search.html?profile=_default&collection=general&search=level
http://test.com/s/search.html?profile=_default&collection=general&search=taste
http://test.com/s/search.html?profile=_default&collection=general&search=location
http://test.com/s/search.html?profile=_default&collection=general&search=month

Javascript - adding variables into a form submit

3 Answers3