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。

单击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);）
重写相关数据字段，包括字符串。

＆＃13;

form, .data, label, input[type="button"] {
display: block;
}

form, .data {
float: left;
width: 200px;
}

input[type="button"] {
margin-top: 24px;
}

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 2

通过调用document.getElementsByClassName（class_name）获取类的元素示例javascript代码

      <field name='min_quantity' position=''>
        <field name='eqp'/>



        <field name="eqp"/>
        <field name="eqp_start"/>
        <field name="eqp_end"/>

Answer 3

为您想要拍摄的div设置一些ID /从/赋值并放入此代码

IncludeEmailCheckBox适用于您的＆＃34;包含电子邮件＆＃34;复选框

EmailToDiv是您的div获取电子邮件

EmailFromDiv用于输入电子邮件

IncludePhoneCheckBox适用于您的＆＃34;包含电话＆＃34;复选框

PhoneToDiv是您的div获取电话

PhoneFromDiv用于您的电话输入

function show(){
if (document.getElementById("IncludeEmailCheckBox").checked){
   document.getElementById("EmailToDiv").innerHTML =    document.getElementById("EmailFromDiv").innerHTML ;}
if (document.getElementById("IncludePhoneCheckBox").checked){
   document.getElementById("PhoneToDiv").innerHTML = document.getElementById("PhoneFromDiv").innerHTML ;}
return false;
}

请记住将ID更改为nessesary

Answer 4

这是您使用Jquery的视图（我更新）：

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

现在提取和打印值：

var Employee = $( "select[name=Employee]" ).val();
$('.ft_name').html(Employee);
var email = $( "input[name=email]" ).val();
$('#email_here').html(email);
var phone = $( "input[name=phone]" ).val();
$('#phone_here').html(phone);
var jobTitle = $( "input[name=jobTitle]" ).val();
$('.ft_pos').html(jobTitle);

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

4 个答案: