Wie validiere ich, wenn RadioButton ausgewählt ist?

Question

Ich versuche zu validieren, wenn ich eine Radiobutton in einem JSP-Formular auswählen und die Auswahl aktualisieren Sie meine Seite mit dem Inhalt, den ich möchte. Ich plane, diese Radiobuttons als eine Art der Auswahl von Kategorien zu verwenden.

Das ist meine Form Code:

<form name="login" action="procesarAdd.do"> 
    <br> 

    <b>CATEGORIA</b> 
    <br> 
    <input type="radio" name="g1" value="per" checked="checked" />PERFUME 
    <input type="radio" name="g1" value="joy" />JOYAS 
    <input type="radio" name="g1" value="car" />BOLSO CARTERAS 

     <table border="1"> 
      <tbody> 
       <tr> 
        <td>ID Producto</td> 
        <td><input type="text" name="id" value="" /></td> 
       </tr> 
       <tr> 
        <td>Nombre</td> 
        <td><input type="text" name="nombre" value="" /></td> 
       </tr> 
       <tr> 
        <td>Stock</td> 
        <td><input type="text" name="stock" value="" /></td> 
       </tr> 
       <tr> 
        <td>Precio</td> 
        <td><input type="text" name="precio" value="" /></td> 
       </tr>      
      </tbody> 
     </table> 

    <br> 

ich verschiedene Bilder je nach Auswahl des Optionsfelds, und nehmen Sie dann alle Daten auf dem Formular zeigen, müssen ein neues Produkt in eine Datenbank zu erstellen. Ich habe keine Kenntnisse von JavaScript und ich frage mich, ob dies mit einfachem Java oder HTML getan werden kann.

Answer 1

Sie können unter diesen mit jQuery als Show tun:

HTML -

<form id="myForm"> 
    <input type="radio" name="radioName" value="1" /> 1 <br /> 
    <input type="radio" name="radioName" value="2" /> 2 <br /> 
    <input type="radio" name="radioName" value="3" /> 3 <br /> 
</form> 

jQuery -

$(function(){ 
    $('#myForm input').on('change', function() { 
    alert($('input[name=radioName]:checked', '#myForm').val()); 
    }); 
}); 

Statt die Warnung anzuzeigen, jetzt können Sie nennen, wie AJAX-Request Sie möchte oder machen Sie einen Funktionsaufruf, den Sie an Ihr Backend richten möchten.

Sie können hier mehr experimentieren: http://plnkr.co/edit/gist:2006604?p=preview. Sie können mehr über jQuery's lesen: checked pseudo-class hier: https://api.jquery.com/checked-selector/.

Answer 2

Sie können Ihre Geschäftslogik in onChange Funktion schreiben, wie unten

 <form name="login" action="procesarAdd.do"> 
     <br> 

     <b>CATEGORIA</b> 
     <br> 
     <input type="radio" name="g1" value="per" checked="checked" onchange="product(this.value)"/>PERFUME 
     <input type="radio" name="g1" value="joy" onchange="product(this.value)"/>JOYAS 
     <input type="radio" name="g1" value="car" onchange="product(this.value)"/>BOLSO CARTERAS 

      <table border="1"> 
       <tbody> 
        <tr> 
         <td>ID Producto</td> 
         <td><input type="text" name="id" id ="field1" value="" /></td> 
        </tr> 
        <tr> 
         <td>Nombre</td> 
         <td><input type="text" name="nombre" id ="field2" value="" /></td> 
        </tr> 
        <tr> 
         <td>Stock</td> 
         <td><input type="text" name="stock" id ="field3" value="" /></td> 
        </tr> 
        <tr> 
         <td>Precio</td> 
         <td><input type="text" name="precio" id ="field4" value="" /></td> 
        </tr>      
       </tbody> 
      </table> 

Funktion Javascript gezeigt:

        function product(x){ 
         alert("Product Name : " +x); 
       if(x=="per"){ 
       document.getElementById("myImg").src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcScKsjtuajfWrNvk2pXTxf4Et2dPoCEsF58XVetpBrVCpDnLmAkVg" 

       } 
       if(x=="joy"){ 
       document.getElementById("myImg").src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQM3y6qUIwqIr164GbERvTyOXNMBYcWOueodxxwxzug16oFalPldiHJQV1r" 
       } 
       if(x=="car"){ 

       document.getElementById("myImg").src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS3P65pTpiNFx2psFeqOoF6iuXzQErc_gBUmAf6bn1846ghx1TrOw" 
       } 

         } 

codepen URL für Ihre Referenz: http://codepen.io/nagasai/pen/KMwGMg?editors=1010

Bitte lassen Sie mich wissen, wenn Sie weitere Informationen benötigen