CODEWITHSUNDEEP
javascriptjqueryhtmlforms
hlh3406
hlh3406

Reputation: 1400

Javascript - adding variables into a form submit

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!

Upvotes: 1

Views: 814

Answers (3)

Sebastian Simon
Sebastian Simon

Reputation: 19475

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

Upvotes: 1

Tharaka Arachchige
Tharaka Arachchige

Reputation: 807

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

Upvotes: 1

idoberko2
idoberko2

Reputation: 136

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.

Upvotes: 2

Related Questions