PHP AJAX JSON Drop Down value on form submission -
i want retain value of drop down when form submitted. have 2 drop down- department , project interlinked through ajax. when submit, page reloaded, , default values of department , project comes out departments , projects, wish retain value selected user.
this code. pardon rest of code if missing showing required code.
<html><head><script type="text/javascript"> function showdept(){ $('#deptdropdown').empty(); $('#deptdropdown').append("<option value='0'> departments </option>"); $('#projectdropdown').append("<option value='0'> projects </option>"); $.ajax({ type:"post", url:"departmentdropdown.php", contenttype:"application/json; charset:utf-8", datatype:"json", success: function(data){ $('#deptdropdown').empty(); $('#deptdropdown').append("<option value='0'> departments </option>"); $.each(data,function(i,item){ $('#deptdropdown').append('<option value="'+ data[i].deptid +'">'+ data[i].deptname +'</option>'); }); }, complete: function(){ } }); } function showproject(deptid){ $('#projectdropdown').empty(); $('#projectdropdown').append("<option value='0'> projects </option>"); $.ajax({ type:"post", url:"projectdropdown.php?did="+deptid, contenttype:"application/json; charset:utf-8", datatype:"json", success: function(data){ $('#projectdropdown').empty(); $('#projectdropdown').append("<option value='0'> projects </option>"); $.each(data,function(i,item){ $('#projectdropdown').append('<option value="'+ data[i].proid +'">'+ data[i].projectname+'</option>'); }); }, complete: function(){ } }); } $(document).ready(function(){ //initial call functions. showdept(); //shows departments. $("#deptdropdown").change(function(){ //when department changes, call project function var deptid=$("#deptdropdown").val(); showproject(deptid); });</script></head><body><div id="container" style="min-height:500px; border-bottom:2px solid grey"><div id="verticaldropdown" style="width:200px; background:yellow; border-right: 1px solid grey; min-height:500px; float:left"> <form method="post" action=""> <div align="center"> <div>department</div> <div><select name="dept_selected" style="width:160px" id="deptdropdown"></select></div> </div> <br /> <div align="center"> <div>project</div> <div><select name="project_selected" style="width:160px" id="projectdropdown"></select></div> </div> <br /> <div align="center"> <input type=submit value='go' name='showcompliance'> </div> </form> </div> </div> </body> </html>
you need dept , project ids selected choosen:
$.each(data,function(i,item){ if(data[i].deptid==choosen_dept){ $('#deptdropdown').append('<option value="'+ data[i].deptid +'" selected>'+ data[i].deptname +'</option>'); }else{ $('#deptdropdown').append('<option value="'+ data[i].deptid +'">'+ data[i].deptname +'</option>'); } });
Comments
Post a Comment