CODEWITHSUNDEEP
javascriptjqueryhtml
Michael Falciglia
Michael Falciglia

Reputation: 1046

Keyup function into form element

I have a script I am using to copy a field into another input field using keyup blur paste. This script works, however I need to modify it to also go into two different form elements which are named data-cost="" and debt="", instead of the <div id="viewer">

This is the script as I have it now :

$(function () {
    $('#account_balance1').on('keyup blur paste', function() {
        var self = this;
        setTimeout(function() {
            var str = $(self).val();
            $("#viewer").text(str.replace(/^\$/, ''));
        }, 0);
    });

    $("#viewer").text($('#Website').val().replace(/^\$/, ''));
});

This is the html :

<!--This where I get the value from -->
<input type="text" class="balance" id="account_balance1" name="cardb" value=""/>

<!--the first 2 elements are where I need the values to go -->
<input data-cost="" debt="" value="" type="checkbox" name="f_2[]"/>

Upvotes: 2

Views: 111

Answers (4)

erikrunia
erikrunia

Reputation: 2383

if you need the two attributes (data-cost and debt) to be each set to your value you need:

$("input[data-cost][debt]").attr('data-cost',str.replace(/^\$/, ''));
$("input[data-cost][debt]").attr('debt',str.replace(/^\$/, ''));

Upvotes: 3

Akaryatrh
Akaryatrh

Reputation: 531

I'd do it this way (setTimeout was useless) :

$(function () {
    $('#account_balance1').on('keyup blur paste', function () {
        var self = this;
        var nextCheckbox = $(self).next("input[type='checkbox']");
        var str = $(self).val();
        $("#viewer").text(str.replace(/^\$/, ''));
        nextCheckbox.data({
            cost: str,
            debt: str
        });
        /*
        You won't be able to see changes if you inspect element,
        so just check in console
        */
        console.log(nextCheckbox.data());

});

});

And your html markup must be slightly modified :

<!--This where I get the value from -->
<input type="text" class="balance" id="account_balance1" name="cardb" value="" />

<!--the first 2 elements are where I need the values to go -->
<input data-cost="" data-debt="" value="" type="checkbox" name="f_2[]" />

<!--I added the viewer to check if everything works properly -->
<div id="viewer"></div>

Upvotes: 0

Jesse Ivy
Jesse Ivy

Reputation: 335

I think you're maybe having a fundamental misunderstanding of what the data attributes are for? You're aware that they will not be posted with the form? I think what you're looking for is the data function which will allow you to set the data attributes http://api.jquery.com/data/.

Perhaps you want data-cost and data-debt?

So if your input looks like this:

<input data-cost="" data-debt="" value="" type="checkbox" name="f_2[]" id="checkboxId" />

Then you can set the values in your javascript like this:

var value1="some value";
var value2="another value";
$('#checkboxId').data('cost', value1);
$('#checkboxId').data('debt', value2);

I don't believe having an attribute named simply "debt" as you have it above is valid.

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

Just use that selector then

$("input[data-cost][data-debt]")

Upvotes: 0

Related Questions