2017-02-04 2 views
0

Как получить мою кнопку отправки, чтобы сгенерировать сообщение на основе моих операторов switch в javascript?

function displayMessage() { 
 
    var message; 
 
    var firstName= alert(
 
    switch(firstName) { 
 
    case "Cherry": 
 
     message="Thank You Cherry!! Your order should arrive 20 days from 
 
     February 4, 2017"; 
 
     break; 
 
    case "Micheal": 
 
     message = "Thank You Micheal!! Your order will be coming in two weeks"; 
 
     break; 
 
    case "Sandra": 
 
     message = "Thank You Sandra!! You've got a big order so it will take a month."; 
 
     break; 
 
    case "Cookie": 
 
     message= "Thank You Cookie!! Your order is coming tomorrow. So be at home between 1-2pm." 
 
    
 
    } 
 
    document.getElementById("generate").innerHTML = message; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Cookie Order Form</title> 
 
    <link rel="stylesheet" href="First_Design.css"> 
 
    <script src="cookieform.js"></script> 
 
    <script src="DisplayNames.js"></script> 
 
</head> 
 
<body> 
 
    <h1>Cookie Order Form</h1> 
 
    <p>This form is a cookie order form for customers that purchased cookies from Daron's Cookies Company and the following below must be filled out in order for each customer to receive a final message that tells them when their order will be ready.</p> 
 

 

 
    <IMG class="Wrap1" SRC="cookie.gif" alt="cookie"> 
 
    <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2"> 
 

 

 

 
    <!--The customer will be sent to the HTML page named "submit.html" after they 
 
    click the "Submit this Form" button. The code below does this. --> 
 
    <div> 
 
     <form id="cookie_form" action="#"> 
 

 
      <fieldset class="field_set_1"> 
 
       <!-- Below sets the title of the form--> 
 
      
 
       <legend>Customer Order Form Information:</legend> 
 

 

 
       <!-- Creates the first left label to specify what should be placed in the text box 
 
       to the right of the label. The rest below does the same.--> 
 

 
       <label for="firstName">First Name:</label> 
 
       <input type="text" id="firstName" name="firstName"> 
 
       <span id="firstname_error">*</span><br> 
 

 
       <label for="orderNumber">Order Number:</label> 
 
       <input type="text" id="orderNumber" name="orderNumber"> 
 
       <span id="orderNumber_error">*</span><br> 
 

 
       <label for="date_of_order">Date of Order:</label> 
 
       <input type="text" id="date_of_order" name="date_of_order"> 
 
       <span id="date_of_order_error">*</span><br> 
 

 
       <label for="email_address">Email Address:</label> 
 
       <input type="text" id="email_address" name="email_address"> 
 
       <span id="email_address_error">*</span><br> 
 
      <label>&nbsp;</label> 
 
      <input type="button" id="form_submission" value="Submit this form" 
 
      onclick="displayMessage()"> 
 
      <p id="generate"></p> 
 
      </fieldset> 
 

 
     </form> 
 

 
    </div> 
 
    <div class="clearfix"> 
 
    </div> 
 
    <IMG class="Wrap1" SRC="cookie.gif" alt="cookie"> 
 
    <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2"> 
 

 

 
</body> 
 

 

 

 
</html>

Как я могу получить мою кнопку отправить в HTML для создания различных сообщений на основе моей displayMessage функции() выписок переключателя в JavaScript? Я спрашиваю об этом, потому что я думал об извлечении первых имен пользователей на одной странице и использовании их на последней странице, чтобы отображать сообщение для каждого пользователя, но я вижу, что это еще не сработало для меня. Итак, теперь я думаю, что буду использовать инструкции switch на основе входного значения первого имени пользователя. Как я могу это сделать? Меня беспокоит только правильное сообщение, основанное на их первом имени, когда они вошли в форму html и нажали кнопку submit. Вот моя html-форма и Javascript.

+0

Если ваш план заключается в отправке контента на сервер, вы должны вернуть эти данные с сервера, а затем отобразить его на последней странице. Когда вы отправляете форму (я понимаю, что вы загрузите полностью новую html-страницу), вы потеряете все клиентские данные с первой страницы html, включая javascript. Мое предложение для вас - использовать NodeJS для бэкэнд, потому что это одна из самых простых базисных фреймворков. –

+0

Нет, я хочу, чтобы всплывающее окно отображало сообщение на основе их первых имен. Я не должен был делать ASP или любое серверное программирование, чтобы делать то, что я хочу. – Joe

ответ

0
function displayMessage() 
    { 
      var message; 
      var firstName=document.getElementById("firstName").value; 
      switch(firstName) 
       { 
       case "Cherry": 
        message="Thank You Cherry!! Your order should arrive 20 days from February 4, 2017"; 
        break; 
       case "Micheal": 
        message = "Thank You Micheal!! Your order will be coming in two weeks"; 
        break; 
       case "Sandra": 
        message = "Thank You Sandra!! You've got a big order so it will take a month."; 
        break; 
       case "Cookie": 
        message= "Thank You Cookie!! Your order is coming tomorrow. So be at home between 1-2pm." 

      } 
      alert(message); 
    } 

Если вы хотите сделать это, вы должны GET ПгвЬЫат от формы к вашей функции.

var firstName=document.getElementById("firstName").value; 

Принимает первое имя из формы и позволяет вашей функции завершить работу.

+0

Отметить как ответ, возможно, это будет полезно кому-то еще;) –

+0

- Vykintas Я протестировал его, но не произошло на моей странице html. – Joe

0

function displayMessage() { 
 
    var message; 
 
    var firstName=document.getElementById("firstName").value; 
 
    switch(firstName) { 
 
    case "Cherry": 
 
     message="Thank You Cherry!! Your order should arrive 20 days from February 4, 2017"; 
 
     break; 
 
    case "Micheal": 
 
     message = "Thank You Micheal!! Your order will be coming in two weeks"; 
 
     break; 
 
    case "Sandra": 
 
     message = "Thank You Sandra!! You've got a big order so it will take a month."; 
 
     break; 
 
    case "Cookie": 
 
     message= "Thank You Cookie!! Your order is coming tomorrow. So be at home between 1-2pm." 
 
    
 
    } 
 
    alert(message); 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Cookie Order Form</title> 
 
    <link rel="stylesheet" href="First_Design.css"> 
 
    <script src="cookieform.js"></script> 
 
    <script src="DisplayNames.js"></script> 
 
</head> 
 
<body> 
 
    <h1>Cookie Order Form</h1> 
 
    <p>This form is a cookie order form for customers that purchased cookies from Daron's Cookies Company and the following below must be filled out in order for each customer to receive a final message that tells them when their order will be ready.</p> 
 

 

 
    <IMG class="Wrap1" SRC="cookie.gif" alt="cookie"> 
 
    <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2"> 
 

 

 

 
    <!--The customer will be sent to the HTML page named "submit.html" after they 
 
    click the "Submit this Form" button. The code below does this. --> 
 
    <div> 
 
     <form id="cookie_form" action="#"> 
 

 
      <fieldset class="field_set_1"> 
 
       <!-- Below sets the title of the form--> 
 
      
 
       <legend>Customer Order Form Information:</legend> 
 

 

 
       <!-- Creates the first left label to specify what should be placed in the text box 
 
       to the right of the label. The rest below does the same.--> 
 

 
       <label for="firstName">First Name:</label> 
 
       <input type="text" id="firstName" name="firstName"> 
 
       <span id="firstname_error">*</span><br> 
 

 
       <label for="orderNumber">Order Number:</label> 
 
       <input type="text" id="orderNumber" name="orderNumber"> 
 
       <span id="orderNumber_error">*</span><br> 
 

 
       <label for="date_of_order">Date of Order:</label> 
 
       <input type="text" id="date_of_order" name="date_of_order"> 
 
       <span id="date_of_order_error">*</span><br> 
 

 
       <label for="email_address">Email Address:</label> 
 
       <input type="text" id="email_address" name="email_address"> 
 
       <span id="email_address_error">*</span><br> 
 
      <label>&nbsp;</label> 
 
      <input type="button" id="form_submission" value="Submit this form" 
 
      onclick="displayMessage()"> 
 
      <p id="generate"></p> 
 
      </fieldset> 
 

 
     </form> 
 

 
    </div> 
 
    <div class="clearfix"> 
 
    </div> 
 
    <IMG class="Wrap1" SRC="cookie.gif" alt="cookie"> 
 
    <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2"> 
 
</body> 
 
</html>

<!DOCTYPE html> 
<html> 
<head> 
    <title>Cookie Order Form</title> 
    <link rel="stylesheet" href="First_Design.css"> 
    <script src="cookieform.js"></script> 
    <script src="DisplayNames.js"></script> 
</head> 
<body> 
    <h1>Cookie Order Form</h1> 
    <p>This form is a cookie order form for customers that purchased cookies from Daron's Cookies Company and the following below must be filled out in order for each customer to receive a final message that tells them when their order will be ready.</p> 
    <IMG class="Wrap1" SRC="cookie.gif" alt="cookie"> 
    <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2"> 
    <!--The customer will be sent to the HTML page named "submit.html" after they 
    click the "Submit this Form" button. The code below does this. --> 
    <div> 
     <form id="cookie_form" action="#"> 
      <fieldset class="field_set_1"> 
       <!-- Below sets the title of the form--> 
       <legend>Customer Order Form Information:</legend> 
       <!-- Creates the first left label to specify what should be placed in the text box 
       to the right of the label. The rest below does the same.--> 
       <label for="firstName">First Name:</label> 
       <input type="text" id="firstName" name="firstName"> 
       <span id="firstname_error">*</span><br> 
       <label for="orderNumber">Order Number:</label> 
       <input type="text" id="orderNumber" name="orderNumber"> 
       <span id="orderNumber_error">*</span><br> 
       <label for="date_of_order">Date of Order:</label> 
       <input type="text" id="date_of_order" name="date_of_order"> 
       <span id="date_of_order_error">*</span><br> 
       <label for="email_address">Email Address:</label> 
       <input type="text" id="email_address" name="email_address"> 
       <span id="email_address_error">*</span><br> 
      <label>&nbsp;</label> 
      <input type="button" id="form_submission" value="Submit this form" 
      onclick="displayMessage()"> 
      <p id="generate"></p> 
      </fieldset> 
     </form> 
    </div> 
    <div class="clearfix"> 
    </div> 
    <IMG class="Wrap1" SRC="cookie.gif" alt="cookie"> 
    <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2"> 
<script> 
favorite 
function displayMessage() { 
    var message; 
    var firstName=document.getElementById("firstName").value; 
    switch(firstName) { 
    case "Cherry": 
     message="Thank You Cherry!! Your order should arrive 20 days from February 4, 2017"; 
     break; 
    case "Micheal": 
     message = "Thank You Micheal!! Your order will be coming in two weeks"; 
     break; 
    case "Sandra": 
     message = "Thank You Sandra!! You've got a big order so it will take a month."; 
     break; 
    case "Cookie": 
     message= "Thank You Cookie!! Your order is coming tomorrow. So be at home between 1-2pm." 

    } 
    alert(message); 
} 
</script> 
</body> 
</html> 
+0

Выкинтас тоже не могу использовать внешние js? – Joe

+0

Вам нужен внешний javascript? –

+0

Я сделал внешний, но это не сработало – Joe

0

содержание HTML файла

<!DOCTYPE html> 
<html> 
<head> 
    <title>Cookie Order Form</title> 
    <link rel="stylesheet" href="First_Design.css"> 
    <script src="cookieform.js"></script> 
    <script src="DisplayNames.js"></script> 
</head> 
<body> 
    <h1>Cookie Order Form</h1> 
    <p>This form is a cookie order form for customers that purchased cookies from Daron's Cookies Company and the following below must be filled out in order for each customer to receive a final message that tells them when their order will be ready.</p> 
    <IMG class="Wrap1" SRC="cookie.gif" alt="cookie"> 
    <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2"> 
    <!--The customer will be sent to the HTML page named "submit.html" after they 
    click the "Submit this Form" button. The code below does this. --> 
    <div> 
     <form id="cookie_form" action="#"> 
      <fieldset class="field_set_1"> 
       <!-- Below sets the title of the form--> 
       <legend>Customer Order Form Information:</legend> 
       <!-- Creates the first left label to specify what should be placed in the text box 
       to the right of the label. The rest below does the same.--> 
       <label for="firstName">First Name:</label> 
       <input type="text" id="firstName" name="firstName"> 
       <span id="firstname_error">*</span><br> 
       <label for="orderNumber">Order Number:</label> 
       <input type="text" id="orderNumber" name="orderNumber"> 
       <span id="orderNumber_error">*</span><br> 
       <label for="date_of_order">Date of Order:</label> 
       <input type="text" id="date_of_order" name="date_of_order"> 
       <span id="date_of_order_error">*</span><br> 
       <label for="email_address">Email Address:</label> 
       <input type="text" id="email_address" name="email_address"> 
       <span id="email_address_error">*</span><br> 
      <label>&nbsp;</label> 
      <input type="button" id="form_submission" value="Submit this form" 
      onclick="displayMessage()"> 
      <p id="generate"></p> 
      </fieldset> 
     </form> 
    </div> 
    <div class="clearfix"> 
    </div> 
    <IMG class="Wrap1" SRC="cookie.gif" alt="cookie"> 
    <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2"> 
<script src="FNC.js"></script> 
</body> 
</html> 

Javascript файл "FNC.js" содержание

function displayMessage() { 
    var message; 
    var firstName=document.getElementById("firstName").value; 
    switch(firstName) { 
    case "Cherry": 
     message="Thank You Cherry!! Your order should arrive 20 days from February 4, 2017"; 
     break; 
    case "Micheal": 
     message = "Thank You Micheal!! Your order will be coming in two weeks"; 
     break; 
    case "Sandra": 
     message = "Thank You Sandra!! You've got a big order so it will take a month."; 
     break; 
    case "Cookie": 
     message= "Thank You Cookie!! Your order is coming tomorrow. So be at home between 1-2pm." 

    } 
    alert(message); 
} 

Поместите оба файла в одном каталоге

+0

Спасибо, что он наконец-то работал Vykintas – Joe

Смежные вопросы