Simple JavaScript button OnClick to serialize elements as URL params - short notation using THIS?

Question

I used to be good a this 20 years back ... but somehow there is no success today. What I want to do: use a form, a button with an onlclick event. Onclick then builds a URL using domain and sends params from the form as url params using ? and & .....

QUestion: how can I do this smart and short in 1 go?

(I vaguely recall that this. worked in the past)

Url should be

If all fields empty: domain.com? or domain.com?shirt_generalfit=&shirt_size=

If 1 fields populatd: domain.com?shirt_generalfit638=&shirt_size=

Help appreciated

<form name="custom_form" >
  <select id="shirt_generalfit" class="in-sentence">
    <option value="" selected="selected"></option>
    <option value="638">A</option>
    <option value="639">B</option>
  </select>
  <select id="shirt_size" class="in-sentence">
    <option value="" selected="selected"></option>
    <option value="584">35</option>
    <option value="283">36</option>
  <input type="button" id="custom_form" onclick="alert(window.location='https://example.com?'.if(shirt_size.value){'shirt_size='.shirt_size.value})" value="Show results" />
</form>

As others mentioned, you should have `name=` on your fields, and you don't really need `id` once you have them. Then see the use of [FormData](https://developer.mozilla.org/docs/Web/API/FormData) in [this answer](https://stackoverflow.com/a/26501400/17300). From `var fd=new FormData(...)` you can then `fd.get('shirt_size')` assuming shirt_size is a _name_ not an _id_. — Stephen P, Jun 02 '17 at 00:27

score 1 · Answer 1 · answered Jun 01 '17 at 21:55

1

Change the type of the input from type="button" to type="submit". Then in the form tag it should look like

<form name="custom_form" method="GET" action="https://example.com/">

That should do the trick without using JavaScript at all.

answered Jun 01 '17 at 21:55

rainerhahnekamp

1,087
12
27

How quickly we forget what these tags were invented for in the first place :) – Daniel Beck Jun 02 '17 at 00:13

score 0 · Accepted Answer · answered Jun 02 '17 at 00:02

If you want to use html form functionality, add name to each input - so on submit it will be added as parameters automatically and also use <input type="submit"> instead of 'button'. Here is simplified example:

<form method="get" action="http://example.com">
   <input type="text" name="parameter"/>
   <input type="submit" value="OK"/>
</form>

When you click 'OK' button it will open http://example?parameter=<input-value>

score 0 · Answer 3 · answered Jun 02 '17 at 00:19

you can use method Event Prevent Default and Add Event Listener , in form method, so you can redirect to the page what you want. and in the form you can put submit button.

example :

HTML :

<form name="custom_form">
    <select id="shirt_generalfit" class="in-sentence">
      <option value="" selected="selected"></option>
      <option value="638">A</option>
      <option value="639">B</option>
    </select>
    <select id="shirt_size" class="in-sentence">
      <option value="" selected="selected"></option>
      <option value="584">35</option>
      <option value="283">36</option>
    <input type="submit" id="custom_form" value="Show results" />
  </form>

Javascript

 const yourForm = document.querySelector('form'),
     nextLink = 'https://example.com?';

     yourForm.addEventListener('submit', event => {

     event.preventDefault();// stop submit
     let shirt_generalfit document.getElementById('shirt_generalfit').value,
            shirt_size = document.getElementById('shirt_size').value

        console.log(shirt_generalfit,shirt_size)
        window.location=nextLink+'shirt_generalfit='+shirt_generalfit+'&shirt_size='+shirt_size
        // actual logic, e.g. validate the form

  });

Simple JavaScript button OnClick to serialize elements as URL params - short notation using THIS?

3 Answers3