2011-09-30 82 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

相关问题