asked on

Javascript add .data attribute to form fields when value is changing

Hi,
I'm looking for a way to add .data attribute for the new value for all kind of input, select, radio and checkbox

<input .... data-new-value="2">

Now I have the new value working ok for input text only using this code:
This is not working with checkbox and not with radio.
With textarea this is working ok if I click on another form item but not updating when clicking anywhere else.

$(document).on('change', function(){
		$("#my-form").find("input, select, textarea").each( function(){
 				$(this).attr("data-new-value", $(this).val());
 		});
});

Open in new window

my code is based on this snippet

$(document).on('focusin', 'input', function(){
    console.log("Saving value " + $(this).val());
    $(this).data('val', $(this).val());
}).on('change','input', function(){
    var prev = $(this).data('val');
    var current = $(this).val();
    console.log("Prev value " + prev);
    console.log("New value " + current);
});

Open in new window

Thanks

James Bilous

Why not just:

$("#my-form input").attr("data-new-value", $(this).val());

Open in new window

lenamtl

ASKER

No this cannot work like that, as I have several fields and each fields have their own value.

James Bilous

That code assigns each input's respective value to a data value within its input tag. Maybe I'm not understanding what you're trying to achieve?

lenamtl

ASKER

No your code is not working correctly, please test it before...
It's not assign each data attribute correctly... and it's overide all data values when updating one field.
it's not assigning a data attribute to checkbox and radio button.

Chris Stanyon

Your code does look odd. Basically, each time the document changes, you want to update the data-attribute for every input, select and textarea. That doesn't really make sense. I'm guessing you're wanting to update the data attribute of each field when that field changes

Also, regarding radio buttons - a single radio button only has one value and selecting it won't change that value - only the checked state will change.

Maybe clarify what you're trying to acheive and we can help you out.

lenamtl

ASKER

I want to update the data attribute of each field when that field changes.
For radio, checkbox and select the value change when it's checked
it's need to update their data attribute value when this change too.

ASKER CERTIFIED SOLUTION

zephyr_hex (Megan)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Chris Stanyon

OK. You need something like this:

$(document).on('change', 'input, select, textarea', function() {
	$(this).attr("data-new-value", $(this).val());
});

Open in new window

But my point still stands. When you click on a checkbox or radio, it's value doesn't change - only it's selected state does, so you'll need to re-think that bit through.

lenamtl

ASKER

@zephyr_hex
Thanks I will do some tests today.
What I like when using .attr() is that it stores the information directly on the element in attributes which are publicly visible upon inspection, and also which are available from the element's native API.

@Chris Stanyon
I know what you mean, I'm looking for a way to add the attribute to the checkbox / radio field, maybe using the field ID ?

zephyr_hex (Megan)

@lenamtl - .attr() should not be used unless you have a very specific reason for needing the attribute visible in the HTML. The .attr() method ONLY updates the DOM. It has no persistence in cache. Also, .data() allows for storing complex objects, while .attr() only allows for a string.

But really, the point is that you should only use .attr() approach if you have a specific reason for needing the attribute available in the HTML. If you're just passing values to server side for processing, then .data() is the standard approach.

Chris Stanyon

My point is that you're not particularly clear on what value you want to store. Take a look at this :

<input type="radio" name="colour" value="Red"> Red
<input type="radio" name="colour" value="Green"> Green
<input type="radio" name="colour" value="Blue"> Blue

It doesn't matter which element is selected - it's value will NEVER change. For example, if you select Green, the value of the Red radio will still be Red. As well as WHAT value you want to store, there's the question of WHERE you want to store it. If you intend to store it in data-new-value, then it starts making less sense.

Things get even more blurred when you consider CheckBoxes because you can obviously select more than one checkbox within a group, but as with Radios - the VALUE of individual checkboxes never changes.

if you can explain the reasoning behind what you're trying to do, there may be a more elegant solution.

lenamtl

ASKER

Thanks