使用 javascript 在 HTML 表单中自动填写字段

Question

    <li>
            <div class="destination">
                  <img src="image/destination/chamba.jpg" alt="">
              <div class="destinationDetails">
                <h2>Chamba <h2>
                <h3>Starting From Rs. 2500 <h3>
                  <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
                  <button type="button" name="button" class="commonBtn"> View Variations</button>
              </div>
            </div>
          </li>

          <li>
            <div class="destination">
                  <img src="image/destination/parvati.jpg" alt="">
              <div class="destinationDetails">
                <h2>Parvati Valley <h2>
                <h3>Starting From Rs. 2500 <h3>
                  <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
                  <button type="button" name="button" class="commonBtn"> View Variations</button>
              </div>
            </div>
          </li>

<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Sign Up</h1>
      <p>Please fill in this form to create an account.</p>
      <hr>
      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" required>


       <label><b>Package</b></label>

<input type = "text" id="test2" name "teste2">

<button type="button" onclick="MyFunction()">Click To Fill Up</button>

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <label for="psw-repeat"><b>Repeat Password</b></label>
      <input type="password" placeholder="Repeat Password" name="psw-repeat" required>

      <label>
        <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
      </label>

      <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
        <button type="submit" class="signupbtn">Sign Up</button>
      </div>
    </div>
  </form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

I am using This Code To Make A Booking Page. I Want To Fill Up The Package Field Automatically when someone clicks "book now" or using a button to fill up the field by clicking on it.

For Example: If I click the "book now" button in the first "li", the package filled should be automatically filled up as "Chamba" and If I Click The "book now" button in second "li" the packages field should be automatically filled as "Parvati Valley".

Is there any way to do so...??

Thanks For Your Help In advance.

Answer 1

Add a function and set appropriate value. Consider this for learning purpose only.

 var modal = document.getElementById('id01'); // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } function setPackage(packageName) { document.querySelector('#test2').value = packageName; }

 <li> <div class="destination"> <img src="image/destination/chamba.jpg" alt=""> <div class="destinationDetails"> <h2>Chamba <h2> <h3>Starting From Rs. 2500 <h3> <button onclick="setPackage('Chamba');document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button> <button type="button" name="button" class="commonBtn"> View Variations</button> </div> </div> </li> <li> <div class="destination"> <img src="image/destination/parvati.jpg" alt=""> <div class="destinationDetails"> <h2>Parvati Valley <h2> <h3>Starting From Rs. 2500 <h3> <button onclick="setPackage('Parvati Valley');document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button> <button type="button" name="button" class="commonBtn"> View Variations</button> </div> </div> </li> <div id="id01" class="modal"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span> <form class="modal-content" action="/action_page.php"> <div class="container"> <h1>Sign Up</h1> <p>Please fill in this form to create an account.</p> <hr> <label for="email"><b>Email</b></label> <input type="text" placeholder="Enter Email" name="email" required> <label><b>Package</b></label> <input type="text" id="test2" name "teste2"> <button type="button" onclick="MyFunction()">Click To Fill Up</button> <label for="psw"><b>Password</b></label> <input type="password" placeholder="Enter Password" name="psw" required> <label for="psw-repeat"><b>Repeat Password</b></label> <input type="password" placeholder="Repeat Password" name="psw-repeat" required> <label> <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me </label> <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p> <div class="clearfix"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> <button type="submit" class="signupbtn">Sign Up</button> </div> </div> </form> </div>