once selected hide Radio buttons and display selected value in new div

Related searches

enter image description hereonce user clicks on a particular radio button in a list,then the entire radio buttons list must hide and the selected radio button value must be displayed in a new div, something like shown in "try demo" button in right bottom page of " https://collect.chat/ " website

<p class="chat-message">Which course you want to choose?
<label class="container">Course 1
<input type="radio" name="co1"value="course 1">
<span class="checkmark"></span></label>

<label class="container">Course 2
<input type="radio"  name="co2"value="course 2">
<span class="checkmark"></span></label>

<label class="container">Course 3
<input type="radio"  name="co3"value="course 3">
<span class="checkmark"></span></label>

<label class="container">Course 4
<input type="radio"  name="co4"value="course 4">
<span class="checkmark"></span></label> 

</p>

<div class="chat self">
<p class="chat-message"><span id="result"></span></p>
</div>

<script>
  document.mainForm.onclick = function()
  {
  var radVal = document.mainForm.rads.value;
  result.innerHTML = 'The course i want is'+radVal;
  }
 </script>

I expect the radio buttons must hide once selected and selected value must display in a separate div

As show in the image the radio buttons disappear once they are selected

Here is a clean jQuery solution. You have to give the radio buttons a unique Id in order to hide it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="chat-message" id="course-picker">Which course you want to choose?
<label class="container">Course 1
<input type="radio" name="co1"value="course 1">
<span class="checkmark"></span></label>

<label class="container">Course 2
<input type="radio"  name="co2"value="course 2">
<span class="checkmark"></span></label>

<label class="container">Course 3
<input type="radio"  name="co3"value="course 3">
<span class="checkmark"></span></label>

<label class="container">Course 4
<input type="radio"  name="co4"value="course 4">
<span class="checkmark"></span></label> 

</p>

<div class="chat self">
<p class="chat-message"><span id="result"></span></p>
</div>

<script>
jQuery(':radio').click(function () {
    $("#result").text(this.value);
    $("#course-picker").hide();
});
</script>

show and hide divs based on radio button click, GBlog � Puzzles � What's New ? △ In order to display data/content of a specific element by selecting the Show and Hide div elements using radio buttons value = "Cplus" > C++</ label > After selecting the radio button:. Use jQuery show () and hide () to Show/Hide div on radio button selected. To do this, you need to add some style, script, and few HTML. Hide each div’s which you want to display on select of the radio buttons. The dynamic changes happen based on the click of the selected radio button selection. A hidden div displays and the display:block property added to the displayed div element.

Try like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <script type="text/javascript">
            function show(str){
                document.getElementById('sh2').style.display = 'none';
                document.getElementById('sh1').style.display = 'block';
            }
            function show2(sign){
                document.getElementById('sh2').style.display = 'block';
                document.getElementById('sh1').style.display = 'none';
            }
        </script>
    </head>

    <body>
        <p>
            <input type="radio" name="r1" id="e1" onchange="show2()"/>&nbsp;I Am New User&nbsp;&nbsp;&nbsp;
            <input type="radio" checked="checked" name="r1" onchange="show(this.value)"/>&nbsp;Existing Member
        </p>
        <div id="sh1">Hello There !!</div>
        <p>&nbsp;</p>
        <div id="sh2" style="display:none;">Hey Watz up !!</div>
    </body>
</html>

How to Show and Hide div elements using radio buttons , None of my ID selector are working apart from the div section I want to hide. But the radio button that needs to be selected to show the hidden div isn't showing� In order to display data/content of a specific element by selecting the particular radio button in jQuery we can use the following two methods: hide() methods: This method is used to hiding the syntax or the element of html that you want to hide. Syntax: $(selector).hide(speed, callback);

Maybe you can try like this.

<p class="chat-message">Which course you want to choose?
<label class="container">Course 1
<input type="radio" name="co1"value="course 1">
<span class="checkmark"></span></label>

<label class="container">Course 2
<input type="radio"  name="co2"value="course 2">
<span class="checkmark"></span></label>

<label class="container">Course 3
<input type="radio"  name="co3"value="course 3">
<span class="checkmark"></span></label>

<label class="container">Course 4
<input type="radio"  name="co4"value="course 4">
<span class="checkmark"></span></label> 

</p>

<div class="chat self" style="display: none;"->
<p class="chat-message"><span id="result"></span></p>
</div>

<script>
  document.mainForm.onclick = function()
  {
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'The course i want is'+radVal;
    $(".chat-message").hide();
    $(".chat.self").show();
  }
</script>

How to Hide Form Fields Based Upon User Selection, <input type="radio" id="showform" value="yes" name="showform" <div id="div2 " style="display:none"> You are not qualified to see this form. </div> This example will hide the submit button until "Yes" is selected in a checkbox field. The following jQuery snippet can go in the 'After fields' box at the� Answer: Use the jQuery show() and hide() methods. You can simply use the jQuery show() and hide() methods to show and hide the div elements based on the selection of radio buttons. The div boxes in the following example are hidden by default using the CSS display property which value is set to none.

If you need to try this with vanilla JS , on click of the radio options value of the label should be appended to results div and the question div should be hidden.

please check the below code snippet, hope it helps.

var course_radio = document.querySelectorAll("[type='radio']")

function handleSelection() {
    var question_text = this.closest(".chat-message").children[0].innerHTML;

    this.closest('.chat-message').style.display = "none"
    var question = document.createElement("p");
    var node = document.createTextNode(question_text);
    question.appendChild(node);

    var answer = document.createElement("p");
    var ans_node = document.createTextNode(this.value);
    answer.appendChild(ans_node);


    document.getElementById("result").appendChild(question);
    document.getElementById("result").appendChild(answer);
}

for (var i = 0; i < course_radio.length; i++) {
    course_radio[i].addEventListener('click', handleSelection);
}
<div class="chat-message">
    <p class="chat-question">Which course you want to choose?</p>
    <label class="container">Course 1
        <input type="radio" name="co1" value="course 1" class="course-checkbox">
        <span class="checkmark"></span></label>

    <label class="container">Course 2
        <input type="radio" name="co2" value="course 2" class="course-checkbox">
        <span class="checkmark"></span></label>

    <label class="container">Course 3
        <input type="radio" name="co3" value="course 3" class="course-checkbox">
        <span class="checkmark"></span></label>

    <label class="container">Course 4
        <input type="radio" name="co4" value="course 4" class="course-checkbox">
        <span class="checkmark"></span></label>

</div>

<div class="chat self">
    <p class="chat-message"><span id="result"></span></p>
</div>

JavaScript Examples, Radio Buttons fields will allow only one option to be selected. Click this button to add a new option to your field. If you would like to hide your Checkbox or Radio Button option labels, see the hide Display the value submitted in a Checkbox or Radio Button field in a form's -[x sep="</div><div> ☑� Here Mudassar Ahmed Khan has explained how to show and hide HTML DIV with TextBox based RadioButton selection or click i.e. when RadioButtons are checked (selected) and unchecked (unselected) using JavaScript and jQuery. When the RadioButton is clicked based on whether it is checked (selected) or unchecked (unselected), the HTML DIV with TextBox will be shown or hidden. TAGs: JavaScript

Checkboxes and Radio Buttons, PHP script for RADIO BUTTON FIELD: HTML <input type=”radio”> allows user to choose one option from the given choices. Below codes contains PHP script to get a selected value from given HTML <input type=”radio”>. To get selected value of a radio button:

hi friend iam having 3 drop downs in my movie div and 3 other drop downs in my theatre div when i select theatre button it is displaying theatre div but when i select a value from first drop down list it automatically changing to movie divhow to resolve it.

To get the value of selected radio button, a user-defined function can be created that gets all the radio buttons with the name attribute and finds the radio button selected using the checked property. The checked property returns True if the radio button is selected and False otherwise.

Comments
  • Thank you for answering, but i want the radio buttons to disappear once selected
  • Thank you, the radio buttons are disappearing.But i want the question be there "Which course you want to choose" and only radio buttons must be hidden. and how can i open new div (chat self) in which the selected radio button can be shown
  • @HasheemIshaq have edited my answer to populate the question and its selected answer in the results div. Have tried to keep the code verbose , please go though and i am sure you will be able to make further changes to complete the project. All the best