add input values to html attributes on click

Question

I have this:

<input type="text" name="field1" id="firstField">
<input type="text" name="field2" id="secondField">
<button name="submitButton" data-parameter="">Click</button>

When you click on the button, an EventListener (jQuery.on) calls a function jQuery.ajax() to load another page where the data gets processed.

the data-parameter attribute is the data for $_POST.

So, data-parameter="name1=test" is $_POST["name1"] with a value test

But how do I get the values of the input-fields into this attribute?

And I have more than one form like this. Some contain more fields, some less.

and if [name="field1"], why is there also a id="firstField" attribute? — artfuldev
– artfuldev, Commented Feb 22, 2014 at 9:14
1.I want that the value of field1 and field2 go into the data-parameter attribute of the button. Because this attribute sets the parameter for the data, sent by $.ajax() 2.sorry, the second id was a typo. I'll correct this. 3.I nearly always add a id to elements — SwiftedMind
– SwiftedMind, Commented Feb 22, 2014 at 9:23

Exlord · Accepted Answer · 2014-02-22 09:37:59Z

1

$('form button[name="submitButton"]').click(function(){    
  $(this).data('parameter',$(this).closest('form').serialize());
}

edited Feb 22, 2014 at 9:37

answered Feb 22, 2014 at 9:28

Exlord

5,4395 gold badges39 silver badges58 bronze badges

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

2 Comments

SwiftedMind Over a year ago

thanks, this could work. But if I have multiple forms on one page, do I have to make this for every form I have? Or is it possible to select the form-element in whic the button you have clicked on is? So that you don't need to know the exact name/id of the form? Because then, you could do a EventListener for all buttons with the class .submitButton. I hope you understand what I mean. It's difficult to explain

Exlord Over a year ago

i updated the code now u dont need the form name, and if there is only 1 button in the form u dont even need the buttons name too just use $('form button') or $('form button[type="submit"]') and set the buttons type to submit

Vilvan · Accepted Answer · 2014-02-22 10:33:51Z

i don't know why cant you just send the data from those input fields directly to the $ajax().

Anyway a generalized code to get all data and to place it in on the data-parameter would be.. step 1: First you need a form or div tag binding all the necessary input fields and a button. step 2: I expect the variable name used in the url post method is same as the input field name, so the just the value changes. And also as u said if the no. of fields changes, its ok. even though u can use this piece of code. Step 3: i am using onclick event of the button to capture all data. And only after that u should run the code to send via $_POST Step 4: Change the tags #yourFormID,#buttonID as per use.

var data-parameter="";
$('#buttonID').click(function(){

  $('#yourFormID input[type=text]').each(function(){
     var data-parameter+=$(this).attr("name")+"="+$(this).val()+"&";
  });
  $('#buttonID').attr("data-parameter",data-parameter);
}

not-found.404 · Accepted Answer · 2014-02-22 09:28:22Z

0

The easiest way is to call var serializedFormData = $(yourform).serialize() and paste this data to your button $('[name=submitButton]').data('parameter', serializedFormData). You better provide a part of code to better understanding.

answered Feb 22, 2014 at 9:28

not-found.404

703 bronze badges

Collectives™ on Stack Overflow

add input values to html attributes on click

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related