JavaScript 将表单字段的初始值设置为另一个字段的相同值？

Question

我正在尝试处理一些我没有太多经验的 JavaScript 工作。 我有一个由两部分组成的表单，用户在其中输入他们的个人信息，然后输入公司信息。 我正在尝试将一些公司字段设置为他们已经在个人信息中输入的内容。

我不希望用户必须重新输入地址、电子邮件等。

例如，我有...

<div class="form-group">
    <label for="email">Email<span>*</span></label>
    <input name="email" type="text" class="form-control required" id="email"placeholder="Email" value=". 
        {{email}}">
    <span id="span_email" class="error-msg"></span>

和...

<div class="form-group">
    <label for="comp_email">Company Email<span>*</span></label>
    <input name="comp_email" type="text" class="form-control required" id="comp_email"placeholder="Email" 
        value="{{comp_email}}">
    <span id="span_email" class="error-msg"></span>

我如何才能将第二个comp_email字段设置为初始具有email信息，以便用户不必重新键入，除非他们确实想将comp_email更改为另一个电子邮件地址？

编辑

它都是一种形式，只是由 div 分隔。 最初，当页面加载时，显示帐户部分div，当用户点击下一步时，它会触发业务信息的显示。

 <input type="button" onclick="nextFormPage(); window.scrollTo(0, 100)" 
    class="btn btn-danger btn-block" value="Next">

nextFormPage()函数只是隐藏第一个 div 并显示第二个 div。

Answer 1

您已经标记了 javascript 和 jQuery，所以我不确定您使用的是哪个。 但是你可以用任何一种方式用一行来做到这一点：

Javascript ：：

document.getElementById("comp_email").value = document.getElementById("email").value;

document.getElementById("email").value从电子邮件输入中获取值，我们通过设置其value属性来设置document.getElementById("comp_email")的value ：

jQuery：

$("#comp_email").val( $("#email").val() );

$("#email").val()从电子邮件输入中获取值， $("#comp_email").val( ... ); 将传入的文本设置为输入值。

Javascript 工作示例

 function nextFormPage(){ document.getElementById("comp_email").value = document.getElementById("email").value; }

 <div class="form-group"> <label for="email">Email<span>*</span></label> <input name="email" type="text" class="form-control required" id="email" placeholder="Email" value=""> <span id="span_email" class="error-msg"></span> <div class="form-group"> <label for="comp_email">Company Email<span>*</span></label> <input name="comp_email" type="text" class="form-control required" id="comp_email" placeholder="Email" value=""> <span id="span_email" class="error-msg"></span> <input type="button" onclick="nextFormPage(); window.scrollTo(0, 100)" class="btn btn-danger btn-block" value="Next">

Answer 2

如果您的用户已登录，您应该将他们的所有信息传递到表单，包括他们的电子邮件。 例如：

const logIn = () => {
... some code to get the user ...
... pass the user to the form, probably through an event listener...
let button = document.createElement("button")
button.textContent = "Edit"
button.addEventListener('click', () => {editYourStuff(user)}
}

const editYourStuff = user => {
... grab whatever your form is called ...
 editForm.email.value = user.email
}

这应该使用电子邮件预先填充您的表单