Dependency between comboboxes in php/jquery - php

Languages: PHP,JQuery,MySQL
The question is "simple", I have a triple dependency with php and jquerys, the code works great, for inserting new information, but now I would like to make an update, so I need to load the current information first and I don't figure it out how to, I add some parts of the code, if any more parts needed ask me before voting me down please.
Code is something like this:
<tr>
<td class="main"><?php echo ENTRY_COUNTRY; ?></td>
<td class="main">
<select id="country" name="country">
<option value="0">Select One...</option>
</select>
</td>
</tr>
<tr>
<td class="main"><?php echo ENTRY_STATE; ?></td>
<td class="main">
<select id="state" name="state">
<option value="0">Select One...</option>
</select>
</td>
</tr>
<tr>
<td class="main"><?php echo ENTRY_CITY; ?></td>
<td class="main">
<select id="city" name="city">
<option value="0">Select One...</option>
</select>
</td>
</tr>
The three are loaded from a db in mysql, by actions like:
<script type="text/javascript">
$(document).ready(function(){
cargar_paises();
$("#country").change(function(){dependencia_estado();});
$("#state").change(function(){dependencia_ciudad();});
$("#city").change(function(){dependencia_zip();});
$("#state").attr("disabled",true);
$("#city").attr("disabled",true);
});
function cargar_paises()
{
$.get("scripts/cargar-paises.php", function(resultado){
if(resultado == false)
{
alert("Error");
}
else
{
$('#country').append(resultado);
}
});
}
function dependencia_estado()
{
var code = $("#country").val();
$.get("scripts/dependencia-estado.php", { code: code },
function(resultado)
{
if(resultado == false)
{
alert("No se encontraron provincias para ese pais");
$("#state").attr("disabled",true);
document.getElementById("state").options.length=1;
}
else
{
$("#state").attr("disabled",false);
document.getElementById("state").options.length=1;
$('#state').append(resultado);
}
}
);
}
function dependencia_ciudad()
{
var code = $("#state").val();
$.get("scripts/dependencia-ciudades.php?", { code: code }, function(resultado){
if(resultado == false)
{
alert("Error");
}
else
{
$("#city").attr("disabled",false);
document.getElementById("city").options.length=1;
$('#city').append(resultado);
}
});
.....
Thanks for everything ;) sorry for the english.

I guess you want something like this:
On the main page:
<script>
document.ready = function() {
fillBasicInformation();
}
</script>
Now you would have to define a fillBasicInformation function, as follows:
//this should only be called in edit mode
fillBasicInformation = function() {
//First fill country select
//select the specific country
//Fill state select
//select specific state
//fill city select
//select specific city
//now attach events to onChange event
//1
}
You have to decide now how you will get and fill your fields, adding options to the appropriate, probabl through ajax, or maybe directly on the page load and selecting the right one (using val(), for example).

Related

How to deal with with array and form (PHP and JQuery)?

I have a MySQL database table which has a unique ID identifier for each line:
id text cat
4 abc 1
233 bbb 2
45 efa 1
Using PHP, I show an HTML table where you can see the TEXT and CAT fields.
Each row of the table is shown using a "while" loop.
As you can see, I also store the IDs in the array $val.
<?php
....
$val = array();
while($objResult = mysql_fetch_array($objQuery)){
$val[] = $objResult["id"];
?>
<table>
<tr>
<td><?php echo $objResult["text"];?></td>
<td><?php echo ''.$objResult["cat"].'';</td>
<tr>
<?php
}
?>
</table>
Now comes the tricky part.
Using JQuery, I would like to be able to click on the CAT cells in the html table and open a dialog window where I can change the value of CAT.
Here is the form:
<form action="modcat.php" method="POST" id="modcat">
<table>
<tr>
<td>
<select id="cat">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<input type="hidden" name="val" value="<?php
for ($i = 0; $i < 1000; $i++) {
echo $val[$i];
}
?>">
</td>
</tr>
</table>
</form>
<script>
$(document).ready(function () {
$("a#open").click(function () {
$('#finestra').dialog("open");
return false;
});
$('#finestra').dialog({
modal: true,
autoOpen: false,
buttons: [{
text: "modifica",
click: function () {
submitform();
$(this).dialog("close");
}
}, {
text: "annulla",
click: function () {
$(this).dialog("close");
}
}]
});
function submitform() {
$('#modcat').submit();
}
});
</script>
As you can see, I am trying to send to the form the corresponding value of ID (through a hidden input).
As it turns out, I put together all the IDs of all the table in the array $val.
How can I send to the form just the one which is chosen?
You can add the id to the html someplace, retrieve it in the click function, and add it to the form before submitting.
Here, i am adding the id as a data attribute, i also changed the id on the a element to a class, since your rendered html will contain multiple a elements, and ids should be unique
while($objResult = mysql_fetch_array($objQuery)):?>
<table>
<tr>
<td><?= $objResult['text'];?></td>
<td>
<a href="#" class="open" data-id="<?=$objResult['id'];?>">
<?=$objResult['cat'];?>
</a>
</td>
<tr>
</table>
<?php endwhile;
For the form, dont prepopulate the hidden field, just give it an id so its easy to target in js:
<form action="modcat.php" method="POST" id="modcat">
<table>
<tr>
<td>
<select id="cat">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<input type="hidden" name="val" id="hidden-id">
</td>
</tr>
</table>
</form>
Then in your js update the value from the data attribute:
$(document).ready(function () {
$("a.open").click(function () {
var clickedLink = $(this); //get clicked link
var id = clickedLink.data('id'); //extract id from data attribute
$('#hidden-id').val(id); //update hidden field value with id
$('#finestra').dialog("open");
return false;
});
...

select2 with dependent dynamic dropdown PHP/JQuery

hi i'm using select2 to style my dependent dynamic dropdown list on my php file, the problem is when i select a value from 1st dropdown to fetch data from mysql DB to 2nd dropdown list it goes to it's default style so i need some solution to solve the problem here is my files.
select2 script:
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
index.php:`
<form name="form1" action="test.php" method="post">
<table>
<tr>
<td>
<select name="brand" id="branddd" class="js-example-basic-single" required>
<option disabled selected required >brand</option>
<?php
$res=mysqli_query($link,"select * from brand");
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>
<select name="model" id="model" class="js-example-basic-single" required>
<option disabled selected required >model</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
</tr>
</table>
</form>
script to fetch DB values:
<script type="text/javascript">
function change_brand()
{
var xmlhttp=new XMLHttpRequest () ;
xmlhttp.open("GET","ajax.php?brand="+document.getElementById("branddd").value,false) ;
xmlhttp.send(null) ;
document.getElementById("model").innerHTML=xmlhttp.responseText ;
}
$(function(){
$('#branddd').on('change',function(){
this.value && // if value!="" then call ajax
$.get('ajax.php',{brand:this.value},function(response){
$('select[name="model"]').html(response);
});
});
});
</script>
ajax.php:
<?php
$link=mysqli_connect("localhost","root","");
mysqli_select_db($link,"test_db");
$brand=$_GET["brand"];
if($brand!="")
{
$res=mysqli_query($link,"select * from model where brand_id=$brand");
echo "<select>";
while($row=mysqli_fetch_array($res))
{
echo "<option>"; echo $row["name"]; echo "</option>";
}
echo "</select>";
}
?>
This is your styled select element:
<select name="model" id="model" class="js-example-basic-single" required>
You need to add the name, id, and class attributes to your PHP echo. Something like this:
echo "<select name=\"model\" id=\"model\" class=\"js-example-basic-single\" required>";
But a much better way would be to not write out a new select element and replace it with the html function. Instead, output the data from your PHP page as a JSON object, then add those options to the select element.
JSON object:
{
"option1": "Data A",
"option2": "Data B",
"option3": "Data C"
}
JavaScript:
function change_brand() {
$.ajax({
url: "ajax.php?brand="+document.getElementById("branddd").value,
dataType: "json",
success: function(data) {
var name, select, option;
select = document.getElementById('model');
// Clear the old options
select.options.length = 0;
// Load the new options
for (name in data) {
if (data.hasOwnProperty(name)) {
select.options.add(new Option(data[name], name));
}
}
}
});
}

how a string return from ajax can be used to populate html table using php mysql, jquery

I want to populate html table with the data returned from ajax. How will i do that. Below is the string which returned from ajax :
1-1.00-2013-2014,2-2.00-2013-2014,3-3.00-2013-2014,4-4.00-2013-2014,6-5.00-2013-2014,8-6.00-2013-2014,10-7.00-2013-2014,12-8.00-2013-2014,16-9.00-2013-2014,20-10.00-2013-2014,24-11.00-2013-2014,30-12.00-2013-2014,36-13.00-2013-2014,48-14.00-2013-2014,60-15.00-2013-2014,61-16.00-2013-2014,
What comes in my mind is to split the whole string like this :
var dataarr = data.split(',');
after spliting this, split again which will convert into three separate arrays
var dataarr = data.split('-');
and then using a loop populates html table. But don't know how to do accomplish in php. I have searched the net. I don't want to use "json" instead try to achieve using "mysqli" Please guide me?
You could use .split() in conjunction with .map() to achieve this:
$(function() {
$('#create').change(function() {
createTable($(this).val(), $('#tblBdy'))
});
function createTable(data, tbl) {
var bdy = $.map(data.split(','), function(tr, i) {
return $('<tr></tr>').html(
$.map(tr.split('-'), function(td, i) {
return $('<td></td>').html(td);
})
);
});
tbl.html(bdy);
}
$('#tblBdy').on('click', 'tr', function() {
var tableData2 = $(this).closest("tr").children("td").map(function() {
return $(this).text();
});
$('#bx1txt').val($.trim(tableData2[0]));
$('#bx2txt').val($.trim(tableData2[1]));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="create">
<option value="">Select one</option>
<option value="6-5.00-2013-2014,8-6.00-2013-2014,10-7.00-2013-2014,12-8.00-2013-2014,16-9.00-2013-2014,20-10.00-2013-2014,24-11.00-2013-2014,30-12.00-2013-2014,36-13.00-2013-2014,48-14.00-2013-2014,60-15.00-2013-2014,61-16.00-2013-2014">first group</option>
<option value="1-1.00-2013-2014,2-2.00-2013-2014,3-3.00-2013-2014,4-4.00-2013-2014,6-5.00-2013-2014,8-6.00-2013-2014,10-7.00-2013-2014,12-8.00-2013-2014,16-9.00-2013-2014,20-10.00-2013-2014,24-11.00-2013-2014,30-12.00-2013-2014,36-13.00-2013-2014,48-14.00-2013-2014,60-15.00-2013-2014,61-16.00-2013-2014">second group</option>
<option value="3-3.00-2013-2014,4-4.00-2013-2014,6-5.00-2013-2014,8-6.00-2013-2014,10-7.00-2013-2014,12-8.00-2013-2014,16-9.00-2013-2014,20-10.00-2013-2014,24-11.00-2013-2014">third group</option>
<input type="text" id="bx1txt" value="" />
<input type="text" id="bx2txt" value="" />
</select>
<br>
<br>
<table border="1">
<thead>
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody id="tblBdy"></tbody>
</table>

Can't Hide List Menu With Jquery/Javascript

I have a problem in hiding a list menu generated dynamically with php. My browser didn't hide it. I am using Firefox; the code is like this:
<div id="groupstd">
<br />
<select style="text-align:center;" name="std3">
<option value="Select" selected="selected">Please Select Student.no#3</option>
<?php
$result=Connect();
if($result>0)
{
while($row = mysql_fetch_array($result))
{
echo '<option value=$row[\'Roll#\'].\'i-\'.$row[\'Batch\']>$row[\'Roll#\'].\'i-\'.$row[\'Batch\']</option>';
}
}?>
</select>
</div>
<div id="grpstd">
<br />
<select style="text-align:center;" name="std4" id="std4">
<option value="Select" selected="selected">Please Select Student.no#4</option>
<?php
$result=Connect();
if($result>0)
{
while($row = mysql_fetch_array($result))
{
echo '<option value=$row[\'Roll#\'].\'i-\'.$row[\'Batch\']>$row[\'Roll#\'].\'i-\'.$row[\'Batch\']</option>';
}
}?>
</select>
</div>
I am using JQuery to hide like this:
$(document).ready(function()
{
$('#grpstd').hide();
$('#groupstd').hide();
});
try doing this after the dom is ready as using this:
$(document).ready(function() {
$('#grpstd, #groupstd').hide();//using two elements using one statement
});
When are you trying to hide the divs? You will need to wait until at least the document is ready:
$(document).ready(function() {
$('#grpstd').hide();
$('#groupstd').hide();
});
Did you try this?
$(document).ready(function() {
$('#grpstd, #groupstd').hide();
});
or
$(function() {
$('#grpstd, #groupstd').hide();
});

Cannot retrieve the data sent with the jQuery Ajax call .load()

I am trying to retrieve on server-side the value from the selected option sent using a jQuery .load() call like this:
<script type="text/javascript">
$(function () {
$("#first").change(function () {
$("#second").load('populate_section.php?year=', {first: $(this).val()});
});
});
</script>
<tr>
<td>
<select id="first" name="year">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="second" name="section">
</select>
</td>
</tr>
Then how I try to retrieve the value in my PHP code :
<?php
$year = $_GET['year']; // for test only
echo "<option>" . $year . "</option>";
?>
I assume here that the result will be a dropdown box with a value of whatever I chose on the first dropdown. However, it seems that var $year is empty.
Thanks.
You have not set any value for "year" GET variable in the URL.
If you need to send $(this).val() as the "year", do it like below code.
$("#second").load('populate_section.php', {"year": $(this).val()});
Try this:
$(function () {
$("#first").change(function () {
$("#second").load('populate_section.php', {year: $(this).val()});
});
});

Categories