Add parameters to url with onSubmit using a Javascript function

Question

I want to add html parameters to the url with onsubmit. I have 2 forms(1 GET, 1 POST), want to use 1 button to submit them both(Using the POST form button) When the submit button is pressed use onSubmit to call a javascript function, where parameters are "appended" to the url.

I was thinking about doing something like this:

function onSubmitForm() {
    url = "localhost:8080/test/index.php?Title=document.getElementsByName('title')[0].value";
    //I don't know how to actually call the url.
}

EDIT

I got what I wanted: Appending form input value to action url as path

Scott Marcus · Accepted Answer · 2018-03-01 20:44:04Z

2

First, you have to concatenate the string's static and dynamic parts. Then, you can redirect.

function onSubmitForm() {
  window.location = "localhost:8080/test/index.php?Title=" + 
    document.querySelector('title').textContent;
}

NOTES:

Only form fields have a .value property. If you are trying to get the text within an element, you can use .textContent.
.getElementsByName() scans the entire document and makes a collection of all the matching elements. That's wasteful when you know you want only the first one and, in the case of <title>, there is only ever going to be one of those in a document anyway. Use .querySelector() to locate just the first matching element.

answered Mar 1, 2018 at 20:44

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

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

2 Comments

CrimzonWeb Over a year ago

Can't seem to get it working. I had the code done, It was 3 lines of code yet I somehow managed to delete it. It was a stackoverflow post that I got it from and now that I've looked everyone is suggesting window.location which isn't working in my case and I unfortunately can't get it working. Thanks anyway tho.

Scott Marcus Over a year ago

@CrimzonWeb You need to make sure that this code runs after the entire HTML document has been parsed. As such, place this code into a <script> element and insert that element just before the closing body tag (</body>). As long as your <title> element has a value, this will work.

KolaCaine · Accepted Answer · 2018-03-01 21:17:07Z

1

ES6

NOTES :

Don't forget to use Babel for converting your code in ES5.

I purpose to you this solution :

function onSubmitForm() {
  window.location = `localhost:8080/test/index.php? Title=${document.querySelector('title').textContent}`
}

This way of doing with backtick is even simpler than in ES5, let me explain, before we had to concatenate with the sign + ourVariable + the continuation of our string of character.

Here we have more of that. And we can write on several lines as well. Then ${} is used to pass a variable inside

Documentation if you want : Literal template string

edited Mar 1, 2018 at 21:17

answered Mar 1, 2018 at 21:03

KolaCaine

2,1855 gold badges22 silver badges35 bronze badges

5 Comments

Scott Marcus Over a year ago

This is not an answer. It doesn't explain what is being done and why.

KolaCaine Over a year ago

You explain why on your response. I thinking it's important to know the good pratice with ES6 :)

Scott Marcus Over a year ago

What if my answer gets removed? Then, how helpful is your answer?

Scott Marcus Over a year ago

This is a little better, but it would be best to include a link to the documentation on ES6 templated strings. Answers should always be as complete as possible.

KolaCaine Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Add parameters to url with onSubmit using a Javascript function

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related