Passing parameters to JavaScript function from a form

Question

I am having trouble trying to figure out how to do this. I want to, using fields in a form as variables call a JavaScript function.

I have this:

<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>

from an example but what I need is this, but doesn't work:

<form onsubmit="myFunction(this.num_cluster)">
  Num. Cluster: <input type="text" id="num_cluster">
  <input type="submit">
</form>

Cloud someone help me ? Thanks :)

Krzysztof Safjanowski · Accepted Answer · 2015-04-23 18:43:53Z

1

Change id to name - after that you can access value of input field

function myFunction(form, event) {
  event.preventDefault();
  alert(form.num_cluster.value);
}

<form onsubmit="return myFunction(this, event)">
  Num. Cluster: <input name="num_cluster" type="text">
  <input type="submit">
</form>

As problem is little more interesting - we can extend our method onsubmit

function s(form, event) {
  event.preventDefault();

  var values = Array.prototype.slice.call(form.elements) // as form elements are not an array
    .filter(function(element) {
      return element.type !== 'submit'; // I don't need submit button
    })
    .map(function(element) {
      return (element.name + ': ' + element.value); // get name and value for rest form inputs and assign them to values variable
    });

  alert('values => ' + values.join(', ')) // finish 
}

<form onsubmit="return s(this, event)">
  <p>Foo:
    <input type="text" name='foo' />
  </p>
  <p>Bar:
    <input type="text" name='bar' />
  </p>
  <p>Baz:
    <select name='baz'>
      <option value="lorem">lorem</option>
      <option value="ipsum">ipsum</option>
    </select>
  </p>
  <p>
    <input type="submit" />
  </p>
</form>

edited Apr 23, 2015 at 18:43

answered Apr 23, 2015 at 18:07

Krzysztof Safjanowski

7,4483 gold badges38 silver badges50 bronze badges

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

2 Comments

Oveie Over a year ago

Hi @krzysztof-safjanowski , thanks for your answer. Could you explain me what the method "preventDefault" does ? It doesn't work without it and Id like to understand it. Thanks

Krzysztof Safjanowski Over a year ago

@Oveie event.preventDefault - developer.mozilla.org/en/docs/Web/API/Event/preventDefault prevents from default action (it is submitting for form). I can imagine that there is some validation. If everything is OK you can execute something like event.target.submit() and submit content of the form to the backend.

Danyal Sandeelo · Accepted Answer · 2015-04-23 17:33:14Z

0

function myFunction(){
  var value=document.getElementById("num_cluster").value;

///  value has the actual thing that you need
//... rest of your code
}

you can use this statement even in onsubmit event by directly writing java script there.

answered Apr 23, 2015 at 17:33

Danyal Sandeelo

12.4k10 gold badges57 silver badges90 bronze badges

Collectives™ on Stack Overflow

Passing parameters to JavaScript function from a form

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related