2011-05-19 62 views
1

好吧,所以現在我有一個工作下拉依賴形式,例如,如果我選擇項目1在下拉列表中會出現一些div,如果我選擇項目2一些其他div會出現..我的問題是,即使其他div被隱藏,它仍然會獲得隱藏的輸入類型在一個div中的後置值。有沒有一種方式,如果一個div被隱藏,其帖子輸入將不會被提交?下拉相關的jquery codeigniter輸入

,這裏是我的jQuery

$(function() { 
    $(".forms").hide(); 
    $("#myselect").change(function() { 
     switch($(this).val()){ 
      case "student": 
       $(".forms").hide().parent().find("#Form1").show(); 
       break; 
      case "teacher": 
       $(".forms").hide().parent().find("#Form2").show(); 
       break; 
     } 
    }); 
}); 

這裏是我的看法

<form> 
<select id="myselect"> 
    <option value="student">student</option> 
    <option value="teacher">teacher</option> 
</select> 

<div id="Form1" class="forms"> 
//some input here like <input type="text" name="studentName"/> 
</div> 

<div id="Form2" class="forms">Form 2 Contents</div> 
//some input here like <input type="text" name="teacherName"/> 
</form> 

編輯 我一直在使用卸下襬臂嘗試這一個()。但它仍然從#student_profile

$(function() { 
    $(".fields").hide(); 
    $("#role").change(function() { 
     switch($(this).val()){ 
      case "3": 
       $(".fields").hide().parent().find("#student_profile").show(); 
       break; 
      case "2": 
       $(".fields").hide().parent().find("#teacher_profile").show(); 
       $("#student_profile").remove(); 

       break; 
      } 
     }); 
    }); 

編輯繼承人我真正的代碼讀取數據發佈

<form action="add" method="post" class="form label-inline uniform" /> 


<h3><a href="#">User</a></h3> 
        <div class="field"><label for="username">Username </label> <input id="username" name="username" size="50" type="text" class="medium" /></div> 

        <div class="field"><label for="password">Password </label> <input id="password" name="password" size="50" type="password" class="medium" /></div> 

        <div class="field"> 
         <label for="role">Role </label> 
         <select id="role" name="role" class="medium"> 

          <optgroup label="Type of User"> 
           <option value="3" />Student 
           <option value="2" />Teacher 
           <option value="1"/>Admin 
          </optgroup> 
         </select> 
        </div> 

        <div id="student_profile" class="fields"> 
        <div class="field"> 
           <label for="type">Course</label> 
           <select id="type" name="stdntCourse" class="medium"> 
            <optgroup label="Choose Course"> 
             <option value="BS IT" />BS IT 
             <option value="BS CS" />BS CS 
             <option value="BS IS" />BS IS 
            </optgroup> 
           </select> 
          </div> 
          <div class="field"> 
           <label for="type">Year</label> 
           <select id="type" name="stdntYear" class="medium"> 
            <optgroup label="Student Year"> 
             <option value="1st" />1st 
             <option value="2nd" />2nd 
             <option value="3rd" />3rd 
             <option value="4th" />4th 
            </optgroup> 
           </select> 
          </div> 



        </div> 

        <div class="field"><label for="regdate">Registration Date </label> <input id="regdate" name="regdate" size="20" type="text" class="large" /></div> 
<br /> 
<h3><a href="#">User Profile</a></h3> 

        <div class="field"><label for="fname">First Name </label> <input id="fname" name="fname" size="50" type="text" class="large" /></div> 

        <div class="field"><label for="fname">Middle Name </label> <input id="mname" name="mname" size="50" type="text" class="large" /></div> 

        <div class="field"><label for="lname">Last Name </label> <input id="lname" name="lname" size="50" type="text" class="large" /></div>      

        <div class="field"><label for="nickname">Nickname</label> <input id="nickname" name="nickname" size="50" type="text" class="large" /></div> 

        <div class="field"><label for="birthday">Birthday</label> <input type="text" size="20" name="birthday" id="birthday" class="large"/></div> 

        <div class="field"> 
         <label for="type">Sex</label> 
         <select id="type" name="sex" class="medium"> 
          <optgroup> 
           <option value="M" />Male 
           <option value="F" />Female 
          </optgroup> 
         </select> 
        </div> 

        <div class="field"><label for="address">Address</label> <input id="address" name="address" size="50" type="text" class="large" /></div> 

        <div class="field"><label for="city" class="">City </label> <input id="city" name="city" size="20" type="text" class="medium" /></div> 

        <div class="field"><label for="country" class="">Country </label> <input id="country" name="country" size="20" type="text" class="medium" /></div> 

        <div class="field"><label for="zcode">Zip Code </label> <input id="zcode" name="zcode" size="20" type="text" class="medium" /></div> 


        <!--      
        <div class="field clearfix">         
         <label for="lname">File Upload </label>         
         <input style="opacity: 0;" class="file" type="file" />        
        </div> 
        ----> 



      <!----  
        <div class="controlset field"> 
         <span class="label">Preferred Location</span> 


         <div class="controlset-pad"> 
         <input name="radio1" id="radio1" value="1" type="radio" /> <label for="radio1">Option 1</label><br /> 
         <div class="clear"></div> 
         <input name="radio1" id="radio2" value="1" type="radio" /> <label for="radio2">Option 2</label><br /> 
         <div class="clear"></div> 
         <input name="radio1" id="radio3" value="1" type="radio" /> <label for="radio3">Option 3</label><br /> 
         </div> 
        </div>   

        <div class="controlset field"> 

         <span class="label">Something Else </span> 
         <div class="controlset-pad"> 
          <input name="approved" id="check1" value="1" type="checkbox" /> <label for="check1">Some Option 1</label><br /> 
          <div class="clear"></div> 
          <input name="pending" id="check2" value="1" type="checkbox" /> <label for="check2">Some Option 2</label><br /> 
          <div class="clear"></div> 
          <input name="actives" id="check3" value="1" type="checkbox" /> <label for="check3">Some Option 3</label><br /> 

         </div> 
        </div> 


        <div class="field"><label for="description">Description</label> <textarea rows="7" cols="50" id="description" name="description"></textarea></div> 

        <br /> 
     ----> 

        <div class="buttonrow"> 
         <input type="button" class="btn" value="Back" onClick="history.go(-1);return true;"> 
         <input type="reset" class="btn btn-black" value="Reset"/> 
         <input type="submit" id="submit" class="btn btn-grey" value="Add User"/> 
        </div> 

       </form> 

回答

1

這裏解決:http://jsfiddle.net/Bksk7/2/

說明

基本上你需要了解什麼做這種技術是時,除非你把場在不同的表格上,當您按input並提交type時,它會始終提交字段。

要解決此問題,您需要使用JavaScript來接管submit具有的功能。這樣做很簡單,因爲設置一個click偵聽器的.preventDefault(),顧名思義,它將阻止該按鈕的默認功能。

之後,你需要採取弄清楚送什麼元素並將數據傳遞到$.ajax,你就大功告成了:)

你甚至可以拿去做一些很好的驗證這種做法的機會,如果你希望。

希望它可以幫助

這裏解決:http://jsfiddle.net/Bksk7/2/

相關文檔:

$。AJAX http://api.jquery.com/jQuery.ajax/

+0

我的心是烤..大聲笑..其實有很多領域在我的形式,,像用戶名等..看起來像一個令人畏懼的任務對我來說.. @ _ _ @謝謝雖然..我讚賞你的努力.. – 2011-05-19 09:35:01

+0

無論如何,如果你真的想幫助我,你可以檢查我上面的真實代碼.. – 2011-05-19 09:40:51

+0

我簡直不敢相信你不能使用我給你的解決方案。我將更新它,以便您可以看到如何包含可能的其他可能字段。 – MarioRicalde 2011-05-19 09:44:31

0

您是否嘗試過使用jQuery消除不必要的投入? (http://api.jquery.com/remove/)

+0

試過那個,但我不能得到它的工作..我編輯我的帖子請看我的代碼。 – 2011-05-19 09:02:50

0

這裏一些輸入,如:

<input type="text" name="teacherName"/>` 

的這部分代碼是你的div之外:

<div id="Form2" class="forms">Form 2 Contents</div> 

這就是爲什麼你不能把它隱藏

,並嘗試目標每.forms那樣

$(function() { 
    $(".forms").hide(); 
    $("#myselect").change(function() { 
     console.log($(this).val()); 
    switch($(this).val()){ 

     case "student": 
      $(".forms").each(function(){ 

       $(this).hide(); 
      }); 
      $("#Form1").show(); 
      break; 
     case "teacher": 
      $(".forms").each(function(){ 

       $(this).hide(); 
      }); 
      $("#Form2").show(); 
      break; 
     } 
    }); 

});