获取无线电值并使用innerHtml回写

时间:2018-07-07 11:47:47

标签: javascript html

我知道关于获取单选按钮的值存在很多问题,我已经遍历了所有问题。我遇到的问题是我已经创建了一个表单,提交后,我必须再次向用户显示他使用模式选择的单选按钮。我创建了模态,一切正常。我可以将用户的姓名和年龄写回到新的模式中,但是未选中单选按钮。这是我使用过的javascript

function displayContent(){
    var name=document.getElementById("Name").value;
    var comment=document.getElementById("comment").value;

    var ratings = document.getElementsByName('rating');
    var rate_value;     
    for(var i = 0; i < rating.length; i++){
    if(rating[i].checked){
       rate_value = rating[i].value;
    }

    return "";

   /*these lines are used to write the details into the new modal*/
   document.getElementById("username").textContent = name;
   document.getElementById("usercomment").textContent=comment;
   document.getElementById("userrating").innerHTML=rate_value;
}

在我添加单选按钮数组部分之前,模态获取了用户名和注释,但是在此之后,整个事情都没用了。所以我知道这就是问题所在。这是我的HTML

<form name="FeedbackForm">
    Name: <input id="Name" type="text" placeholder="Name"> 
    E-Mail: <input id="E-mail" type="email" placeholder="E-mail"> What do you think about us? <br>
    <textarea id="comment" rows="6" cols="33" "name="comment "></textarea><br>How would you rate us ?<br>
       <label><input type ="radio " name="rating " id="rating " value="Excellent ">Excellent</label>
       <label><input type ="radio " name="rating " id="rating " value="Very Good ">Very Good</label>
       <label><input type ="radio " name="rating " id="rating " value="Average ">Average</label>
       <label><input type ="radio " name="rating " id="rating " value="Poor ">Poor</label>
       <label><input type ="radio " name="rating "id="rating " value="Extreamly Poor ">Extremely Poor</label><br>
       <a href="# " id="submit " onclick="displayContent();setTimeout(closePopup,10000) ">SUBMIT</a>                                
</form>

这是我创建的模态

<div class="popup">
    <div class="popuptext" id="myPopup">
        <p>Thank you
            <span id="username"></span> ,
            <br>Your feedback has been recorded.
            <br>
            <br>You commented that"
            <span id="usercomment"></span>"
            <br>
            <br>and rated our website "
            <span id="userrating"></span>".
            <br>
            <br>Thank you for taking your time to do so.
            <br>
            <br>You will now be re-directed automatically</p>
    </div>
</div>

请注意,我曾经在“用户输入的注释”两边加上引号。

在此先感谢您(请注意,我想在Java脚本中完成此操作,因为我不了解Jquery,并且不允许使用它

2 个答案:

答案 0 :(得分:1)

代码中有一些错误。但是最大的错误似乎是在输出输入之前的return "";return用作功能的停止,并在其可以输出答案之前将其停止。我认为这就是我希望您执行的操作:

function displayContent() {
    var name=document.getElementById("Name").value;
    var comment=document.getElementById("comment").value;

    var ratings = document.getElementsByName('rating');
    var rate_value;        
    for(var i = 0; i < rating.length; i++){
        if(rating[i].checked){
            rate_value = rating[i].value;
        }
     }

     /*these lines are used to write the details into the new modal*/
     document.getElementById("username").textContent = name;
     document.getElementById("usercomment").textContent = comment;
     document.getElementById("userrating").innerHTML = rate_value;

     return "";
 }
<form name="FeedbackForm">
    Name: <input id="Name"type="text" placeholder="Name">
    E-Mail: <input id="E-mail"type="email" placeholder="E-mail">
    What do you think about us?<br>
    <textarea id="comment" rows="6" cols="33" name="comment"></textarea><br>
    How would you rate us ?<br>
    <label><input type ="radio" name="rating" id="rating" value="Excellent">Excellent</label>
    <label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
    <label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
    <label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
    <label><input type ="radio" name="rating"id="rating" value="Extreamly Poor">Extremely Poor</label>
    <br>
    <a href="#" id="submit" onclick="displayContent()">SUBMIT</a>
    </form>

    <br>
    <hr>
    <br>

    <div class="popup">
        <div class="popuptext" id="myPopup">
            <p>Thank you <span id="username"></span>,
            <br>Your feedback has been recorded.<br> 
            <br>You commented that"<span id="usercomment"></span>" <br><br>and rated our website "<span id="userrating"></span>".
             <br><br>Thank you for taking your time to do so.<br><br>You will now be re-directed automatically</p>
        </div>
    </div>

答案 1 :(得分:0)

我认为问题出在变量名上。 使用rating而不是ratings

var rating = document.getElementsByName('rating');

这对我有用。