Question

我尝试验证何时在JSP表单中选择单选按钮并使选择使用我想要的内容刷新我的页面。我计划使用这些无线电按钮作为选择类别的方式。

这是我的表单代码：

<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>

我需要根据单选按钮的选择显示不同的图像，然后获取表单上的所有信息以在DataBase中创建新产品。我不了解JavaScript，我想知道是否可以用普通的Java或HTML来完成。

Answer 1

您可以使用jQuery执行此操作，如下所示：

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()); 
  });
});

现在您可以调用您想要制作的任何AJAX请求或者您希望向后端发出的任何函数调用，而不是显示警报。

您可以在此处进行更多实验：http://plnkr.co/edit/gist:2006604?p=preview。你可以在这里阅读更多关于jQuery的：checked伪类：https://api.jquery.com/checked-selector/。

Answer 2

您可以在onchange函数中编写业务逻辑，如下所示

       <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>

Javascript功能：

                                 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网址供您参考：http://codepen.io/nagasai/pen/KMwGMg?editors=1010

如果您需要任何进一步的详细信息，请与我们联系

如何验证选择RadioButton的时间？

2 个答案: