CODEWITHSUNDEEP
javascriptjquery
0xburned
0xburned

Reputation: 2655

applying text input value to other empty text fields - jQuery

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);
}

Upvotes: 0

Views: 121

Answers (1)

Jai
Jai

Reputation: 74738

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.

Upvotes: 1

Related Questions