applying text input value to other empty text fields - jQuery

Question

This question is in the continuation of another question I have asked earlier URL

I am generating rows dynamically and and all the fields are being populated using JS thus the input ID's for all text boxes are different. Now if a user enter some number on "Apply to all" input field and click the button the same number should be set to all the rows which are added in the betslip.

HTML structure where I am adding rows dynamically

<div id="bets">
  <div id="idNo1" class="bet gray2" name="singleBet">
    <div class="left">
      <p class="title">
        <p class="supermid">
          <input id="input_1" type="text">
    </div>
  </div>
  <div id="idNo2" class="bet gray2" name="singleBet">
    <div class="left">
      <p class="title">
        <p class="supermid">
          <input id="input_2" type="text">
    </div>
  </div>
  <div id="idNo3" class="bet gray2" name="singleBet">
    <div class="left">
      <p class="title">
        <p class="supermid">
          <input id="input_3" type="text">
    </div>
  </div>
</div>

JS for adding element in the individual bets

BetSlip.prototype.createSingleBetDiv = function(Bet) {

    var id = Bet.betType + '_' + Bet.productId + '_' + Bet.mpid,
        divId = id + '_div';

    // If such bet already exists
    if (typeof document.betSlip.singleDivs[divId] == "undefined") {
        var div = element.create('div'),
            a = element.create('a'),
            leftDiv = element.create('div'),
            closeDiv = element.create('div'),
            singleBetNumber = ++document.getElementsByName('singleBet').length;

        element.setId(div, divId);
        element.setName(div, 'singleBet');
        element.setClassName(div, 'bet gray2');
        element.setClassName(a, 'right orange');
        element.setClassName(leftDiv, 'left');
        element.setClassName(closeDiv, 'icon_shut_bet');

        // Info abt the bet
        $(leftDiv).append('<p class="title"><b><span class="bet_no">' + singleBetNumber + '</span>.&nbsp;' + Bet['horseName'] + '</b></p>');
        var raceInfo = "";
        $("#raceInfo").contents().filter(function () {
            if (this.nodeType === 3) raceInfo = $(this).text() + ',&nbsp;' + Bet['betTypeName'] + ' (' + Bet['value'].toFixed(2) + ')';
        });
        $(leftDiv).append('<p class="title">' + raceInfo + '</p>');

        // Closing btn
        (function(id) {
            a.onclick=function() {document.betSlip.removeSingleBet(divId);};
        })(id);
        $(a).append(closeDiv);

        // Creating input field
        $(leftDiv).append('<p class="supermid"><input id="' + id + '_input\" type="text"></p>');

        // Creating WIN / PLACE checkbox selection
        $(leftDiv).append('<p><input id="' + id + '_checkbox\" type="checkbox"><b>' + winPlace + '</b></p>');

        // Append left part
        $(div).append(leftDiv);
        // Append right part
        $(div).append(a);
        // Appending div with data
        $.data(div, 'Bet', Bet);

        // Add div to the bet slip map
        document.betSlip.singleDivs[divId] = div;

        return div;
    }
    else {
        $("#betSlipError").show();
        $("#betSlipError").html(sameBet);
        return null;
    }
}

HTML for applyTOall button

<a onclick="document.betSlip.applyToAll(event)" class="button apply orange">APPLY TO ALL <input type="text"> </a>

JS for applyToall function

BetSlip.prototype.applyToAll = function(e) {
    e.preventDefault();
    document.betSlip.applyToAllBetInput($(this).find("input").val());
}

BetSlip.prototype.applyToAllBetInput = function(value) {
    $("#bets div[name=singleBet] .supermid input:text").val(value);
}

@Archer here is the new question I have created in lieu with my previous question asked. — 0xburned
– 0xburned, Commented Mar 12, 2014 at 10:26
your HTML is missing alot of closing tags, could be giving unexpected behaviour.. — JF it
– JF it, Commented Mar 12, 2014 at 10:36
@JF The first HTML block in my code is generated dynamically with proper closing tag. I just put the skeleton to give a general overview. Sorry if I missed closing the paragraph tags :-) — 0xburned
– 0xburned, Commented Mar 12, 2014 at 12:11

Jai · Accepted Answer · 2014-03-12 10:37:51Z

1

Try doing this way:

$('yourbutton').on('click', function(){
   var applyVal = $('applyvalinput').val();
   $('#bets').find('[id^="input"][type="text"]').val(applyVal);
});//^------finds the inputs in this specific div.

Click your button and cache the value of your apply to all input val and check for the inputs which has the ids started [id^="input"] by the term input and it applies the value to each text input.

edited Mar 12, 2014 at 10:37

answered Mar 12, 2014 at 10:32

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

Collectives™ on Stack Overflow

applying text input value to other empty text fields - jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related