Question

我的问题很简单，我想显示一个表单而不是目前的两个表单，我的意思是我想隐藏或显示一些字段，具体取决于选择当选择个人时，我想显示4个字段（姓名，姓名，afm，电子邮件），当选择公司时，我想隐藏（姓名，姓氏）并显示公司名称输入字段并保留afm，电子邮件输入字段。所以使用一个表格！而不是两个。目前我的代码有两个表格...正在运行..但我想使用一个表单，所以这里是我的代码fquery jquery

   <script type="text/javascript">
    $(document).ready(function(){
    $("input[name$='forma']").click(function() {
    var formma = $(this).val();
    $("div.desc").hide();
    $("#Forma" + formma).show();
      });
    });
   </script>

和html与2个表格，但正如我所说，我想要一个表格而不是因为将来使用将添加更多的字段！

    <div class="filtering">         
      <div id="myFormGroup">    
Individual<input type="radio" name="forma" checked="checked" value="2"  />    
Company<input type="radio" name="forma" value="3" />    
   <div id="Forma2" class="desc">
    <div class="idiotisReg">
     <form id="frmIdiotisCompany" name="frmIdiotisCompany" onSubmit="return checkForm()" method="post" target="_top">             
        <table width="85%" border="0">
           <tr>
             <th scope="col"></th>
             <th scope="col"><span id="idiotisNa">Individual Form</span></th>
            </tr>
            <tr>
             <th scope="col"><span id="idiotisNa">Name</span>:</th>
             <th scope="col"><input type="text" size="75" id="individualName" name="individualName"></th>
           </tr>
           <tr>
             <th scope="col"><span id="idiotisSu">Surname</span>:</th>
             <th scope="col"><input type="text" size="75" id="individualSurname" name="individualSurname"></th>
           </tr>
           <tr>
             <th scope="col"><span id="idiotisAf">AFM</span>:</th>
             <th scope="col"><input type="text" size="75" id="Afm" name="Afm"></th>
           </tr>
           <tr>
             <th scope="col"><span id="idiotisEm">Email</span>:</th>
             <th scope="col"><input type="text" size="75" id="Email" name="idiotisCompanyEmail"></th>
           </tr>
           <tr>
             <th height="54" scope="col"></br></th>
            <th scope="col"><button name="Submit" type="submit" id="Submit" style="text-align: right" >Submit</button></br></th>
           </tr>
         </table>
    </form>
   </div>
  </div>
     <div id="Forma3" class="desc" style="display: none;">
     <div class="idiotisReg">
     <form id="frmIdiotisCompany" name="frmIdiotisCompany" onSubmit="return checkForm()" method="post" target="_top">             
        <table width="85%" border="0">
           <tr>
             <th scope="col"></th>
             <th scope="col"><span id="idiotisNa">Company Form</span></th>
           </tr>
            <tr>
             <th scope="col"><span id="idiotisNa">Company Name</span>:</th>
             <th scope="col"><input type="text" size="75" id="CompanyName" name="CompanyName"></th>
           </tr>
           <tr>
             <th scope="col"><span id="idiotisAf">AFM</span>:</th>
             <th scope="col"><input type="text" size="75" id="Afm" name="Afm"></th>
           </tr>
           <tr>
             <th scope="col"><span id="idiotisEm">Email</span>:</th>
             <th scope="col"><input type="text" size="75" id="Email" name="Email"></th>
           </tr>
           <tr>
             <th height="54" scope="col"></br></th>
            <th scope="col"><button name="Submit" type="submit" id="Submit" style="text-align: right" >Submit</button></br></th>
           </tr>
         </table>
    </form>
</div>
</div>

我相信我必须在html中改变我的jquery和我的divs但是它是什么？任何帮助都会非常感激

Answer 1

在查看代码后，我发现了一些语法错误。试试这个：

<script type="text/javascript">
    $(document).ready(function(){
       $("input[name='forma']").click(function(){
          var formma = $(this).val();
          $("div.desc").hide();
          $("#Forma" + formma).show();
       });
   });
</script>

Answer 2

好吧我设法用一张表格做到了！通过将jquery更改为（以防万一其他人需要它..

   //showhide function on the 1 forma with 2 divs
   $("input[name$='type']").click(function(){
   var value = $(this).val();
  if(value=='Individual') {
   // $("#Individual_box").show();
  $("#Individual_box").slideDown("fast"); //Slide Down Effect
 $("#Company_box").hide();
 }
 else if(value=='Company') {
// $("#Company_box").show();
 $("#Company_box").slideDown("fast"); //Slide Down Effect
  $("#Individual_box").hide();
 }
 });
$("#Individual_box").show();
$("#Company_box").hide();  
});

并将html 更改为以下格式

 <h1>Εγγραφή Ιδιώτη ή Επιχείρησης</h1>
  <form action="" method="post" name="form1">
  <p>
   <label>
  <input type="radio" name="type" value="Individual" id="type_0" checked="checked" />
  Ιδιώτης</label>
   <label>
  <input type="radio" name="type" value="Company" id="type_1" />
  Επιχείρηση</label>
  </p>
 <div id="Individual_box">
  <p>
  <label>Όνομα</label>
  <br />
  <input type="text" />
 </p>
  <p>
  <label>Επώνυμο</label>
  <br />
  <input type="text" />
 </p>
 <p>
  <label>Α.Φ.Μ. Ιδιώτη</label>
  <br />
  <input type="text" />
 </p>
 <p>
  <label>E-mail Ιδιώτη</label>
  <br />
  <input type="text" />
</p>
</div>
<div id="Company_box">
<p>
  <label>Επωνυμία Επιχείρησης</label>
  <br />
  <input type="text" />
</p>
<p>
  <label>Α.Φ.Μ. Επιχείρησης</label>
  <br />
  <input type="text" />
</p>
<p>
  <label>E-mail Επιχείρησης</label>
  <br />
  <input type="text" />
</p>
</div>
<p>
<input type="submit" value="Καταχώρηση" />
</p>

   topic closed thank you once again all of you

一个表单而不是两个带有jquery的显示/隐藏单选按钮

2 个答案: