个人中心
gpt4 book ai didi

javascript - 我需要在使用 HTML 和 Javascript 后将表单上提交的输入显示在页面上

转载 作者：行者123 更新时间：2023-11-28 08:41:33 24 4
gpt4 key购买 nike

我需要创建一个页面来获取提交的信息，然后在按下提交时将其显示在页面上。我现在的方式是打印姓名、电子邮件、经验年数、日期、引用文献和其他评论。补偿和区域选择打印为未定义...

请帮忙!!

<script type="text/javascript">
info = document.getElementById("personalInfo");
    info.innerHTML = "<strong>Peronal Info: </strong>" + "<br>" + "Name: " + 
                    document.feedback.fname.value +
                    " " +
                    document.feedback.lname.value +
                    "<br>" + "Email: " +
                    document.feedback.email.value;

    info = document.getElementById("experienceSubmit");

    var compensationValue,regionValue;
    //Get compensation value
    for(var i=0;i<document.feedback.comp.length;i++){
        if(document.feedback.comp[i].checked){
        compensationValue = document.feedback.comp[i].value;
    }
}
    //Get region value
    for(var i=0;i<document.feedback.region.length;i++){
        if(document.feedback.region[i].checked){
        regionValue = document.feedback.region[i].value;        
    }
}


info = document.getElementById("otherSubmit");
    info.innerHTML = "<strong>Other information: </strong>" + "<br>" + "# of References " + 
                    document.feedback.reference.value +
                    "<br>" + "Additional Comments: " +
                    document.feedback.comments.value; 
return false;
}
</script>
</head>
<body background="../Assignment 5/_images/abstract_color_background_picture_8016-wide.jpg" >
<form   name="feedback" method="post" onSubmit="return checkform()">
        <section  id="pinfo" class="inputArea">
        <fieldset>
            <table>
                <tr>
                    <td>Last Name: </td>
                    <td><input name="lname"
                               type="text"
                               autofocus
                               required
                               placeholder="lname"                               
                               size="25" />
                    </td>
                </tr>                   
                <tr>
                    <td>First Name: </td>
                    <td><input name="fname"
                               type="text"
                               size="25"
                               required
                               placeholder="fname" />
                    </td>
                </tr>
                <tr>
                    <td>Email: </td>
                    <td><input name="email"
                               type="email"
                               size="40"
                               required
                               placeholder="....@hotmail.com" />
                     </td>
                </tr>
                    <td>Gender: </td>
                    <td><select name="gender">
                            <option selected disabled style='display:none;'>
                            Gender</option>                         
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>                      
                        </select>

                </td>
                </tr>
            </table>
            </fieldset>
</section>
<section id="experience">
            <fieldset>
            <table>
                <tr>
                    <td>
                    <label for="experience">Years of Experience: </label>
                    <input name="experience" type="number" />
                  </td>
              </tr>
              <tr>
                    <td>
                        <label for="date">Date</label>
                        <input name="date" type="date" />
                    </td>
              <tr>
                    <td>
                        <label for="comp">Compensation: </label><br>
                        <input name="comp" type="radio" id="Salary" value="Salary Selected">Salary &nbsp;
                        <input name="comp" type="radio" id="SalaryWB" value="Salary with bonus Selected">Salary with Bonus &nbsp;
                        <input name="comp" type="radio" id="Commission" value="Commission Selected">Commission &nbsp;
                    </td>
              </tr>
              <tr>
                <td>
                    <label for="region">Region: </label><br>
                    <input name="region" type="checkbox" id="East" value="East Selected">East &nbsp;
                    <input name="region" type="checkbox" id="West" value="West Selected">West &nbsp;
                    <input name="region" type="checkbox" id="North" value="North Selected">North &nbsp;
                    <input name="region" type="checkbox" id="South" value="South Selected">South &nbsp;
                </td>
              </tr>
          </table>
          </fieldset>
</section>
<section id="other">
<fieldset>
          <table>
            <tr>
                <td>
                <label for="reference">References<br>0&nbsp;&nbsp 1 &nbsp;&nbsp 2 &nbsp&nbsp 3 &nbsp&nbsp 4 &nbsp&nbsp 5<br></label>
            <input name="reference" id="reference"
                    type="range" 
                    value="0"
                    min="0"
                    max="5"
                    step="1" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="comments">Additional Comments: <br></label>
                    <textarea 
                    name="comments"
                    rows="5" 
                    cols="20" 
                    placeholder="Please include any other pertinent information here"></textarea>                   </td>
            </tr>          
          </table>          
</fieldset>

        <input type="submit" value="Submit" />
        <input type="reset" value="Clear" />
</section>
</form>
<section id="personalInfo"></section>
<section id="experienceSubmit"></section>
<section id="otherSubmit"></section>
</body>

最佳答案

您用来获取复选框和单选按钮值的方式是错误的。您可以使用这段代码来获取单选按钮或复选框的选中值。

单选按钮

var radios = document.getElementsByName('comp');

for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        // do whatever you want with the checked radio
        alert(radios[i].value);

        // only one radio can be logically checked, don't check the rest
        break;
    }
}

复选框

var checkedValues = []; 
var inputElements = document.getElementsByName('region');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValues.push(inputElements[i].value);   
      }
}
var str = checkedValues.ToString(); // all the selected regions in a string.

关于javascript - 我需要在使用 HTML 和 Javascript 后将表单上提交的输入显示在页面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20417764/

24 4 0
文章推荐： javascript - 为什么ngModel.$setViewValue没有效果？
文章推荐： javascript - Android提交使用jquery的https登录表单
文章推荐： CSS sourcemaps 和浏览器内 Sass 编辑
文章推荐： html - Div 边距设置不正确
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com