开发者

how to show or display the newly changed text field value instead of default value using jquery ajax method?

Here is my code,

This is my form part, this is basically divided into two main actions using jquery,

1) First action :, Based on Selection from :'Academic Year' selection, 'Course' selection & 'Class' selection , i used jquery ajax post method to load data from DB to All 5 set of IDs. .... Hey this part work Fine..

2) [my probs comes here -->], Second Action :, when i select anyone of IDs, it shud show or display new value of text box instead of default value, based on data from DB by using similar ajax post method

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

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

Action Part one :

<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()));                                        开发者_Go百科              
        }                                   
    });

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

});

Action Part two [Problem is here] :

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 part for Action Two :]

<?

// 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;                 
   }

?>

I tried alot by seeing examples but cant able to display new value in text field n got wierd , seriously looking forward to ur best answers..

Thanks in Advance , {Raymond Herbert}


Try using following

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

instaed of

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜