str.replace only for selected radio button text

Question

Right now str.replace is only working for 1st row , i want str.replace to work on selected radio button row.

<tr>
    <td><input onclick="myFunction()" type="radio" name="test" value="1"></td>
    <td id = "demo">System Architect1 #BLANK1# test #BLANK2#</td>
    <td>Edinburgh</td>
</tr>
<tr>
    <td><input onclick="myFunction()" type="radio" name="test" value="2"></td>
    <td id = "demo">System Architect2 #BLANK1# test #BLANK2#</td>
    <td>Edinburgh</td>
</tr>
<tr>
    <td><input onclick="myFunction()" type="radio" name="test" value="3"></td>
    <td id = "demo">System Architect3 #BLANK1# test #BLANK2#</td>
    <td>Edinburgh</td>
</tr>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML; 
var res = str.replace("#BLANK1#", "<input type='text' name='BLANK1' maxlength='50' />")
.replace("#BLANK2#", "<input type='text' name='BLANK2' maxlength='50' />")
.replace("#BLANK3#", "<input type='text' name='BLANK3' maxlength='50' />")
.replace("#BLANK4#", "<input type='text' name='BLANK4' maxlength='50' />");
 document.getElementById("demo").innerHTML = res;
 }
</script>

Does this answer your question? [In Javascript, how can i perform a global replace on string with a variable inside '/' and '/g'?](https://stackoverflow.com/questions/542232/in-javascript-how-can-i-perform-a-global-replace-on-string-with-a-variable-insi) - Check the most upvoted answer, not the accepted one. — M. Eriksson, Sep 26 '20 at 10:53
You can NOT have the same id multiple times in html. The `$('#demo')` will always return the first one. Try demo1, demo2, demo3, and `myFunction('demo1'), myFunction('demo2')` ... and `function myFunction(id)` and `getElementById(id)` — Sélim Achour, Sep 26 '20 at 11:06
@SélimAchour , Yes its working now, but only 1 issue - its keep on str replace for previously selected radio button. — Metu007, Sep 26 '20 at 17:35
@SélimAchour , yes i had already done that ,but no success, It keeps input box for previously selected radio buttons, I only want input box for currently selected radio button only. — Metu007, Sep 26 '20 at 19:08
@SélimAchour but my 90% work is done by your suggestion, Thank you for that — Metu007, Sep 26 '20 at 19:10
@Metu007 sorry I could not understand the last problem. You should create a codepen if possible — Sélim Achour, Sep 26 '20 at 19:21
@SélimAchour here is the link - https://jsfiddle.net/1u2kcgje/ when i change radio button its keep input box for previously selected radio button. — Metu007, Sep 26 '20 at 19:49
@SélimAchour I only want Input box for currently selected radio button , not for previously selected radio buttons — Metu007, Sep 26 '20 at 19:53

score 0 · Answer 1 · answered Sep 26 '20 at 11:39

You cannot actually use the same id for every similar element. This is the reason why it is always replacing the first row.

Further, to actually do this, you have to change the id's first and then do some like this :

<tr>
    <td><input onclick="myFunction(this)" type="radio" name="test" value="1"></td>
    <td id = "demo1">System Architect1 #BLANK1# test #BLANK2#</td>
    <td>Edinburgh</td>
</tr>
<tr>
    <td><input onclick="myFunction(this)" type="radio" name="test" value="1"></td>
    <td id = "demo2">System Architect2 #BLANK1# test #BLANK2#</td>
    <td>Edinburgh</td>
</tr>

Following is by using Jquery but you can do it by javascript also if you are not using any jquery

<script>
    function myFunction(element) {
  
  var str = $(element).parent().next().html();
    var res = str.replace("#BLANK1#", "<input type='text' name='BLANK1' maxlength='50' />")
    .replace("#BLANK2#", "<input type='text' name='BLANK2' maxlength='50' />")
    .replace("#BLANK3#", "<input type='text' name='BLANK3' maxlength='50' />")
    .replace("#BLANK4#", "<input type='text' name='BLANK4' maxlength='50' />");
   $(element).parent().next().html(res);  
   
}
    </script>

str.replace only for selected radio button text

1 Answers1