Apply JavaScript on inputs dynamically

Question

I have a form:

<form name="test">
<input type="radio" required="required" name="a" value="1">1
<input type="radio" required="required" name="a" value="X">X
<input type="radio" required="required" name="a" value="2">2
<br />
<input type="radio" required="required" name="b" value="1">1
<input type="radio" required="required" name="b" value="2">2
</form>

This is my goal:

If a=1 then b=1
If a=X then unset b
If a=2 then b=2

This is how I achieve it atm:

$('input[name="a"]').on('change', function() {
  var selected = $('input[name="a"]:checked').val();
  if (selected == "X") {
    $('input[name="b"]:checked').prop("checked", false);
    return false;
  }
  $('input[name="b"][value="' + selected + '"]').prop("checked", true);

});

The question is: what if there are multiple input "pairs" in my form and the name is dynamically set like this:

<form name="test">
<?php
  foreach($arr as $item) {
  $input = '
    <input type="radio" required="required" name="'$item['id'].'a" value="1">1
    <input type="radio" required="required" name="'$item['id'].'a" value="X">X
    <input type="radio" required="required" name="'$item['id'].'a" value="2">2
    <br />
    <input type="radio" required="required" name="'$item['id'].'b" value="1">1
    <input type="radio" required="required" name="'$item['id'].'b" value="2">2
  ';
  echo($input);
}
?>
</form>

How can I apply the same javascript to handle all of them?

If you want to implement it in a simpler method use classes. inputs with value 'a' will all have the same class and inputs with value 'b' will all have the same class. It'll be easy to differentiate. — Kishen Nagaraju
– Kishen Nagaraju, Commented May 30, 2018 at 8:40

Asons · Accepted Answer · 2018-05-30 11:25:13Z

2

You can use the attribute selector's ending with $.

With that it won't matter what $item['id'] will be, you'll still find them with their ending a or b and so on.

$('input[name$="a"]').on('change', function() {...});

Then, by simply grab the id number part using slice(), it gets as simple as below sample

Stack snippet

$('input[name$="a"]').on('change', function() {
  var selected = $(this),
      val = selected.val(),
      id = selected.attr('name').slice(0,-1);
  if (val == "X") {
    $('input[name="'+id+'b"]:checked').prop("checked", false);
    return false;
  }
  $('input[name="'+id+'b"][value="' + val + '"]').prop("checked", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="test">
<input type="radio" required="required" name="1a" value="1">1
<input type="radio" required="required" name="1a" value="X">X
<input type="radio" required="required" name="1a" value="2">2
<br />
<input type="radio" required="required" name="1b" value="1">1
<input type="radio" required="required" name="1b" value="2">2
<br /><br />
<input type="radio" required="required" name="2a" value="1">1
<input type="radio" required="required" name="2a" value="X">X
<input type="radio" required="required" name="2a" value="2">2
<br />
<input type="radio" required="required" name="2b" value="1">1
<input type="radio" required="required" name="2b" value="2">2
</form>

edited May 30, 2018 at 11:25

answered May 30, 2018 at 8:47

Asons

87.7k12 gold badges119 silver badges175 bronze badges

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

3 Comments

fishmong3r Over a year ago

If I click on my first input 1a then this sets all the other b inputs, 1b, 2b, 3b etc. to be 1. While if I set 1a I only want to set 1b.

Asons Over a year ago

@fishmong3r Then simply slice() the id out. Will update in a sec.

Asons Over a year ago

@fishmong3r I updated the answer with a new, simplified version of your fiddle, that keeps the CSS selector but grab the number part from the id using slice()

Hiren Vaghasiya · Accepted Answer · 2018-05-30 09:11:39Z

This should work, https://jsfiddle.net/o2gxgz9r/47544/

I change ID 144a / 144b for this example.

HTML:

<form name="test">
<input type="radio" required="required" name="144a" value="1">1
<input type="radio" required="required" name="144a" value="X">X
<input type="radio" required="required" name="144a" value="2">2
<br />
<input type="radio" required="required" name="144b" value="1">1
<input type="radio" required="required" name="144b" value="2">2
</form>

js :

$('input').on('change', function(event) {
 if(event.target.name.slice(-1) == 'a'){
 var nameA = event.target.name;
 var nameB = event.target.name.slice(0, -1) + 'b';
  var selected = $('input[name='+nameA+']:checked').val();
  if (selected == "X") {
    $('input[name='+nameB+']:checked').prop("checked", false);
    return false;
  }
  $('input[name='+nameB+'][value="' + selected + '"]').prop("checked", true);
}
});

Babis.amas · Accepted Answer · 2018-05-30 08:39:34Z

0

Give an id to your form, and a class to all of your inputs so that you can then set an event to all of them like this:

 $("#formID").on('change', '.input-class-a', function()
 {
        //stuff to do

 });

answered May 30, 2018 at 8:39

Babis.amas

4713 silver badges16 bronze badges

Comments

Mithu CN · Accepted Answer · 2018-05-30 08:50:47Z

You can assign a common class for all checkbox and also can use itemId to unique identity radio box group.

<form name="test">
<?php
foreach($arr as $item) {
 $input = '
<input type="radio" class="radioBox" required="required" 
name="'$item['id'].'_a" value="1">1
<input type="radio" class="radioBox" required="required" name="'$item['id'].'_a" value="X">X
<input type="radio" class="radioBox" required="required" 
name="'$item['id'].'_a" value="2">2
<br />
<input type="radio" class="radioBox" required="required" 
 name="'$item['id'].'_b" value="1">1
<input type="radio" class="radioBox" required="required" 
name="'$item['id'].'_b" value="2">2
';
echo($input);
}
?>
</form>

$('form').on('change','.radioBox', function() {
  var selected = $(this).val();
  var ItemId=$(this).attr('name').split("_")[0];//get item id
  if (selected == "X") {
    $('input[name="'+ItemId+'_b"]:checked').prop("checked", false);//use item id for b
    return false;
  }
  $('input[name="'+ItemId+'_b"][value="' + selected + '"]').prop("checked", true);

});

Tamiros · Accepted Answer · 2018-05-30 08:55:30Z

-1

If I understand correctly, you will always have ".a" or ".b" at the end of the name, so you can use the ends with selector:

$('input[name=$".a"]').on('change', function() {
var selected = $('input[name=$".a"]:checked').val();
if (selected == "X") {
$('input[name=$".b"]:checked').prop("checked", false);
return false;
}
$('input[name=$".b"][value="' + selected + '"]').prop("checked", true);
});

you are now searching only the postfix of the name.

answered May 30, 2018 at 8:55

Tamiros

12 bronze badges

1 Comment

Tamiros Over a year ago

sorry, i didn't copy, just answered at the same time

Collectives™ on Stack Overflow

Apply JavaScript on inputs dynamically

5 Answers 5

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related