How to pass a form input value into a JavaScript function

Question

I have a generic JavaScript function which takes one parameter  function foo val            and I want to call the function when submit a form    lt form gt   lt input type  text  id  formValueId   gt   lt input type  button  onclick  foo this formValueId    gt   lt  form gt    but the expression foo this formValueId  does not work  not surprised  it was a desperate attempt   So the question is  how can I pass a form value to the javascript function   As I mentioned the javascript is generic and I don t want to manipulate the form inside it    I could create a helper function in the middle to get the form values with jQuery  for example  and then call the function but I was wondering if I can do it without the helper function

User · Answer

Well ya you can do that in this way        lt input type  text  name  address  id  address  gt           lt div id  map canvas  style  width  500px  height  300px  gt  lt  div gt       lt input type  button  onclick  showAddress address value   value  ShowMap   gt    Java Script  function showAddress address        alert  This is address    address       That is one example for the same  and that will run

User · Answer

More stable approach    lt form onsubmit  foo     formValueId   val    return false   gt   lt input type  text  id  formValueId   gt   lt input type  submit  value  Text on the button   gt   lt  form gt    The return false  is to prevent actual form submit  assuming you want that

User · Answer

It might be cleaner to take out your inline click handler and do it like this     document  ready function             button-id   click function           foo     formValueId   val

User · Answer

Use onclick  foo document getElementById  formValueId   value

User · Answer

There are several ways to approach this  Personally  I would avoid in-line scripting  Since you ve tagged jQuery  let s use that   HTML    lt form gt       lt input type  text  id  formValueId  name  valueId   gt       lt input type  button  id  myButton    gt   lt  form gt    JavaScript     document  ready function             myButton   click function           foo     formValueId   val

User · Answer

Give your inputs names it will make it easier   lt form gt   lt input type  text  id  formValueId  name  valueId   gt   lt input type  button  onclick  foo this form valueId value    gt   lt  form gt    UPDATE   If you give your button an id things can be even easier    lt form gt   lt input type  text  id  formValueId  name  valueId   gt   lt input type  button  id  theButton   gt   lt  form gt    Javascript   var button   document getElementById  theButton    value    button form valueId value  button onclick   function         foo value

[javascript] How to pass a form input value into a JavaScript function

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to forms