如何使用JavaScript在不同的文本字段中显示多个输入值

Question

I have multiple input fields as radio buttons where the user can select a button and then the radio buttons disappear and the selected value will be shown in a new div

I am successfully getting single value if selected and able to show,But how to get input from multiple forms and show it individually in separate div

<div class="chat machine">
    <p class="chat-message" id="course-picker">
        Which course do you want to choose?
        <form method="post">
            <!--Radio Buttons for getting course input -->
            <label class="container">
                <input type="radio" name="co1"value="course 1">
                <span class="checkmark">Course 1</span>
            </label>
            <label class="container">
                <input type="radio"  name="co2"value="course 2">
                <span class="checkmark">Course 2</span>
            </label>
            <label class="container">
                <input type="radio"  name="co3"value="course 3">
                <span class="checkmark">Course 3</span>
            </label>
            <label class="container">
                <input type="radio"  name="co4"value="course 4">
                <span class="checkmark">Course 4</span>
            </label>
        </form> 
    </p>
</div>
<div class="chat self" id="self-chat">
    <p class="chat-message"><span id="result"></span></p>
</div>

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

<div class="chat machine">
    <p class="chat-message" id="preference">
        Which course do you want to choose?
        <form method="post">
            <!--Radio Buttons for getting course input -->
            <label class="container">
                <input type="radio" name="p1"value="prefer 1">
                <span class="checkmark">prefer 1</span>
            </label>
            <label class="container">
                <input type="radio"  name="p2"value="prefer 2">
                <span class="checkmark">prefer 2</span>
            </label>
        </form>
    </p>
</div>

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

<script>
    jQuery(':radio').click(function () {
        $("#result1").text(this.value);
        $("#preference").hide();
    });
</script>

Answer 1

I thought about why we need multiple forms. https://codepen.io/kaslab/pen/vwGZWm

I have added multiple P tags with class, question add radio naming

HTML :

<div class="chat machine">
    <div class="user-photo">
        <img src="img/user.png" />
    </div>
    <form method="post" id="course-picker">
        <p class="chat-message questionControl">Which course do you want to choose?
            <!--Radio Buttons for getting course input --><br />
            <label class="container">
                <input type="radio" name="course1" value="course 1" />
                <span class="checkmark">Course 1</span>
            </label>
            <label class="container">
                <input type="radio" name="course1" value="course 2" />
                <span class="checkmark">Course 2</span>
            </label>
            <label class="container">
                <input type="radio" name="course1" value="course 3" />
                <span class="checkmark">Course 3</span>
            </label>
            <label class="container">
                <input type="radio" name="course1" value="course 4" />
                <span class="checkmark">Course 4</span>
            </label>
        </p>
        <p class="chat-message questionControl">Which subject do you want to choose?
            <!--Radio Buttons for getting subject input --><br />
            <label class="container">
                <input type="radio" name="subject1" value="subject 1" />
                <span class="checkmark">Subject 1</span>
            </label>
            <label class="container">
                <input type="radio" name="subject1" value="subject 2" />
                <span class="checkmark">Subject 2</span>
            </label>
            <label class="container">
                <input type="radio" name="subject1" value="subject 3" />
                <span class="checkmark">Subject 3</span>
            </label>
            <label class="container">
                <input type="radio" name="subject1" value="subject 4" />
                <span class="checkmark">Subject 4</span>
            </label>
        </p>
    <button type="button" class="getResult">Result</button>
    </form>
</div>
<div class="chat self" id="self-chat">
    <div class="user-photo">
        <img src="img/self.png">
        </div>
        <p class="chat-message">
            <span id="result"></span>
        </p>
    </div>
</div>

SCRIPT :

var $radio = $("input:radio");
var $result = $(".getResult");

$result.on('change, click', function(){
  getSelectedRadioValue();
  hideRadio();
});

function getSelectedRadioValue(){
  var $result = [];
  $(".questionControl").each(function() {
    var $ans = $(this).find('input:radio:checked').val();
    $result.push($ans);
  });
  $('.chat-message #result').html($result.join(', '));
}

function hideRadio(){
  $('input:radio').hide();
  // if you wanted to disable
  // $('input:radio').attr('disabled', true);
}

Please follow the link to preview.

Answer 2

by doing:

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

then:

    jQuery(':radio').click(function () {
        $("#result1").text(this.value);
        $("#preference").hide();
    });

You were attaching 2 click event handlers to all radio buttons regardless of their form.

I've just reworked the markup, added a different id ( course-picker-form and preference-form ) to each form and changed the selectors ( '#course-picker-form input[type="radio"]' and '#preference-form input[type="radio"]' ) to attach the 2 separate click handlers to their intended radio buttons groups:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="chat machine" id="course-picker"> <p class="chat-message"> Which course do you want to choose? </p> <form method="post" id="course-picker-form"> <!--Radio Buttons for getting course input --> <label class="container"> <input type="radio" name="co1"value="course 1" /> <span class="checkmark">Course 1</span> </label> <label class="container"> <input type="radio" name="co2"value="course 2" /> <span class="checkmark">Course 2</span> </label> <label class="container"> <input type="radio" name="co3"value="course 3" /> <span class="checkmark">Course 3</span> </label> <label class="container"> <input type="radio" name="co4"value="course 4" /> <span class="checkmark">Course 4</span> </label> </form> </div> <div class="chat self" id="self-chat"> <p class="chat-message"><span id="result"></span></p> </div> <script> jQuery('#course-picker-form input[type="radio"]').click(function () { $("#result").text(this.value); $("#course-picker").hide(); }); </script> <div class="chat machine" id="preference"> <p class="chat-message"> Which course do you want to choose? </p> <form method="post" id="preference-form"> <!--Radio Buttons for getting course input --> <label class="container"> <input type="radio" name="p1"value="prefer 1"> <span class="checkmark">prefer 1</span> </label> <label class="container"> <input type="radio" name="p2"value="prefer 2"> <span class="checkmark">prefer 2</span> </label> </form> </div> <div class="chat self" id="self-chat"> <p class="chat-message"><span id="result1"></span></p> </div> <script> jQuery('#preference-form input[type="radio"]').click(function () { $("#result1").text(this.value); $("#preference").hide(); }); </script>