CODEWITHSUNDEEP
javascriptjqueryformsreplace
Courtney Stephenson
Courtney Stephenson

Reputation: 930

Change radio button list into label

I have built a form that allows the users to edit their previously entered information once they click on a button.

In this scenario, the user will click the edit button next to a gender label and be presented with a radio button that will allow them to select male or female.

I need help figuring out a way to have the radio button list change back to a label on click.

Here's what I have so far:

HTML

<div class="gear">
  <label>Gender:</label><br />
  <span id="gender" class="datainfoGender">Male</span>
   <a href="#" class="editlinkGender">Edit Info</a>
   <a class="savebtnGender">Save</a>
</div>

Javascript

$(".editlinkGender").on("click", function (e) {
    e.preventDefault();
    var datasets = $(this).prevAll(".datainfoGender");
    var savebtn = $(this).next(".savebtnGender");
    datasets.each(function () {
        var theid = $(this).attr("id");
        var newid = theid + "-form";
        var currval = $(this).text();
        $(this).html('<input type="radio" name="gender" value="male">Male<br><input type="radio" name="gender" value="female">Female');
    });

    $(this).css("display", "none");
    savebtn.css("display", "block");
});

$(".savebtnGender").on("click", function (e) {
    e.preventDefault();
    var elink = $(this).prev(".editlinkGender");
    var datasets = $(this).prevAll(".datainfoGender");
    datasets.each(function () {
        var newid = $(this).attr("id");
        var einput = $("#" + newid + "-form");
        var newval = einput.val();
        einput.remove();
        $(this).html(newval);
    });

    $(this).css("display", "none");
    elink.css("display", "block");
});

How would I grab the value from the radio button list and make it into a label?

Upvotes: 0

Views: 177

Answers (1)

sdespont
sdespont

Reputation: 14025

Retrieve the value like this :

var newGender = $('[name="gender"]').val();

And change it into label like that : 

$('[name="gender"]').html('your choice : ' + newGender);

Upvotes: 1

Related Questions