如何用表单中的值填充div？

Eduard Climov 发表于 Dev

爱德华·克利莫夫（Eduard Climov）

我有这样的结构的html形式：

...
<select name="Employee"> 
  <option>a</option>
  <option>b</option>
</select> 

<input type="checkbox" name="email" value="Yes" unchecked>Include Email Contact
<input type="checkbox" name="phone" value="Yes" unchecked>Include Phone Contact
Job Title: <input type="Text" name="jobTitle" size="20"><br> 
<input type="Button" value="Generate" onclick="show()" id="refresh"> 
...

还有一个div：

<div class="data">
    <div class="ft_name"></div>
    <div class="ft_pos"></div>
    <div class="ft_tbl_meta">E-Mail:</div>
    <div class="ft_tbl_data"></div>
    <div class="ft_tbl_meta">Phone:</div>
    <div class="ft_tbl_data"></div>
</div>

如何在不重新加载整个页面的情况下通过按按钮在div部分显示我的值？我有点了解Javascript，但不幸的是，尚未找到答案。先感谢您！

鲁宁

这是使用不引人注目的香草javascript的一种解决方案。

单击showData()时，该函数运行button。

然后，该函数showData()：

获取每个复选框的布尔值（或者true如果选中或false如果未选中）
将布尔值重写为字符串（的值true变为'Yes'和的值false变为'No'）
重写相关的数据字段，包括字符串。

function showData() {

    var emailValue = document.querySelector('input[value="email"]').checked;
    var phoneValue = document.querySelector('input[value="phone"]').checked;

    var data = document.getElementsByClassName('data')[0];
    var dataFields = data.getElementsByTagName('div');

    if (emailValue === true) {emailValue = 'Yes';} else {emailValue = 'No';}
    if (phoneValue === true) {phoneValue = 'Yes';} else {phoneValue = 'No';}

    for (var i = 0; i < dataFields.length; i++) {

        switch (i) {
            case (0) : dataFields[i].textContent = 'E-Mail: ' + emailValue; break;
            case (1) : dataFields[i].textContent = 'Phone: ' + phoneValue; break;
        }
    }
}

var button = document.querySelector('input[type="button"]');
button.addEventListener('click',showData,false);

form, .data, label, input[type="button"] {
display: block;
}

form, .data {
float: left;
width: 200px;
}

input[type="button"] {
margin-top: 24px;
}

<form>
<label><input type="checkbox" name="contact" value="email" unchecked>Include Email Contact</label>
<label><input type="checkbox" name="contact" value="phone" unchecked>Include Phone Contact</label>
<input type="Button" value="Generate">
</form>

<div class="data">
<div class="ft_tbl_meta">E-Mail:</div>
<div class="ft_tbl_meta">Phone:</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。