Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.12.2017, 18:58
Новичок на форуме
Отправить личное сообщение для kuprik Посмотреть профиль Найти все сообщения от kuprik
 
Регистрация: 13.12.2017
Сообщений: 4

Написать JS код, который будет автоматически подставлять значения в HTML
Здравствуйте. Я только учусь. Есть контрольное задание. HTML форма для заполнения Имени и Индекса для доставки, при установки галочки в чекбоксе, нужно чтоб введенные данные подставлялись в биллинговую форму.


<h1>JavaScript Homework</h1>
<p>Add the JavaScript code needed to enable auto-complete on this form. Whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip. If the checkbox is unchecked, the Billing Name and Billing Zip should go blank.</p>

<form>
<fieldset>
<legend>Shipping Information</legend>
<label for ="shippingName">Name:</label>
<input type = "text" name = "shipName" id = "shippingName" required><br/>
<label for = "shippingZip">Zip code:</label>
<input type = "text" name = "shipZip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
</fieldset>
<input type="checkbox" id="same" name="same" onchange= "billingFunction()"/>
<label for = "same">Is the Billing Information the Same?</label>

<fieldset>
<legend>Billing Information</legend>
<label for ="billingName">Name:</label>
<input type = "text" name = "billName" id = "billingName" required><br/>
<label for = "billingZip">Zip code:</label>
<input type = "text" name = "billZip" id = "billingZip" pattern = "[0-9]{5}" required><br/>
</fieldset>
<input type = "submit" value = "Verify"/>
</form>
Ответить с цитированием
  #2 (permalink)  
Старый 13.12.2017, 19:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

kuprik,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 13.12.2017, 21:36
Новичок на форуме
Отправить личное сообщение для kuprik Посмотреть профиль Найти все сообщения от kuprik
 
Регистрация: 13.12.2017
Сообщений: 4

так мне нужно сделать отдельный файл js
и сослаться на него в HTML,
<script src = "js/assesment4.js"></script>
я не понимаю как сам код написать
додумался только до этого:
function billingFunction() {
var shipName = document.getElementById('shippingName').value
if ( shipName.value = 'data') {
billName.setAttribute('shipName');
}
Ответить с цитированием
  #4 (permalink)  
Старый 13.12.2017, 21:38
Новичок на форуме
Отправить личное сообщение для kuprik Посмотреть профиль Найти все сообщения от kuprik
 
Регистрация: 13.12.2017
Сообщений: 4

А я понял:
<h1>JavaScript Homework</h1>
	<p>Add the JavaScript code needed to enable auto-complete on this form.  Whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip.  If the checkbox is unchecked, the Billing Name and Billing Zip should go blank.</p>

<form>
		<fieldset>
			<legend>Shipping Information</legend>
			<label for ="shippingName">Name:</label>
			<input type = "text" name = "shipName" id = "shippingName" required><br/>
			<label for = "shippingZip">Zip code:</label>
			<input type = "text" name = "shipZip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
		</fieldset>
		<input type="checkbox" id="same" name="same" onchange= "billingFunction()"/>
		<label for = "same">Is the Billing Information the Same?</label>
				
		<fieldset> 
			<legend>Billing Information</legend>
			<label for ="billingName">Name:</label>
			<input type = "text" name = "billName" id = "billingName" required><br/>
			<label for = "billingZip">Zip code:</label>
			<input type = "text" name = "billZip" id = "billingZip" pattern = "[0-9]{5}" required><br/>
		</fieldset>
			<input type = "submit" value = "Verify"/>
		</form>
Ответить с цитированием
  #5 (permalink)  
Старый 13.12.2017, 21:43
Новичок на форуме
Отправить личное сообщение для kuprik Посмотреть профиль Найти все сообщения от kuprik
 
Регистрация: 13.12.2017
Сообщений: 4

<!DOCTYPE html><html lang="en">
 <head>	
  <meta charset="UTF-8">	
    <title>Shipping and Billing</title>	
    <link rel="stylesheet" href="css/assesment4.css">
    <script src = "js/assesment4.js"></script>
    <style>		
        input{			
          border:1px solid black;
	}		
        input:focus{
	   background-color: #E6E6E6;		
        }
	fieldset{
 	   margin-bottom: 4%;
	}	
    </style>
  </head>
  <body>
	<h1>JavaScript Homework</h1>	
        <p>Add the JavaScript code needed to enable auto-complete on this form.  Whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip.  If the checkbox is unchecked, the Billing Name and Billing Zip should go blank.</p>

		<form>		
        <fieldset>
	  <legend>Shipping Information</legend>			  <label for ="shippingName">Name:</label>		  <input type = "text" name = "Name" id = "shippingName" required><br/>

	  <label for = "shippingzip">Zip code:</label>		  <input type = "text" name = "zip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
        </fieldset>
	<input type="checkbox" id="same" name="same" onchange= "billingFunction()"/>		
        <label for = "same">Is the Billing Information the Same?</label>						
        <fieldset>
 	  <legend>Billing Information</legend>			  <label for ="billingName">Name:</label>		  <input type = "text" name = "Name" id = "billingName" required><br/>
	   
          <label for = "billingzip">Zip code:</label>		  <input type = "text" name = "zip" id = "billingZip" pattern = "[0-9]{5}" required><br/>
	</fieldset>

	<input type = "submit" value = "Verify"/>	
    </form>
  </body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 13.12.2017, 23:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

kuprik,
<!DOCTYPE html><html lang="en">
 <head>
  <meta charset="UTF-8">
    <title>Shipping and Billing</title>
    <link rel="stylesheet" href="css/assesment4.css">
    <script>
window.addEventListener("DOMContentLoaded", function() {
  var form = document.querySelector("form"),
      check = form.querySelector('[name="same"]'),
      fieldset = form.querySelectorAll("fieldset");
  function replication() {
    if (!check.checked) {
      return;
    }
    [].forEach.call(fieldset[0].querySelectorAll("input"), function(el) {
      var inp = fieldset[1].querySelector('[name="' + el.name + '"]');
      if (inp) {
        inp.value = el.value;
      }
    });
  }
  form.addEventListener("change", replication);
  form.addEventListener("input", replication);
});
    </script>
    <style>
        input{
          border:1px solid black;
  }
        input:focus{
     background-color: #E6E6E6;
        }
  fieldset{
 	   margin-bottom: 4%;
  }
    </style>
  </head>
  <body>
  <h1>JavaScript Homework</h1>
        <p>Add the JavaScript code needed to enable auto-complete on this form.  Whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip.  If the checkbox is unchecked, the Billing Name and Billing Zip should go blank.</p>

    <form>
        <fieldset>
    <legend>Shipping Information</legend>			  <label for ="shippingName">Name:</label>		  <input type = "text" name = "Name" id = "shippingName" required><br/>

    <label for = "shippingzip">Zip code:</label>		  <input type = "text" name = "zip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
        </fieldset>
  <input type="checkbox" id="same" name="same" />
        <label for = "same">Is the Billing Information the Same?</label>
        <fieldset>
 	  <legend>Billing Information</legend>			  <label for ="billingName">Name:</label>		  <input type = "text" name = "Name" id = "billingName" required><br/>

          <label for = "billingzip">Zip code:</label>		  <input type = "text" name = "zip" id = "billingZip" pattern = "[0-9]{5}" required><br/>
  </fieldset>

  <input type = "submit" value = "Verify"/>
    </form>
  </body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Операционная Система на JS Icat Общие вопросы Javascript 3 17.04.2018 22:54
Можно ли заккоментировать HTML и CSS с помощью JS? AlexKain Элементы интерфейса 6 10.06.2016 16:53
как из js передать параметр в html wins Общие вопросы Javascript 6 22.12.2013 15:56
javascript код, который будет перехватывать нажатие клавиш клавиатуры 38 и 40!!! Nuitari Элементы интерфейса 12 13.08.2013 18:17
Как проиндексировать картинки HTML код которых генерируется на JS greatilya Оффтопик 9 22.09.2010 07:42