CODEWITHSUNDEEP
javascriptphphtmlinput
fishmong3r
fishmong3r

Reputation: 1434

Apply JavaScript on inputs dynamically

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?

Upvotes: 1

Views: 94

Answers (5)

Asons
Asons

Reputation: 87201

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>

Upvotes: 2

Mgasmi
Mgasmi

Reputation: 417

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

Upvotes: 1

Tamiros
Tamiros

Reputation: 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.

Upvotes: -1

Mithu CN
Mithu CN

Reputation: 595

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

});

Upvotes: 0

Babis.amas
Babis.amas

Reputation: 471

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

 });

Upvotes: 0

Related Questions