CODEWITHSUNDEEP
jqueryhtml
smurfAccount
smurfAccount

Reputation: 33

Dynamically change radio buttons to textboxes

So I'm looking to change the html on my page dynamically but I seem to be getting stuck somewhere. I want to make it so when a user clicks a radio button the jquery holds the values and then changes the radio button to a textbox with the values from the radio button

This is where the radio button is created

<?php
   while ($row_tag = $allSkillTags->fetch()) {
        $i++;

    ?>
    <input class="sk" type="radio" name="oids[]" value="<?=$row_tag['skilltagid'];?>" /><label><?=$row_tag['skilltagname'];?></label><br />
    <?php
        if($i == $startSecondColumn) {
        ?>

my Jquery:

$("input[type='radio']").change(function(){
        var id = $(this).val();
        var name = $(this).next('label').text();
        $(this).html('<input type="hidden" type="text" value=' + id +' /><input class="sk" type="text" name="selectedTag" value=' + name +'/>)';
    });

Upvotes: 0

Views: 865

Answers (4)

Sandcar
Sandcar

Reputation: 892

Please try something like sample below. this should work . ( you have to change it a bit to fit your code ) you get the idea. You need to remove the insert the new text input and remove the original 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

$(function(){


$("input[type='radio']").change(function(){
    
       $("<input />").attr({ name: this.name, value: this.value, type:"text" }).insertBefore(this);
       alert($(this).next('label').text())
      $(this).remove();
       
    })


})  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <input type="radio" value="2" id="test" name="test" />
  <label>Radio text</label>
 </body>

Upvotes: 1

smurfAccount
smurfAccount

Reputation: 33

Thank you all for your reponses, I took some of the code but had to edit it to work with my page. Here's the code:

$("input[type='radio']").change(function(){
        var id = $(this).val()
            var name = $(this).next().text();

            $("<input />").attr({ name: this.name, value: name, type:"text" }).insertBefore(this);
            $("<input hidden />").attr({ value: id, type:"text" }).insertBefore(this);

            $(this).next().remove();
            $(this).remove();


        });

Upvotes: 0

Jobelle
Jobelle

Reputation: 2834

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            $('#test').change(function () {
                var id = $(this).val();
                var name = $('label[for="'+$(this).attr('id')+'"]').text();
                $(this).attr('type', 'text');
                $(this).attr('id', id);
                $(this).attr('name', name);
            });
        });
    </script>
    </head>

    <body>
      <input type="radio" value="2" id="test" name="test" /><label for="test">My Label</label>
    </body>

    </html>

Upvotes: 0

pablito.aven
pablito.aven

Reputation: 1165

What first comes to mind is hide the radiobutton so that it's value persists for form submission, and replace that label with an input type text

So, this 

<input class="sk" type="radio" name="oids[]" value="<?=$row_tag['skilltagid'];?>" /><label><?=$row_tag['skilltagname'];?></label><br />

becomes this:

<input class="sk" type="radio" name="oids[]" value="<?=$row_tag['skilltagid'];?>" /><input type="text" disabled value="<?=$row_tag['skilltagname'];?>" /><br />

Notice you will have to CSS style this input to make it look like a label, or whatever you want it to look like.

And then, the javascript to hide radiobutton and enable textbox.

$(document).ready(function(){
    $('input[type="radiobutton"]').on('click', function(){
        if ($(this).prop('checked')){
            $(this).css('display', 'none');
            $(this).next('input[type="text"]').prop('disabled', false);
        }
    });
});

Upvotes: 0

Related Questions