Форум

kuprik · #1 (**permalink**) 13.12.2017, 18:58

Здравствуйте. Я только учусь. Есть контрольное задание. 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

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

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

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

kuprik · #3 (**permalink**) 13.12.2017, 21:36

так мне нужно сделать отдельный файл js
и сослаться на него в HTML,
<script src = "js/assesment4.js"></script>
я не понимаю как сам код написать
додумался только до этого:
function billingFunction() {
var shipName = document.getElementById('shippingName').value
if ( shipName.value = 'data') {
billName.setAttribute('shipName');
}

kuprik · #4 (**permalink**) 13.12.2017, 21:38

А я понял:

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

kuprik · #5 (**permalink**) 13.12.2017, 21:43

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

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>

Форум

Справочник

Discord чат

Курсы javascript