clearing input text area with dynamic input id's on button click - jQuery

Question

Although the question title gives an impression that I want to ask one question, but there are two problems I have facing at the moment.

I have gone through few similar questions on how to clear the input text area on button click, but most of them are for fixed input class or id's.

Problem 1: 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.

Problem 2: After entering individual values in the betslip input boxes and if I click "clear all" button. It should clear all the inputs entered earlier in the bet slip.

Here is the HTML structure

<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

function createSingleBetDiv(betInfo) {
    var id = betInfo.betType + '_' + betInfo.productId + '_' + betInfo.mpid,
        div = createDiv(id + '_div', 'singleBet', 'bet gray2'),
        a =  createA(null, null, null, 'right orange'),
        leftDiv = createDiv(null, null, 'left'),
        closeDiv = createDiv(null, null, 'icon_shut_bet'),
        singleBetNumber = ++document.getElementsByName('singleBet').length;

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

    // Closing btn
    (function(id) {
        a.onclick=function() {
            removeSingleBet(id + '_div');
        };
    })(id);
    $(a).append(closeDiv);

    // Creating input field - This is where I am creating the input fields
    $(leftDiv).append('<p class="supermid"><input id="' + id + '_input\" type="text" class="betInput"></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, 'mapForBet', betInfo);

    return div;
}

HTML for Apply to all and Clear all button

<a href="javascript: applyToAllBetInput()"class="button apply orange">APPLY TO ALL <input type="text"> </a>

<a href="javascript: clearAllBetInput()" class="button clearall gray">CLEAR ALL</a>

JS where I need to implement those 2 functions

function applyToAllBetInput() {
    $('.apply').change(function() {
        $(this).prevAll().find('input[type=text]').val($(this).val());
    });
}

function clearAllBetInput() {
    $('.clearall').click(function() {
        $('div.bet').find('input').val('');
    });
}

I think this is wrong var divId = $(this).attr('id').val(), inputId = divId.document.getElementById('input'); — Pavlo
– Pavlo, Commented Mar 7, 2014 at 15:52
Yes I am aware that is wrong. I can't select the input box with ID 'input' coz there isn't any!!! — 0xburned
– 0xburned, Commented Mar 7, 2014 at 15:55
Pseudo javascript protocols (javascript:) can cause errors in ie. Use <a href="#" onclick="applyToAllBetInput(); return false;">APPLY TO ALL</a> insted. — IceCode
– IceCode, Commented Mar 7, 2014 at 16:16
Have you tried: divId.document.getElementTagName('input'); insted of divId.document.getElementById('input'); ? — IceCode
– IceCode, Commented Mar 7, 2014 at 16:19

Reinstate Monica Cellio · Accepted Answer · 2014-03-07 16:26:03Z

2

The best thing to do is remove the inline event handlers from the links, like this...

<a href="#" class="button apply orange">APPLY TO ALL <input type="text"> </a>

<a href="#" class="button clearall gray">CLEAR ALL</a>

Then, assign the event handlers in your script...

$("a.button.apply").on("click", function(e) {
    e.preventDefault();
    applyToAllBetInput($(this).find("input").val());
});

$("a.button.clearall").on("click", function(e) {
    e.preventDefault();
    applyToAllBetInput("");
});

And this would apply the value to all inputs...

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

If you pass a parameter into applyToAllBetInput and then set the inputs with that then you only need the one function, as they both do the same thing, but with different values. Best to only have 1 bit of code if it's only doing 1 thing, then you only have to fix it once if things change in the future :)

edited Mar 7, 2014 at 16:26

answered Mar 7, 2014 at 16:20

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

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

4 Comments

0xburned Over a year ago

One more thing. How can I wrap the 2 event handlers into 2 different functions and inside those functions I would call applyToAllBetInput. I don't want to create inline script.

Reinstate Monica Cellio Over a year ago

Not sure I understand you. The code I supplied does call 2 different functions, which then in turn call applyToAllBetInput

0xburned Over a year ago

Hi again, Can you please help me out on this. I have restructured my code and I am using JS prototype feature. After changing my function Clear all button is working fine, but apply to all button doesn't work at all. I have updated my question with my latest HTML and JS code.

Reinstate Monica Cellio Over a year ago

I've rolled the question back to the previous version. Please don't change questions like that. If you need to ask something else then create a new question. This site is meant to be a catalogue of problems and fixes, and by changing the question like that you're basically deleting a problem that was fixed :)

JF it · Accepted Answer · 2014-03-07 15:56:36Z

0

Please replace the id's i've given with your actual button/textarea ids (give ID's to your elements).

$('#txtApplyToAll').change(function() {
    $(this).prevAll().find('input[type=text]').val($(this).val());
 });

 $('#btnClearAll').click(function() {
    $('#txtApplyToAll').prevAll().find('input[type=text].val('');
});

answered Mar 7, 2014 at 15:56

JF it

2,3833 gold badges23 silver badges30 bronze badges

Comments

isherwood · Accepted Answer · 2014-03-07 16:01:13Z

0

There are several general suggestions I'd make before even starting to write the code. First, Why are you using longhand JavaScript when you have jQuery available? For example:

inputId = divId.document.getElementById('input');

should be simply:

inputId = $(inputId).find('input');

(or something along those lines--I'm not sure what you're after with that.)

Next, you're using inline click handlers. Instead, use event listeners:

<a href="javascript: applyToAllBetInput()" ...

Should be

$('a#my-id').click(function() { ... }

Finally, you can target all your inputs for clearing with a selector like this:

$('div.bet').find('input').val('');

edited Mar 7, 2014 at 16:01

answered Mar 7, 2014 at 15:56

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Collectives™ on Stack Overflow

clearing input text area with dynamic input id's on button click - jQuery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related