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!

What is one of the expected URLs for action? Something like http://test.com/s/search.html?profile=_default&collection=generallevel? — Sebastian Simon
– Sebastian Simon, Commented Jun 18, 2015 at 14:32
Whoops missed a bit off it should be: test.com/s/… then the variable amended here — hlh3406
– hlh3406, Commented Jun 18, 2015 at 14:35

idoberko2 · Accepted Answer · 2015-06-18 14:30:54Z

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, 2015 at 14:30

idoberko2

1362 bronze badges

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

1 Comment

Sebastian Simon Over a year ago

The name wasn’t the main problem. You also changed the string concatenation around document.getElementById, right? This was the actual issue.

Tharaka Arachchige · Accepted Answer · 2015-06-18 14:36:32Z

1

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

answered Jun 18, 2015 at 14:36

Tharaka Arachchige

8076 silver badges11 bronze badges

Comments

Sebastian Simon · Accepted Answer · 2015-06-18 14:38:28Z

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

Collectives™ on Stack Overflow

Javascript - adding variables into a form submit

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related