"JavaScript"でHTMLで作成されたフォームの入力情報を表示する確認画面（ポップアップ）が作成できません。

前提・実現したいこと

学校の課題で、HTMLで作成したフォームに入力された情報を、JavaScriptで表示させ（ポップアップ画面）入力情報があっているかを確認して、送信メッセージが次に表示されるとう動作の設定が全くうまくいきません。助けてください。。。

試したこと

以下がコードです。

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title> Ultimo Real Estate </title> <link rel="stylesheet" href="ultimo_real_estate.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> </script> </head> <body> <div id="wrapper"> <header> <img src="images/ultimo_real_estate_logo.png" width="625" height="160" alt="Ultimo Real Estate, Sydney, Australia"> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="property.html">Property of the Week</a></li> <li><a href="buy_sell_rent.html">Buy-Sell-Rent</a></li> <li><a href="agents.html">Agents</a></li> <li><a href="suburb_profile.html">Suburb Profile</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="contact.html" id="current">Contact</a></li> </ul> </nav> <main> <section id="col1"> <h1>Contact</h1> <ul> <li><strong>Ultimo Real Estate</strong></li> <li>20 Jones Street</li> <li>ULTIMO NSW 2007</li> </ul> <ul> <li><strong>Mob: +61 123 456 789</strong></li> <li>Tel: +612 1234 5678</li> <li>info@ultimorealestate.com.au</li> </ul> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6624.85817291638!2d151.19285829205285!3d-33.87860141454631!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b12ae2f6b3e5fb7%3A0xf97500fd5776ca34!2sJones%20St%2C%20Sydney%20NSW!5e0!3m2!1sen!2sau!4v1581408180870!5m2!1sen!2sau" width="570" height="500" allowfullscreen=""></iframe> </section> <section id="col2"> <h2>Property Enquiry</h2>

<form action="#" method="post" id="myForm" onsubmit="return validate()" novalidate> <h3>Personal Information</h3> <div class="form1"> <label for="name">Name*;</label> <input type="text" name="name" id="name" tabindex="10" required autofocus> </div> <div class="form1"> <label for="phone">Mobile *:</label> <input type="number" name="phone" id="phone" maxlength="15" tabindex="20" required> </div> <div class="form1"> <label for="email">Email *:</label> <input type="email" name="email" id="email" tabindex="30" required> <p>* = required fields</p> </div> <div class="form2"> <h4>Do you want to Buy or Sell or Rent?</h4> <section id="radio">

</section> </div> <div class="form2"> <h4>What property type/s are you interested in?</h4> <section id="checkbox">

<label for="townhouse">Townhouse:</label>
<input type="checkbox" name="unit" value="townhouse" id="townhouse">

<label for="house">House:</label>
<input type="checkbox" name="unit" value="house" id="house">

</section> </div>

<div>
<h4>How many bedrooms do you require?</h4> 
<select name="bedrooms" id="bedrooms">
  <option value="0">Choose your preferred number of bedrooms</option>
  <option value="studio">Studio</option>
  <option value="1">1 Bedroom</option>
  <option value="2">2 Bedrooms</option>
  <option value="3+">3+ Bedrooms</option>
</select>
</div>

<div>
<h4><label for="comments">Comments</label></h4>
<textarea name="comments" id="comments" rows="5" cols="30"></textarea>
</div>

<button type="submit" class="btn">Submit Enquiry</button>

</form> </section> </main> <footer> <ul> <li>© Ultimo Real Estate 20xx</li> <li><a href="www.facebook.com/UltimoRealEstate"><img src="images/facebook.png" width="30" height="30" alt="Ultimo Real Estate on Facebook"></a></li> <li><a href="www.instagram.com/UltimoRealEstate"><img src="images/instagram.png" width="30" height="30" alt="Ultimo Real Estate on Instagram"></a></li> <li><a href="www.twitter.com/UltimoRealEstate"><img src="images/twitter.png" width="30" height="30" alt="Ultimo Real Estate on Twitter"></a></li> <li><a href="legals.html">Legals</a></li> </ul> </footer> </div> <script> function validate() { var form = document.getElementById("myForm"); var name = document.getElementById("name").value; var phone = document.getElementById("phone").value; var email = document.getElementById("email").value; var message = document.getElementById("comments").value;

  var buy = document.getElementById("buy").checked;
  var sell = document.getElementById("sell").checked;
  var rent = document.getElementById("rent").checked;

  var unit = document.getElementById("unit").checked;
  var house = document.getElementById("house").checked;
  var townhouse = document.getElementById("townhouse").checked;

  var checkboxE = form.unit;
  var checkedArray = [];
  
  var radioLen = form.buy_sell_rent 
  var chosenRadio;

  var selectedOption = form.bedrooms.value;
  
  var error_message = document.getElementById("error_message");

  error_message.style.padding = "5px";
  error_message.style.color = "red";
  error_message.style.fontSize = "25px";

  var text;

  if (name.length < 3) {
    text = "please enter valid name";
    error_message.innerHTML = text;
    return false;
  }

  if (isNaN(phone) || phone.length != 10) {
    text = "Please enter a valid mobile number";
    error_message.innerHTML = text;
    return false;
  }

  if (email.indexOf("@") == -1 || email.length < 6) {
    text = "please enter a valid email address";
    error_message.innerHTML = text;
    return false;
  }

  if (buy == false && sell == false && rent == false) {
    text = "please select but, sell or rent";
    error_message = text;
    return false;
  }

  if (unit == false && house == false && townhouse == false) {
    text = "Please select property type";
    error_message.innerHTML = text;
    return false;
  }

  if (message.length <= 10) {
    text = "Please enter at least 30 characters in the comments section";
    error_message.innerHTML = text;
    return false;
  }
  for (let i = 0; i< checkboxE.length; i++){
  if (checkboxE[i].checked == true){
	checkedArray.push(checkboxEl[i].value);
	}
  }
  for (let i = 0; i < radioLen.length; i++){
  if (radioLen[i].checked){
    chosenRadio = radioLen[i].value;
	}
  }
  if (confirm("Do you really want to submit the form? \n\nname:" + form.name.value + "\nPhone: " + form.mobile.value + "\nEmail: " + form.email.value + "\nBuy/Sell/Rent: " + chosenRadio + "\nProperty types:" + checkedArray + "\nBedrooms:" + selectedOption)){
  alert("Form submitted successfully. Thanks for your enquiry!");
  return true;
  } else {
  return false;
  }
  }

</script> </body> </html>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

記述ミスが2か所ありました。
・checkedArray.push(checkboxEl[i].value); → checkedArray.push(checkboxE[i].value);
・"\nPhone: " + form.mobile.value → "\nPhone: " + form.phone.value

また、質問欄にソースコードを書くときは、前後を「```」で囲むと、ソースコードのインデントが反映されて読みやすくなりますので、次回質問されるときは試してみてください。

投稿2021/06/01 12:42