javascript duplication ID conflict

Question

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 the same time. Every checkbox choice loads pre-defined values for RegEx completion. So, all the code below belongs to one form field.

<head>

<!-- CHECKBOXSES REGEX 1 -->

<script type="text/javascript">

function getVal(bu){

var el=document.getElementById('col12_filter_prospective');
var i=0, c;while(c=document.getElementById('chk'+(i++))) 
{el.value=(bu.checked)? bu.value : null;c!=bu? c.checked =false : null;
}
}
</script>

</head>

<body>

<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) words 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">

</body>

Wow, that code is a mess. From what I can decipher, this has nothing to do with regex. You're just copying the value of the selected checkbox to the textbox, right? — Brian Stephens, Dec 04 '14 at 19:48

score 0 · Answer 1 · answered Dec 04 '14 at 19:48

0

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

answered Dec 04 '14 at 19:48

FLCL

2,445
2
24
45

@PauloLopes, you may mark one of the answers as correct if problem solved – FLCL Dec 10 '14 at 08:45
hummm, sure, how do I do this? – Paulo Lopes Dec 10 '14 at 14:56
I guess I did a mistake formulating my question. The first part you worked on is gorgeous, the second part someone answered is 95% ok but I don't know how to make them to work together. Should I place another question? – Paulo Lopes Dec 10 '14 at 14:59
@PauloLopes, to choose correct answer just press *✓* near it(but do not do it until the problem solved). You may edit current question by appending it with UPDATE word, new code which works better and some words about what doesn't work yet(or create new question, but I think it better to solve given problem here cos it is a part of primary question). – FLCL Dec 11 '14 at 09:06

score 0 · Answer 2 · answered Dec 04 '14 at 19:49

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

  <script type="text/javascript">
    function getVal(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>

  <input type="checkbox" name="chk" value="[^***]" class="chk0"
    onclick="getVal(this, 'col12_filter_prospective')"
    title="[^***] Replace (***) with the word to excluded from search.">
  
  <input type="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.">
  
  <input type="checkbox" name="chk" value="/***/" class="chk0"
    onclick="getVal(this, 'col12_filter_prospective')"
    title="/***/ Replace *** for specific word to be found.">

  <br>
  <input type="text"
    class="column_filter_prospective"
    name="col12_filter_prospective"
    id="col12_filter_prospective">
</body>

You can add a new input as follows

<input type="checkbox" name="chk" value="[^***]" class="chk1"
  onclick="getVal(this, 'col13_filter_prospective')"
  title="[^***] Replace (***) with the word to excluded from search.">

<input type="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.">

<input type="checkbox" name="chk" value="/***/" class="chk1"
  onclick="getVal(this, 'col13_filter_prospective')"
  title="/***/ Replace *** for specific word to be found.">

<br>
<input type="text"
  class="column_filter_prospective"
  name="col13_filter_prospective"
  id="col13_filter_prospective">

Let me know if it works for you

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, Dec 06 '14 at 18:02
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, Dec 06 '14 at 18:06
Not too confusing. But it looks like your code above doesn't include the "smart search" checkbox, right? — Hoa, Dec 06 '14 at 18:08
Hi Hoa, thanks for the prompt reply. I am having trouble to insert the entire code, one moment. — Paulo Lopes, Dec 06 '14 at 18:11
Hi How, I am new to this website. How do I to insert another piece of code? It says I am going over the characters limit and I cannot send it. :0( — Paulo Lopes, Dec 06 '14 at 18:14
I cannot insert the code, this is an example that comes close. — Paulo Lopes, Dec 06 '14 at 18:20
Edit your question instead of posting the sample in the comment box. — Hoa, Dec 06 '14 at 18:21
@PauloLopes Okie, I can access your script. What do you want to do with the form? — Hoa, Dec 06 '14 at 18:31
In other words the idea is simple, I have 5 checkboxes the the #5 is checked by default. I want IF the one of the checkboxes #1,2 or 3 is checked this will uncheck #5 and check #4 and if #1,2 or 3 are unchecked this will bring to the original state where only the #5 is checked. Got it? — Paulo Lopes, Dec 06 '14 at 18:33
Edit your script on fiddle first. At the moment, there are not 5 checkboxes. And if the dropdown has nothing to do with your question, please remove it. — Hoa, Dec 06 '14 at 18:35

score 0 · Answer 3 · answered Dec 06 '14 at 18:29

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

<tr id="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

javascript duplication ID conflict

3 Answers3

Linked