JavaScript установить начальное значение полей формы на то же значение другого поля?

#javascript #html #jquery #django

#javascript #HTML #jquery #django

Вопрос:

Я пытаюсь выполнить некоторую работу с JavaScript, в которой у меня нет большого опыта. У меня есть форма из 2 частей, в которой пользователь вводит свою личную информацию, а затем информацию о компании. Я пытаюсь установить для некоторых полей компании то, что они уже ввели в свою личную информацию.

Я не хочу, чтобы пользователю приходилось повторно вводить адрес, электронную почту и т.д.

например, у меня есть…

 <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 раздела учетной записи, когда пользователь нажимает next, это запускает отображение бизнес-информации.

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

nextFormPage() Функция просто скрывает первый div и отображает второй div.

Комментарии:

1. Ах, извините за это. Используя фреймворк Django.

2. Что вы ищете, не ясно. Эти входные данные находятся на одной странице или на отдельных страницах? Если это одна и та же страница, какой триггер должен привести к заполнению данных во второй группе форм? Если это отдельные страницы, пожалуйста, покажите нам больше информации о том, как форма отправляется на вторую страницу.

3. просто используйте обработчик событий onchange в электронной почте и обновите электронную почту компании, если она изменилась

Ответ №1:

Вы отметили как javascript, так и jQuery, поэтому я не уверен, какой из них вы используете. Но вы можете сделать это с помощью одной строки в любом случае:

Javascript::

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

document.getElementById("email").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">  

Ответ №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
}

  

Это должно предварительно заполнить вашу форму электронной почтой