个人中心
gpt4 book ai didi

javascript - 如何显示在警报中选择的下拉列表项？

转载 作者：行者123 更新时间：2023-11-30 16:50:32 25 4
gpt4 key购买 nike

我有一个带有文本字段、下拉列表、单选按钮和文本框的表单。我想在警报中显示表单中的所有用户输入。这以前是有效的，但后来我被要求添加下拉菜单。现在，单击提交后不会显示任何警报。我希望警报打印出用户在表单中输入的所有信息，包括从下拉菜单中选择的信息。这是我的:

<html>

<!--nff Add a title to the Web Page.-->

<head>
<title>Pizza Order Form</title>
<script>

/*nff Add the doClear function to clear the information entered by the user and enter the information to be cleared when the clear entries button is clicked at the bottom of the Web Page.*/

function doClear()
{
var elements = document.getElementsByTagName('select');
elements[0].value = 'PA';

  document.PizzaForm.customer.value = "";
  document.PizzaForm.address.value = "";
  document.PizzaForm.city.value = "";
  document.PizzaForm.zip.value = "";
  document.PizzaForm.phone.value = "";
  document.PizzaForm.email.value = "";

  document.PizzaForm.sizes[0].checked = false;
  document.PizzaForm.sizes[1].checked = false;
  document.PizzaForm.sizes[2].checked = false;
  document.PizzaForm.sizes[3].checked = false;

  document.PizzaForm.toppings[0].checked = false;
  document.PizzaForm.toppings[1].checked = false;
  document.PizzaForm.toppings[2].checked = false;
  document.PizzaForm.toppings[3].checked = false;
  document.PizzaForm.toppings[4].checked = false;
  document.PizzaForm.toppings[5].checked = false;
  document.PizzaForm.toppings[6].checked = false;
  document.PizzaForm.toppings[7].checked = false;
  document.PizzaForm.toppings[8].checked = false;
  return;
}

//nff Add a doSubmit button to indicate what the outcome will be when the user clicks the submit order button at the bottom of the form.
function doSubmit()


/*nff Add an if statement to the doSubmit function to return false if there is missing information in the text fields once the user clicks the submit order button.*/

{
  if (validateText() == false) {
    return false;
  }

//nff Add an if statement to the doSubmit function to return false if there is no pizza size selected using the radio buttons.

  if (validateRadio() == false) {
    return false;
  }

//nff Add an if statement to the doSubmit function to return false if there are no toppings selected using the checkboxes.

  if (validateCheckbox() == false) {
    return false;
  }

//nff Add an if statement to the doSubmit function to return false if the email entered by the user is empty or does not fit the acceptable format.

  if (validateEmail() == false) {
    return false;
  }

/*nff Add an if statement to the doSubmit function to return false if the phone number entered by the user is empty or does not fit the acceptable formats.*/

  if (validatePhone() == false) {
    return false;
  }

//nff Add an alert box to show customer information from text fields when the Submit Order button is clicked.

  var customer = document.PizzaForm.customer.value;
  var address = document.PizzaForm.address.value;
  var city = document.PizzaForm.city.value;
  var state = document.PizzaForm.state.value;
  var zip = document.PizzaForm.zip.value;
  var phone = document.PizzaForm.phone.value;
  var email = document.PizzaForm.email.value;

  var size = "";
  for (var i = 0; i < document.PizzaForm.sizes.length; i++) {
    if (document.PizzaForm.sizes[i].checked) {
      size = document.PizzaForm.sizes[i].nextSibling.nodeValue.trim();
      break;
    }
  }

  var toppings = [];
  for (var i = 0; i < document.PizzaForm.toppings.length; i++) {
    if (document.PizzaForm.toppings[i].checked) {
      toppings.push(document.PizzaForm.toppings[i].nextSibling.nodeValue.trim());
    }
  }

  alert("Name: " + customer + '\n' +
    "Address: " + address + '\n' +
    "City: " + city + '\n' + 
    "State: " + state + '\n' +
    "Zip: " + zip + '\n' +
    "Phone: " + phone + '\n' +
    "Email: " + email + '\n' +
    "Size: " + size + '\n' + (toppings.length ? 'Toppings: ' + toppings.join(', ') : ''));
}

//nff Add the validateText function to ensure that all text fields are complete before the order is submitted.

function validateText() {
  var customer = document.PizzaForm.customer.value;
  if (customer.length == 0) {
    alert('Name data is missing');
    document.PizzaForm.customer.focus();
    return false
  };
  var address = document.PizzaForm.address.value;
  if (address.length == 0) {
    alert('Address data is missing');
    return false;
  }
  var city = document.PizzaForm.city.value;
  if (city.length == 0) {
    alert('City data is missing');
    return false;
  }
  var zip = document.PizzaForm.zip.value;
  if (zip.length == 0) {
    alert('Zip code data is missing');
  } else if (zip.length < 5) {
    alert('Invalid zip code data');
  } else {
    return false;
  }
  var phone = document.PizzaForm.phone.value;
  if (phone.length == 0) {
    alert('Phone data is missing');
    return false;
  }
  var email = document.PizzaForm.email.value;
  if (email.length == 0) {
    alert('Email data is missing');
    return false;
  }
  return true;
}

//nff Add the validateRadio function so that if none of the radio buttons for pizza size are selected it will alert the user.

function validateRadio() {
  if (document.PizzaForm.sizes[0].checked) return true;
  if (document.PizzaForm.sizes[1].checked) return true;
  if (document.PizzaForm.sizes[2].checked) return true;
  if (document.PizzaForm.sizes[3].checked) return true;
  alert('Size of pizza not selected');
  document.PizzaForm.sizes[0].foucs();
  return false;
}

//nff Add the validateCheckbox function so that if none of the checkboxes for toppings are selected it will alert the user.

function validateCheckbox() {
  if (document.PizzaForm.toppings[0].checked) return true;
  if (document.PizzaForm.toppings[1].checked) return true;
  if (document.PizzaForm.toppings[2].checked) return true;
  if (document.PizzaForm.toppings[3].checked) return true;
  if (document.PizzaForm.toppings[4].checked) return true;
  if (document.PizzaForm.toppings[5].checked) return true;
  if (document.PizzaForm.toppings[6].checked) return true;
  if (document.PizzaForm.toppings[7].checked) return true;
  if (document.PizzaForm.toppings[8].checked) return true;
  alert ('Toppings are not selected');
  return false;
  }

//nff Add the validateEmail function to ensure that the email address has been entered in the correct format.

function validateEmail() {  
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{3,4})+$/.test(PizzaForm.email.value))  
  {  
    return (true)  
  }  
    alert("You have entered an invalid email address")  
    return (false)  
} 

//nff Add the validatePhone function to ensure that the phone number has been entered in any of the acceptable formats.

function validatePhone() {
  if (/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test(PizzaForm.phone.value))
  {
    return (true)
  }
    alert("You have entered an invalid phone number")
    return (false)
}
</script>
</head>

<body>

<!--nff Add a form for the user to enter information into.-->

  <form name="PizzaForm">

<!--nff add a title at the top of the Web Page-->

  <h1>The JavaScript Pizza Parlor</h1>

<!--nff add directions to the user for the information to be entered-->

  <p>
  <h4>Step 1: Enter your name, address, and phone number:</h4>

<!--nff change the font-->

  <font face="Courier New">

<!--nff insert a text field for user to enter their name, add spaces between the title of the text box and the box itself, specify the size of the input box, and the type of input into the box as text.-->
<form>
Name: &nbsp;&nbsp;&nbsp;<input name="customer" size="50" type="text"><br>

<!--nff insert a text field for user to enter their address, specify the size of the input box, and the type of input into the box as text.-->
Address: <input name="address" size="50" type="text"><br>

<!--nff Insert a text field for user to enter their city, add spaces between the title of the text box and the box itself, specify the size of the input box, and the type of input into the box as text.-->
City: &nbsp;&nbsp;&nbsp;<input name="city" size="15" type="text">

State:<select>
          <option selected value="PA">PA</option>
          <option value="NJ">NJ</option>
          <option value="NY">NY</option>
          <option value="DE">DE</option>
      </select>

Zip: <input name="zip" size="5" type="text"><br>

<!--nff Insert a text field for the user to enter their phone number, insert spaces after the title of the box, specify the size of the box, and the type of input as text.-->
    Phone: &nbsp;&nbsp;<input name="phone" size="50" type="text"><br>

<!--nff Insert a text field for the user to enter their email address, insert spaces after the title of the box, specify the size of the box, and the type of input as text.-->
    Email: &nbsp;&nbsp;<input name="email" size="50" type="text"><br>
  </font>
 </p>

 <!--nff add second step to order a pizza-->
 <p>
   <h4>Step 2: Select the size of pizza you want:</h4>
   <font face="Courier New">

<!--nff Add radio buttons to choose from four options for pizza sizes.-->
     <input name="sizes" type="radio">Small
     <input name="sizes" type="radio">Medium
     <input name="sizes" type="radio">Large
     <input name="sizes" type="radio">Jumbo<br>
   </font>
 </p>
 <p>

  <!--nff add third step to order a pizza-->

   <h4>Step 3: Select the pizza toppings you want:</h4>
   <font face="Courier New">

<!--nff Add check boxes for user to choose toppings.-->
     <input name="toppings" type="checkbox">Pepperoni
     <input name="toppings" type="checkbox">Canadian Bacon
     <input name="toppings" type="checkbox">Sausage<br>
     <input name="toppings" type="checkbox">Mushrooms
     <input name="toppings" type="checkbox">Pineapple
     <input name="toppings" type="checkbox">Black Olives<br>
     <input name="toppings" type="checkbox">Green Peppers
     <input name="toppings" type="checkbox">Extra Cheese
     <input name="toppings" type="checkbox">None<br>
    </font>
   </p>

 <!--nff Add buttons for the options to submit order or clear entries. Add an onClick event to show one of the alerts entered earlier in this document when the submit button is clicked at the bottom of the Web Page. Add and onClick event to clear the entries in this form upon clicking the clear entries button.-->
   <input type="button" value="Submit Order" onClick="doSubmit()">
   <input type="button" value="Clear Entries" onClick="doClear()">
  </form>
</body>

</html>

最佳答案

请同时出示您的 HTML/表单。请阅读下拉列表的 .selectedIndex 属性。下面是一个快速链接:

http://www.w3schools.com/jsref/prop_select_selectedindex.asp

关于javascript - 如何显示在警报中选择的下拉列表项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30587030/

25 4 0
文章推荐： javascript - 在没有服务器的情况下将 XML 导入 HTML
文章推荐： 比较器未在 qsort 中调用 [错误 : expected expression before comparator]
文章推荐： c - 在 epoll 中使用 FILE *
文章推荐： c# - EF6 尝试在运行时创建表，但没有挂起的更改
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com