2011-09-30 43 views
0

這裏是我的代碼,如何使用jquery ajax方法顯示或顯示新更改的文本字段值而不是默認值?

這是我的組成部分,這是基本的使用jQuery分爲 兩個主要動作,
1)首先採取行動:從基於選擇 :「學年」的選擇,'課程'選擇&'類' 選擇,我用jquery ajax post方法從數據庫加載數據到全部 5組ID。 ....嘿這部分工作很好..
2)[我的probs來到這裏 - >],第二個動作:,當我選擇任何ID時,它展示或 顯示文本框的新值,而不是默認值,基於從DB數據 通過使用類似於AJAX交方法

============================= ===========================================

<form name="aone" id="aone" action="mattendance.php" method="POST" enctype="multipart/form-data"> 
    <div>             <div style='padding-top:20px;'> 
    Academic Year :&nbsp;&nbsp; 
      <select name="academic" id="academic"> 
     <option value="0"> --- Select ---- </option> 
      <option value="1990-91">1990-91 </option> 
     <option value="1991-92">1991-92 </option> 
     <option value="1992-93">1992-93 </option> 
     <option value="1993-94">1993-94 </option> 
     <option value="1994-95">1994-95 </option> 
     <option value="1995-96">1995-96 </option> 
     <option value="1996-97">1996-97 </option> 
     <option value="1997-98">1997-98 </option> 
     <option value="1998-99">1998-99 </option> 
     <option value="1999-00">1999-00 </option> 
     <option value="2000-01">2000-01 </option> 
     <option value="2001-02">2001-02 </option> 
     <option value="2002-03">2002-03 </option> 
     <option value="2003-04">2003-04 </option> 
     <option value="2004-05">2004-05 </option> 
     <option value="2005-06">2005-06 </option> 
     <option value="2006-07">2006-07 </option> 
     <option value="2007-08">2007-08 </option> 
     <option value="2008-09">2008-09 </option> 
     <option value="2009-10">2009-10 </option> 
     <option value="2010-11">2010-11 </option> 
     <option value="2011-12">2011-12 </option> 
     <option value="2012-13">2012-13 </option> 
     <option value="2013-14">2013-14 </option> 
     <option value="2014-15">2014-15 </option> 
     <option value="2015-16">2015-16 </option> 
     <option value="2016-17">2016-17 </option> 
     <option value="2017-18">2017-18 </option> 
     <option value="2018-19">2018-19 </option> 
     <option value="2019-20">2019-20 </option> 
     </select>       
     </div> 
     <div style='padding-top:15px;'> 
     <label>Select Course : </label> 
     &nbsp;&nbsp;&nbsp;<input type="radio" name="course" class="course" value="SDC">SDC &nbsp;&nbsp; 
          <input type="radio" name="course" class="course" value="GDC" checked="defaultChecked" />GDC      
     </div> 
     <div style='padding-top:15px;'> 
     <label>Select Class : </label> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="first" id="first" value="I Year" >I Year&nbsp;&nbsp; 
      <input type="checkbox" name="second" id="second" value="II Year">II Year&nbsp;&nbsp; 
      <input type="checkbox" name="third" id="third" value="III Year">III Year  
     </div> 
     <div style='padding-top:25px;'> 
     <label> Date : </label>&nbsp;&nbsp;&nbsp;&nbsp;  
      <span class="demo"> 
      <input type="text" name="date" class="datepicker"> 
      </span>&nbsp;&nbsp; 
      <span> FN :&nbsp;<input type='checkbox' name='actfnone' value='0'> </span> 
      <span > AN :&nbsp;<input type='checkbox' name='actanone' value='0'> </span> 
     </div>        
     <div style='padding-top:10px;'> 
     <div style='padding-top:5px;'> 
      ID No: 1 <span style="padding-left:10px;"> <select name="sId1" class="sId" onchange="Javascript: callone(this.options[this.selectedIndex].value);"> </select> </span><span> <input type="text" id="nameone" value=""> </span> 
     </div> 
     <div style='padding-top:5px;'> 
      ID No: 2 <span style="padding-left:10px;"> <select name="sId2" class="sId" onchange="Javascript: calltwo(this.options[this.selectedIndex].value);"> </select> </span><span > <input type="text" id="nametwo" value=""> </span> 
     </div> 
     <div style='padding-top:5px;'> 
      ID No: 3 <span style="padding-left:10px;"> <select name="sId3" class="sId" onchange="Javascript: callthree(this.options[this.selectedIndex].value);"> </select></span><span > <input type="text" id="namethree" value=""> </span> 
     </div> 
     <div style='padding-top:5px;'> 
      ID No: 4 <span style="padding-left:10px;"> <select name="sId4" class="sId" onchange="Javascript: callfour(this.options[this.selectedIndex].value);"> </select> </span><span > <input type="text" id="namefour" value=""> </span> 
     </div> 
     <div style='padding-top:5px;'> 
      ID No: 5 <span style="padding-left:10px;"> <select name="sId5" class="sId" onchange="Javascript: callfive(this.options[this.selectedIndex].value);"> </select> </span> <span > <input type="text" id="namefive" value=""> </span> 
     </div> 
     </div>    
    </div> 
    <p align="center"> 
    <input type="submit" value="SUBMIT" onclick="javascript: return ATcheck()" > 
    <input type="hidden" name="add" value="add" />   
    </p> 
</form> 

Jquery Area [Works fine]:

行動第一部分:

<script> 
    function popfield(acyr,crs,cls) {   
     $.ajax({ 
     type : "POST", 
     url : "mattendance.php", 
     cache: false, 
    data : "academic="+ acyr +"&course="+ crs +"&class="+ cls,             success: function(data) {     
      $(".sId").html(data).show();     
     }    
    });    
     } 

$("#aone").ready(function() {  


    $("#academic").change(function() { 
     var acval = $(this).find("option:selected").text();    
    }); 

    $("input:radio[name=course]").click(function() { 
     var csval = $('input[name=course]:checked', '#aone').val();    
    });  

    $("#first").click(function() { 
     if ($("#first").is(":checked")) { 
      var sclass = $('input[name=first]:checked').val();     
      $(":checkbox").click(popfield($("#academic").find("option:selected").text(),$('input[name=course]:checked', '#aone').val(),$('input[name=first]:checked').val()));              
     }         
    }); 

    $("#second").click(function() { 
     if ($("#second").is(":checked")) { 
      var sclass = $('input[name=second]:checked').val();          
      $(":checkbox").click(popfield($("#academic").find("option:selected").text(),$('input[name=course]:checked', '#aone').val(),$('input[name=second]:checked').val()));        
     }         
    }); 

    $("#third").click(function() { 
     if ($("#third").is(":checked")) { 
      var sclass = $('input[name=third]:checked').val();          
      $(":checkbox").click(popfield($("#academic").find("option:selected").text(),$('input[name=course]:checked', '#aone').val(),$('input[name=third]:checked').val()));      
     }         
    }); 

}); 

行動第二部分[問題是在這裏]:

function callone(sid) { 

    alert('alert one :'+ sid); 

    var dataString = "Id="+ sid ; 

     $.ajax({   
    type : "POST", 
    url : "mattendance.php", 
    data : dataString,    
    success: function(data) {     
     $("#nameone").html(data);    
    }    
     }); 
    }       } 

[PHP一部分動作二:]

<? 

// Call to Names from Ajax 
if($_POST["Id"]!="") 
    {   
    $dbselect=mysql_query("SELECT * FROM `tblNewStudent` WHERE `IdNo`='".$_POST["Id"]."' ORDER BY `SNo` ASC ");   
    $row = mysql_fetch_object($dbselect); 
    print $row->Name;     
    } 

?> 

我很多試圖通過看實例,但不能能夠 文本字段,以顯示新的N值有奇怪的,嚴重期待烏爾最好 答案..

由於事先{雷蒙德赫伯特}

回答

0

嘗試使用以下

$('#nameone').val(data); 

instaed的

$("#nameone").html(data); 
+0

確定,但同樣的結果,我不能能夠看到新的變化值文本框的顯示..任何其它的建議...〜! – raybegins

+0

你可以從mattendance.php創建一個完整的html,並且可以將它分配給所有文本字段的整個html – sumi

相關問題