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

Question

我有一个具有这种结构的 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，但不幸的是，还没有找到答案。 先感谢您!

Answer 1

这是一个解决方案，使用不显眼的普通 javascript。

showData() 函数在单击按钮 时运行。

然后，函数showData():

• 获取每个复选框的 bool 值(如果选中则为 true，如果未选中则为 false)
• 将 bool 值重写为字符串(true 的值变为 'Yes'，false 的值变为 '没有')
• 重写相关数据字段，包括字符串。

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>