Skip to content Skip to sidebar Skip to footer

Javascript Duplication Id Conflict

I need to use this js script several times, in several form fields. It is working wonderfully for one field but I don't know how to duplicate this script to use in other fields at

Solution 1:

Place form elements in a one container with some class attrbiute value, insert multiple containers into the html, find all containers with class name given, use querySelector to find child elements by theirs name or class attr(NOT id).

Solution 2:

First, I format your code a bit to make it more readable. The changes you will make is as follows

  • getVal() method now receives 2 parameters. The 2nd parameter is the id of the related text input field.
  • Remove all checkbox IDs, add a class to all checkboxes (I add a class named "chk0" to all checkboxes).
  • Modify getVal() method as follows

<head><!-- CHECKBOXSES REGEX 1 --><scripttype="text/javascript">functiongetVal(bu, id){
      var el = document.getElementById(id);
      
      var checkboxes = document.getElementsByClassName(bu.className);
      for (i = 0; i < checkboxes.length; i++) {
        el.value = (bu.checked)? bu.value : null;
        checkboxes[i] != bu ? checkboxes[i].checked = false : null;
      }
    }
  </script></head><body><inputtype="checkbox"name="chk"value="[^***]"class="chk0"onclick="getVal(this, 'col12_filter_prospective')"title="[^***] Replace (***) with the word to excluded from search."><inputtype="checkbox"name="chk"value="/whatever[^s]*./"class="chk0"onclick="getVal(this, 'col12_filter_prospective')"title="/whatever[^s]*./ Find (whatever) words that ends with (s) or any other combination."><inputtype="checkbox"name="chk"value="/***/"class="chk0"onclick="getVal(this, 'col12_filter_prospective')"title="/***/ Replace *** for specific word to be found."><br><inputtype="text"class="column_filter_prospective"name="col12_filter_prospective"id="col12_filter_prospective"></body>

You can add a new input as follows

<inputtype="checkbox"name="chk"value="[^***]"class="chk1"onclick="getVal(this, 'col13_filter_prospective')"title="[^***] Replace (***) with the word to excluded from search."><inputtype="checkbox"name="chk"value="/whatever[^s]*./"class="chk1"onclick="getVal(this, 'col13_filter_prospective')"title="/whatever[^s]*./ Find (whatever) words that ends with (s) or any other combination."><inputtype="checkbox"name="chk"value="/***/"class="chk1"onclick="getVal(this, 'col13_filter_prospective')"title="/***/ Replace *** for specific word to be found."><br><inputtype="text"class="column_filter_prospective"name="col13_filter_prospective"id="col13_filter_prospective">

Let me know if it works for you

Solution 3:

There is another issue I would like to resolve. I put the internet up side down and couldn't find a reasonable script to perform this tas although it is a simple routine. – Paulo Lopes 26 mins ago

As you see the code bellow after the implementation of the ID issue I would like to automatically uncheck the "smart search" checkbox and check the RegEx checkbox when one of the three RegEx checkboxes is clicked AND when one of the three checkboxes is unchecked to turn everything to the original state where the "smart search" checkbox is the only one selected again. Too confusing? – Paulo Lopes 22 mins ago

<trid="filter_col12_prospective" data-column="12">         
<td colspan="4"><hr width="100%"  size"0.5px"> 
</td>           
<tr>
<tr>
<td>City</td>
<td align="center">             
<input type="checkbox" name="chk" value="[^***]"id="chk0" onclick="getVal(this)" title="[^***] Replace (***) with the word to excluded from search.">  
<input type="checkbox" name="chk" value="/whatever[^s]*./"id="chk1" onclick="getVal(this)" title="/whatever[^s]*./ Find (whatever) word that ends with (s) or any other combination.">
<input type="checkbox" name="chk" value="/***/"id="chk2" onclick="getVal(this)" title="/***/ Replace *** for specific word to be found.">
<br>
<input type="text" class="column_filter_prospective" name="col12_filter_prospective"id="col12_filter_prospective">
</td>               
<td align="center" valign="top"><input type="checkbox" class="column_filter_prospective"id="col12_regex_prospective">
</td>
<td align="center" valign="top"><input type="checkbox" class="column_filter_prospective"id="col12_smart_prospective" checked="checked">
<br>
</td>
</tr>

=========================== example, check advanced search [link]http://goutam.webigniter.ca/datatable.html

Post a Comment for "Javascript Duplication Id Conflict"