时间戳

首页 > 解决方案 > Onclick() 函数在警报窗口上显示选定的选项

javascript - Onclick() 函数在警报窗口上显示选定的选项

问题描述

如果可能的话，我需要做的是为“提交”按钮分配一个功能，该按钮显示一个包含所有选定和键入的值的警报窗口。

<form><fieldset><legend>Στοιχεία Καταχώρησης Πελάτη</legend><ul>
<li><label for="firstname">Firstname</label><input value="Όνομα" type="text" id="firstname" name="firstname"></li>
<li><label for="lastname">Surname</label><input value="Επίθετο" type="text" id="lastname" name="lastname"></li>
<li><label for="email">E-mail</label><input vale="E-mail" type="email" id="email" name="E-mail" placeholder="example@unipi.gr"></li>
<li>Επιλογή Βιβλίων:<select multiple size="15" name="selectbooks">
                 <optgroup label="Sci-fi">
                  <option>Sci-fi Book 1</option>
                  <option>Sci-fi Book 2</option>
                  <option>Sci-fi Book 3</option></optgroup>
                 <optgroup label="Ιστορικά">
                  <option>Ιστορικό Book 1</option>
                  <option>Ιστορικό Book 2</option></optgroup>
                 <optgroup label="Επιστημονικά">
                  <option>Επιστημονικό Book 1</option>
                  <option>Επιστημονικό Book 2</option></optgroup>
                 <optgroup label="Παιδικα"</optgroup>
                  <option>Παιδικό Book 1</option>
                  <option>Παιδικό Book 2</option></optgroup></li>
                  <input type="reset" id="btnres" value="Reset">
                  <input type="submit" id="sbmt" value="Submit" onclick="choiceresult()">                
                  </form></fieldset>

标签： javascripthtmlwebpage

解决方案

function choiceresult(){
  let firstname = document.querySelector("#firstname").value
  let lastname = document.querySelector("#lastname").value
  let email = document.querySelector("#email").value
  let books = document.querySelector("#selectbooks");
  // added multiple selected options.
  let selected_books = [...books].filter((option) => option.selected).map(option => option.value);
  alert(`${firstname} , ${lastname} , ${email} , ${selected_books} `) ;
}


<form>
<fieldset>
    <legend>Στοιχεία Καταχώρησης Πελάτη</legend>
    <ul>
        <li>
            <label for="firstname">Firstname</label>
            <input value="Όνομα" type="text" id="firstname" name="firstname">
        </li>
        <li>
            <label for="lastname">Surname</label>
            <input value="Επίθετο" type="text" id="lastname" name="lastname">
        </li>
        <li>
            <label for="email">E-mail</label>
            <input vale="E-mail" type="email" id="email" name="E-mail" placeholder="example@unipi.gr">
        </li>
        <li>Επιλογή Βιβλίων:
            <select multiple size="15" name="selectbooks" id="selectbooks"><!-- modify here-->
                <optgroup label="Sci-fi">
                    <option>Sci-fi Book 1</option>
                    <option>Sci-fi Book 2</option>
                    <option>Sci-fi Book 3</option>
                </optgroup>
                <optgroup label="Ιστορικά">
                    <option>Ιστορικό Book 1</option>
                    <option>Ιστορικό Book 2</option>
                </optgroup>
                <optgroup label="Επιστημονικά">
                    <option>Επιστημονικό Book 1</option>
                    <option>Επιστημονικό Book 2</option>
                </optgroup>
                <optgroup label="Παιδικα" </optgroup>
                    <option>Παιδικό Book 1</option>
                    <option>Παιδικό Book 2</option>
                </optgroup>
        </li>
        <input type="reset" id="btnres" value="Reset">
        <input type="button" id="sbmt" value="Submit" onclick="choiceresult()"> <!-- modify here-->
</form>

推荐阅读