2016-11-10 9 views
2

Ich habe den folgenden Code in Front Page getippt und es gibt Fehler Radioknopf Werte in der Anzeige (als nicht definiert):HTML Radiobutton

function f1() { 
 
     var fn = document.frm.T1.value; 
 
     var ln = document.frm.T2.value; 
 
     var ad = document.frm.S1.value; 
 
     var sex = document.frm.R1.value; 
 
     var nat = document.frm.D1.value; 
 
     var typ = document.frm.R2.value; 
 
     var typ1 = document.frm.C1.value; 
 
     var typ2 = document.frm.C2.value; 
 
     var typ3 = document.frm.C3.value; 
 
     var budg = document.frm.R3.value; 
 
     var mail = document.frm.T5.value; 
 
     var mob = document.frm.T3.value; 
 
     var resi = document.frm.T4.value; 
 
     var city = document.frm.D2.value; 
 
     var com = document.frm.S2.value; 
 

 
     document.write("Welcome Dear " + fn + " " + ln + "<br>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " + 
 
      " and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" + 
 
      " You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" + 
 
      " You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com); 
 
    }
body { 
 
    background-color: #222; 
 
}
<p align="center">&nbsp;</p> 
 
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
    </font> 
 
</p> 
 
<p align="center"><span style="background-color: #FFFFFF"> 
 
    <font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and 
 
    out Customer Support Team will contact you shortly!</font></span> 
 
</p> 
 
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF"> 
 
    </font> 
 
</p> 
 
<form method="POST" name="frm" action="--WEBBOT-SELF--"> 
 
    <!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan --> 
 
    <input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"> 
 
    <!--webbot bot="SaveResults" i-checksum="43374" endspan --> 
 
    <div align="left"> 
 
     <table border="1" width="39%"> 
 
      <tr> 
 
       <td colspan="2"> 
 
        <p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF"><b>First Name</b></font> 
 
       </td> 
 
       <td> 
 
        <input type="text" name="T1" size="25"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF"><b>Last Name</b></font> 
 
       </td> 
 
       <td> 
 
        <input type="text" name="T2" size="25"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF"><b>Postal Address</b></font> 
 
       </td> 
 
       <td> 
 
        <textarea rows="2" name="S1" cols="20"></textarea> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF"><b>Gender</b></font> 
 
       </td> 
 
       <td> 
 
        <input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE 
 
    \t \t \t \t </font> 
 
        <input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF"> 
 
    \t \t \t \t FEMALE</font> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF"><b>Nationality</b></font> 
 
       </td> 
 
       <td> 
 
        <select size="1" name="D1"> 
 
         <option selected value="Indian">INDIAN</option> 
 
         <option value="British">BRITISH</option> 
 
         <option value="Canadian">CANADIAN</option> 
 
         <option value="Chinese">CHINESE</option> 
 
         <option value="Japanese">JAPANESE</option> 
 
         <option value="GCC">MID EASTERN</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF"><b>Looking For</b></font> 
 
       </td> 
 
       <td> 
 
        <input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY 
 
    \t \t \t \t <input type="radio"  name="R2" value="Lease">LEASE</font> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF"><b>Type</b></font> 
 
       </td> 
 
       <td> 
 
        <input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1 
 
    \t \t \t \t BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK 
 
    \t \t \t \t <input type="checkbox" name="C3" value="3 BHK">3 BHK</font> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF"><b>Budget</b></font> 
 
       </td> 
 
       <td> 
 
        <input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30 
 
    \t \t \t \t LAKHS</font> 
 
        <p> 
 
         <input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60 
 
    \t \t \t \t LAKHS</font> 
 
        </p> 
 
        <p> 
 
         <input type="radio" name="R3" value="MORE 
 
    \t \t \t \t THAN 60 LAKHS"><font color="#FFFFFF">MORE 
 
    \t \t \t \t THAN 60 LAKHS</font> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF">E-Mail ID</font> 
 
       </td> 
 
       <td> 
 
        <input type="text" name="T5" size="20"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF">Phone Number</font> 
 
       </td> 
 
       <td> 
 
        <input type="text" name="T3" size="20"> 
 
        <font color="#FFFFFF">Mob</font> 
 
        <p> 
 
         <input type="text" name="T4" size="20"><font color="#FFFFFF"> 
 
    \t \t \t \t Res</font> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF"><b>Preferred City</b></font> 
 
       </td> 
 
       <td> 
 
        <select size="1" name="D2"> 
 
         <option selected value="Mumbai">MUMBAI</option> 
 
         <option value="Bangalore">BANGALORE</option> 
 
         <option value="Pune">PUNE</option> 
 
         <option value="Ahmedabad">AHMEDABAD</option> 
 
         <option value="Kochi">KOCHI</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td width="147"><font color="#FFFFFF"><b>Comments</b></font> 
 
       </td> 
 
       <td> 
 
        <textarea rows="2" name="S2" cols="20"></textarea> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    <p align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <input type="submit" value="Inquire" name="B1" onclick="f1()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <input type="reset" value="Reset" name="B2"> 
 
    </p> 
 
</form> 
 

 
<p align="center"> 
 
    <a href="Home.htm"> 
 
     <img border="0" src="home_1.png" width="75" height="72"> 
 
    </a> 
 
</p>

Rest der Dinge ist außer Radio arbeiten Tasten. Bitte helfen Sie mit einer Lösung für das gleiche. Vielen Dank im Voraus

+1

Sie haben noch 'SEX' oder' typ' im 'document.write()'. Der Budget Radio Button funktioniert, weil Sie 'budg' schreiben. – Barmar

Antwort

0
<form> 
    What color do you prefer?<br> 
    <input type="radio" name="colors" id="red">Red<br> 
    <input type="radio" name="colors" id="blue">Blue 
</form> 

<button onclick="check()">Check "Red"</button> 
<button onclick="uncheck()">Uncheck "Red"</button> 

<script> 
function check() { 
    document.getElementById("red").checked = true; 
} 
function uncheck() { 
    document.getElementById("red").checked = false; 
} 
</script> 

Link: - http://www.w3schools.com/jsref/prop_radio_checked.asp

0

Alle Radiobuttons hat den gleichen Namen. Sie müssen also das markierte Optionsfeld mit document.querySelector('input[name=R1]:checked').value auswählen. Ich habe sogar für nicht ausgewählte Checkbox Wert als "Empty"

function f1() { 
 
    var fn = document.frm.T1.value; 
 
    var ln = document.frm.T2.value; 
 
    var ad = document.frm.S1.value; 
 
    var sex = document.frm.R1.value; 
 
    var nat = document.frm.D1.value; 
 
    var typ = document.frm.R2.value; 
 
    var typ1 = document.frm.C1.value; 
 
    var typ2 = document.frm.C2.value; 
 
    var typ3 = document.frm.C3.value; 
 
    var budg = document.frm.R3.value; 
 
    var mail = document.frm.T5.value; 
 
    var mob = document.frm.T3.value; 
 
    var resi = document.frm.T4.value; 
 
    var city = document.frm.D2.value; 
 
    var com = document.frm.S2.value; 
 

 
    document.write("Welcome Dear " + fn + " " + ln + "<br/>" + "Your Sex is " + ((document.querySelector('input[name=R1]:checked'))?document.querySelector('input[name=R1]:checked').value:"Empty") + "<br/>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " + 
 
    " and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" + 
 
    " You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" + 
 
    " You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com); 
 
}
body { 
 
    background-color: #222; 
 
    }
<p align="center">&nbsp;</p> 
 
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
    </font> 
 
</p> 
 
<p align="center"><span style="background-color: #FFFFFF"> 
 
    <font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and 
 
    out Customer Support Team will contact you shortly!</font></span> 
 
</p> 
 
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF"> 
 
    </font> 
 
</p> 
 
<form method="POST" name="frm" action="--WEBBOT-SELF--"> 
 
    <!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan --> 
 
    <input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"> 
 
    <!--webbot bot="SaveResults" i-checksum="43374" endspan --> 
 
    <div align="left"> 
 
    <table border="1" width="39%"> 
 
     <tr> 
 
     <td colspan="2"> 
 
      <p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF"><b>First Name</b></font> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="T1" size="25"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF"><b>Last Name</b></font> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="T2" size="25"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF"><b>Postal Address</b></font> 
 
     </td> 
 
     <td> 
 
      <textarea rows="2" name="S1" cols="20"></textarea> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF"><b>Gender</b></font> 
 
     </td> 
 
     <td> 
 
      <input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE 
 
    \t \t \t \t </font> 
 
      <input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF"> 
 
    \t \t \t \t FEMALE</font> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF"><b>Nationality</b></font> 
 
     </td> 
 
     <td> 
 
      <select size="1" name="D1"> 
 
      <option selected value="Indian">INDIAN</option> 
 
      <option value="British">BRITISH</option> 
 
      <option value="Canadian">CANADIAN</option> 
 
      <option value="Chinese">CHINESE</option> 
 
      <option value="Japanese">JAPANESE</option> 
 
      <option value="GCC">MID EASTERN</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF"><b>Looking For</b></font> 
 
     </td> 
 
     <td> 
 
      <input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY 
 
    \t \t \t \t <input type="radio"  name="R2" value="Lease">LEASE</font> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF"><b>Type</b></font> 
 
     </td> 
 
     <td> 
 
      <input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1 
 
    \t \t \t \t BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK 
 
    \t \t \t \t <input type="checkbox" name="C3" value="3 BHK">3 BHK</font> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF"><b>Budget</b></font> 
 
     </td> 
 
     <td> 
 
      <input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30 
 
    \t \t \t \t LAKHS</font> 
 
      <p> 
 
      <input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60 
 
    \t \t \t \t LAKHS</font> 
 
      </p> 
 
      <p> 
 
      <input type="radio" name="R3" value="MORE 
 
    \t \t \t \t THAN 60 LAKHS"><font color="#FFFFFF">MORE 
 
    \t \t \t \t THAN 60 LAKHS</font> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF">E-Mail ID</font> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="T5" size="20"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF">Phone Number</font> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="T3" size="20"> 
 
      <font color="#FFFFFF">Mob</font> 
 
      <p> 
 
      <input type="text" name="T4" size="20"><font color="#FFFFFF"> 
 
    \t \t \t \t Res</font> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF"><b>Preferred City</b></font> 
 
     </td> 
 
     <td> 
 
      <select size="1" name="D2"> 
 
      <option selected value="Mumbai">MUMBAI</option> 
 
      <option value="Bangalore">BANGALORE</option> 
 
      <option value="Pune">PUNE</option> 
 
      <option value="Ahmedabad">AHMEDABAD</option> 
 
      <option value="Kochi">KOCHI</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td width="147"><font color="#FFFFFF"><b>Comments</b></font> 
 
     </td> 
 
     <td> 
 
      <textarea rows="2" name="S2" cols="20"></textarea> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
    <p align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
    <input type="submit" value="Inquire" name="B1" onclick="f1()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
    <input type="reset" value="Reset" name="B2"> 
 
    </p> 
 
</form> 
 

 
<p align="center"> 
 
    <a href="Home.htm"> 
 
    <img border="0" src="home_1.png" width="75" height="72"> 
 
    </a> 
 
</p>

geprüft
0

Sie dies tun können, entweder durch jQuery oder jsvascript

  1. In jQuery $('input[name="R1"]:checked').val(); hier R1 ist Ihr Checkbox Name
  2. In Javascript erhalten Sie die Dom Elemente nach Namen und durchlaufen Sie die Elemente, um die Auswahl zu erhalten.

Ich habe ein Beispiel Code-Snippet beigefügt.

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
    <script> 
 
     function ChangeSelection() { 
 
      //Using Jquery 
 
      var selection = $('input[name="R1"]:checked').val(); 
 
      console.log("jQuery Result - " + selection); 
 

 
      //Javascript 
 
      var radios = document.getElementsByName('R1'); 
 
      for (var i = 0, length = radios.length; i < length; i++) { 
 
       if (radios[i].checked) { 
 
        //Selected Radio 
 
        selection = radios[i].value; 
 
        // only one radio can be logically checked, don't check the rest 
 
        break; 
 
       } 
 
      } 
 
      console.log("JavaScript Result - " + selection); 
 
     } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <input type="radio" value="MALE" name="R1" onclick="ChangeSelection()"><font>MALE</font> 
 
    <input type="radio" value="FEMALE" name="R1" onclick="ChangeSelection()"><font>FEMALE</font> 
 
</body> 
 

 
</html>