Afficher les détails de 3 menus déroulants

J'ai une page sur un site Web que je fais pour le collège et j'ai un problème avec la page d'inscription. Je veux une nouvelle fenêtre pour ouvrir avec les détails que j'ai entrés. Ci-dessous le code qui m'a été donné qui montre les données saisies dans un menu déroulant mais l'anniversaire a 3 menus, un pour le jour, le mois et l'année. J'ai besoin d'aide pour recevoir le code de ces 3 menus déroulants plutôt qu'un seul. Merci de votre aide!Afficher les détails de 3 menus déroulants

function getdropdownvalue() 
    { 
     var range = document.form1.DOBDay.selectedIndex 
     return document.form1.DOBDay.options[range].value 
    } 



     <body> 
     <form action="" method="post" name="form1" onsubmit="checkdetails()"> 
     <table bgcolor="white" width="700" border="0" align="center"> 
     <col width="200"> 
     <col width="200"> 


     <tr> 
     <th colspan = "2" align = "center" bgcolor="grey"> Fill the form to sign up. </th> 
     </tr> 
    <tr> 
     <td>&nbsp;</td> 
     </tr> 


     <tr> 
     <td colspan="2" style="font-size:12px">Fields marked with * are mandatory</td> 
     </tr> 


     <tr> 
     <td>&nbsp;</td> 
     </tr> 


     <tr> 
      <td>Name*</td> 
      <td>Surname*</td> 
     </tr> 


     <tr> 
      <td><label> 
      <input type="text" name="txtname" id="txtname" class="info" /> 
      <td><label> 
      <input type="text" name="txtsurname" id="txtsurname" class="info" /> 
      </label></td> 
     </tr> 

     <tr> 
     <td> Create Username*</td> 
     <td> Birthday</td> 
     </tr> 

     <tr> 
     <td><label> 
     <input type="text" name="txtusername" id="txtusername" class="info"/> 
     </label></td> 




     <td><select name="DOBMonth"> 
     <option> Month </option> 
     <option value="January">January</option> 
     <option value="Febuary">Febuary</option> 
     <option value="March">March</option> 
     <option value="April">April</option> 
     <option value="May">May</option> 
     <option value="June">June</option> 
     <option value="July">July</option> 
     <option value="August">August</option> 
     <option value="September">September</option> 
     <option value="October">October</option> 
     <option value="November">November</option> 
     <option value="December">December</option> 
    </select> 

    <select name="DOBDay"> 
     <option> Day </option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
     <option value="9">9</option> 
     <option value="10">10</option> 
     <option value="11">11</option> 
     <option value="12">12</option> 
     <option value="13">13</option> 
     <option value="14">14</option> 
     <option value="15">15</option> 
     <option value="16">16</option> 
     <option value="17">17</option> 
     <option value="18">18</option> 
     <option value="19">19</option> 
     <option value="20">20</option> 
     <option value="21">21</option> 
     <option value="22">22</option> 
     <option value="23">23</option> 
     <option value="24">24</option> 
     <option value="25">25</option> 
     <option value="26">26</option> 
     <option value="27">27</option> 
     <option value="28">28</option> 
     <option value="29">29</option> 
     <option value="30">30</option> 
     <option value="31">31</option> 
    </select> 

    <select name="DOBYear"> 
     <option> Year </option> 
     <option value="2016">2016</option> 
     <option value="2015">2015</option> 
     <option value="2014">2014</option> 
     <option value="2013">2013</option> 
     <option value="2012">2012</option> 
     <option value="2011">2011</option> 
     <option value="2010">2010</option> 
     <option value="2009">2009</option> 
     <option value="2008">2008</option> 
     <option value="2007">2007</option> 
     <option value="2006">2006</option> 
     <option value="2005">2005</option> 
     <option value="2004">2004</option> 
     <option value="2003">2003</option> 
     <option value="2002">2002</option> 
     <option value="2001">2001</option> 
     <option value="2000">2000</option> 
     <option value="1999">1998</option> 
     <option value="1998">1998</option> 
     <option value="1997">1997</option> 
     <option value="1996">1996</option> 
     <option value="1995">1995</option> 
     <option value="1994">1994</option> 
     <option value="1993">1993</option> 
     <option value="1992">1992</option> 
     <option value="1991">1991</option> 
     <option value="1990">1990</option> 
     <option value="1989">1989</option> 
     <option value="1988">1988</option> 
     <option value="1987">1987</option> 
     <option value="1986">1986</option> 
     <option value="1985">1985</option> 
     <option value="1984">1984</option> 
     <option value="1983">1983</option> 
     <option value="1982">1982</option> 
     <option value="1981">1981</option> 
     <option value="1980">1980</option> 
     <option value="1979">1979</option> 
     <option value="1978">1978</option> 
     <option value="1977">1977</option> 
     <option value="1976">1976</option> 
     <option value="1975">1975</option> 
     <option value="1974">1974</option> 
     <option value="1973">1973</option> 
     <option value="1972">1972</option> 
     <option value="1971">1971</option> 
     <option value="1970">1970</option> 
     <option value="1969">1969</option> 
     <option value="1968">1968</option> 
     <option value="1967">1967</option> 
     <option value="1966">1966</option> 
     <option value="1965">1965</option> 
     <option value="1964">1964</option> 
     <option value="1963">1963</option> 
     <option value="1962">1962</option> 
     <option value="1961">1961</option> 
     <option value="1960">1960</option> 
     <option value="1959">1959</option> 
     <option value="1958">1958</option> 
     <option value="1957">1957</option> 
     <option value="1956">1956</option> 
     <option value="1955">1955</option> 
     <option value="1954">1954</option> 
     <option value="1953">1953</option> 
     <option value="1952">1952</option> 
     <option value="1951">1951</option> 
     <option value="1950">1950</option> 
     <option value="1949">1949</option> 
     <option value="1948">1948</option> 
     <option value="1947">1947</option> 
    </select> 




     <tr> 
      <td>Email*</td> 
      <td>Confirm Email*</td> 
     </tr> 


     <tr> 
      <td><label> 
      <input type="text" name="txtemail" id="txtemail" class="info" onchange="ValidateEmail(txtemail)" /> 
      <td><label> 
      <input type="text" name="txtemail2" id="txtemail2" class="info" onchange="ValidateEmail2(txtemail2)"/> 
      </label></td> 
     </tr> 


     <tr> 
      <td>Password*</td> 
      <td>Confirm Pasword*</td> 
     </tr> 


     <tr> 
      <td><label> 
      <input type="password" name="txtpassword" id="txtpassword" class="info"/> 
      <td><label> 
      <input type="password" name="txtpassword2" id="txtpassword2" class="info"/> 
      </label></td> 
     </tr> 


     <td colspan="2" style="font-size:12px">**Passwords must be at least 8 characters in lenght.</td> 
     </tr> 

     <tr> 
     <td>&nbsp;</td> 
     </tr> 


      <tr> 
      <td colspan="2"> 
      <label> 
       <input type="radio" name="terms" value="terms" id="terms" /> 
       I agree to the Terms and Conditions</label> 
      </td></tr> 
      <br><br><br> 
      <tr> 
      <td colspan="2"><label> 
       <input type="radio" name="notify" value="notify" id="notify" /> 
       I want to receive notifications by text/email about new products in stock.</label> 
       </td> 
     </tr> 


     <tr> 
     <td>&nbsp;</td> 
     </tr> 

     <tr> 
     <td><label> 
      <input type="submit" name="Login" id="Login" value="Login" onclick="checkdetails()" /> 
     </label></td> 
     <td><label> 
      <input type="reset" name="Reset" id="Reset" value="Reset" /> 
     </label></td> 
     </tr> 

     <tr> 
     <td>&nbsp;</td> 
     </tr> 
     </table> 
    </form>

Source

2016-04-21 Shauna Goodman Fitzpatrick

Votre question n'est pas claire, vous juste wan t pour obtenir les valeurs de la liste déroulante en utilisant js? –

Ouais désolé. Comme si je suis entré 04 02 1994 dans ces trois menus déroulants id veulent qu'il ouvre une fenêtre en disant quelque chose comme vous avez entré 04 02 1994. –

Vérifiez la réponse posté, je pense que ce que vous vouliez. –

Procurez-vous la valeur de tous les éléments dont vous avez besoin, un par un (puisque vous dites que vous voulez le mois et le jour en numérique format j'obtiens l'index de ces éléments pas la valeur)

function getdropdownvalue() 
{ 
     var month = document.form1.DOBMonth.selectedIndex; 
     var day = document.form1.DOBDay.selectedIndex; 
     var year = document.form1.DOBYear.options[document.form1.DOBDay.selectedIndex].value; 
     alert(month+' '+day+' '+year); 
     return month+' '+day+' '+year; 
}

Source

2016-04-21 15:21:16

Merci un million cela a fait ce dont j'avais besoin! –

Avant de vous donner la solution pour cela, j'ai remarqué dans votre code qui vous manque quelques balises de fermeture, le remplissage des menus déroulants dans votre code, l'utilisation de la table pour le formatage, etc. Ce sont quelques suggestions:

Remplissez les listes déroulantes à l'aide de JS.
Utilisez un bon éditeur qui vous aide à identifier les balises manquées.
Ajoutez id à vos instructions select/input pour simplifier l'utilisation de JS.
Vous un cadre comme Bootstrap de sorte qu'il est facile de formater votre page et également éviter l'utilisation de <table> pour le formatage de la page.

C'est un simple extrait pour vous:

function a() { 
 
    var m = document.getElementById("DOBMonth"); 
 
    var y = document.getElementById("DOBYear"); 
 
    var d = document.getElementById("DOBDay"); 
 
    alert(" D:"+d.options[d.selectedIndex].value+" M:"+m.options[m.selectedIndex].value+" Y:"+y.options[m.selectedIndex].value); 
 
}

<select name="DOBMonth" id="DOBMonth"> 
 
    <option> Month </option> 
 
    <option value="January">January</option> 
 
    <option value="Febuary">Febuary</option> 
 
    <option value="March">March</option> 
 
    <option value="April">April</option> 
 
    <option value="May">May</option> 
 
    <option value="June">June</option> 
 
    <option value="July">July</option> 
 
    <option value="August">August</option> 
 
    <option value="September">September</option> 
 
    <option value="October">October</option> 
 
    <option value="November">November</option> 
 
    <option value="December">December</option> 
 
</select> 
 

 
<select name="DOBDay" id="DOBDay"> 
 
    <option> Day </option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    <option value="6">6</option> 
 
    <option value="7">7</option> 
 
    <option value="8">8</option> 
 
    <option value="9">9</option> 
 
    <option value="10">10</option> 
 
    <option value="11">11</option> 
 
    <option value="12">12</option> 
 
    <option value="13">13</option> 
 
    <option value="14">14</option> 
 
    <option value="15">15</option> 
 
    <option value="16">16</option> 
 
    <option value="17">17</option> 
 
    <option value="18">18</option> 
 
    <option value="19">19</option> 
 
    <option value="20">20</option> 
 
    <option value="21">21</option> 
 
    <option value="22">22</option> 
 
    <option value="23">23</option> 
 
    <option value="24">24</option> 
 
    <option value="25">25</option> 
 
    <option value="26">26</option> 
 
    <option value="27">27</option> 
 
    <option value="28">28</option> 
 
    <option value="29">29</option> 
 
    <option value="30">30</option> 
 
    <option value="31">31</option> 
 
</select> 
 

 
<select name="DOBYear" id="DOBYear"> 
 
    <option> Year </option> 
 
    <option value="2016">2016</option> 
 
    <option value="2015">2015</option> 
 
    <option value="2014">2014</option> 
 
    <option value="2013">2013</option> 
 
    <option value="2012">2012</option> 
 
    <option value="2011">2011</option> 
 
    <option value="2010">2010</option> 
 
    <option value="2009">2009</option> 
 
    <option value="2008">2008</option> 
 
    <option value="2007">2007</option> 
 
    <option value="2006">2006</option> 
 
    <option value="2005">2005</option> 
 
    <option value="2004">2004</option> 
 
    <option value="2003">2003</option> 
 
    <option value="2002">2002</option> 
 
    <option value="2001">2001</option> 
 
    <option value="2000">2000</option> 
 
    <option value="1999">1998</option> 
 
    <option value="1998">1998</option> 
 
    <option value="1997">1997</option> 
 
    <option value="1996">1996</option> 
 
    <option value="1995">1995</option> 
 
    <option value="1994">1994</option> 
 
    <option value="1993">1993</option> 
 
    <option value="1992">1992</option> 
 
    <option value="1991">1991</option> 
 
    <option value="1990">1990</option> 
 
    <option value="1989">1989</option> 
 
    <option value="1988">1988</option> 
 
    <option value="1987">1987</option> 
 
    <option value="1986">1986</option> 
 
    <option value="1985">1985</option> 
 
    <option value="1984">1984</option> 
 
    <option value="1983">1983</option> 
 
    <option value="1982">1982</option> 
 
    <option value="1981">1981</option> 
 
    <option value="1980">1980</option> 
 
    <option value="1979">1979</option> 
 
    <option value="1978">1978</option> 
 
    <option value="1977">1977</option> 
 
    <option value="1976">1976</option> 
 
    <option value="1975">1975</option> 
 
    <option value="1974">1974</option> 
 
    <option value="1973">1973</option> 
 
    <option value="1972">1972</option> 
 
    <option value="1971">1971</option> 
 
    <option value="1970">1970</option> 
 
    <option value="1969">1969</option> 
 
    <option value="1968">1968</option> 
 
    <option value="1967">1967</option> 
 
    <option value="1966">1966</option> 
 
    <option value="1965">1965</option> 
 
    <option value="1964">1964</option> 
 
    <option value="1963">1963</option> 
 
    <option value="1962">1962</option> 
 
    <option value="1961">1961</option> 
 
    <option value="1960">1960</option> 
 
    <option value="1959">1959</option> 
 
    <option value="1958">1958</option> 
 
    <option value="1957">1957</option> 
 
    <option value="1956">1956</option> 
 
    <option value="1955">1955</option> 
 
    <option value="1954">1954</option> 
 
    <option value="1953">1953</option> 
 
    <option value="1952">1952</option> 
 
    <option value="1951">1951</option> 
 
    <option value="1950">1950</option> 
 
    <option value="1949">1949</option> 
 
    <option value="1948">1948</option> 
 
    <option value="1947">1947</option> 
 
</select> 
 

 
<button onclick="a()">Click</button>

Source

2016-04-21 15:16:43

cela semble juste, mais ne fonctionnera toujours pas dans mon code. –

ajouter des identifiants aux '

Afficher les détails de 3 menus déroulants

Répondre