want to fetch conditional data using ajax

Question

My Working scenario is, i have 4 types of Pen 1-Diamond 2-Gold 3- Bronze 4- Silver

i want when someone select Diamond Pen on the bottom input he will type quantity so if he select 1-Diamond Pen so the amount should be vary with each other, on the same way all 4 types pen rates should be vary.

My Code is

ajax.php

<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","getuser.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<!-- <input type="text" name="users" onchange="showUser(this.value)"> -->
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Diamond</option>
<option value="2">Gold</option>
<option value="3">Bronze</option>
<option value="4">Silver</option>
</select>
<!-- <input type="submit" name="users"> -->

</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

getuser.php

<!DOCTYPE html>
<html>
<head>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','root','','fm_all');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM all_company WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['name'] . "</td>";
    echo "<td>" . $row['city'] . "</td>";
    echo "<td>" . $row['province'] . "</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>

The problem is only Drop Box value is working, i do not know how to attach input quantity box with it. please help.

Note: this code is working according to id when i select drop box value so it show according to id but i did not attach it with quantity.

Answer 1

You can achieve this by following way in case you don't want for perform any operation on form submit

call showUser() on onkeyup for input and provide it some id may be quantity call showUser() on onchange for select box and also provide it some id can be pen

function showUser(){
    quantity = $("#quantity").val();
    selected_pen = $("#pen").val();
    if (quantity != null && selected_pen != null && typeof(quantity) !='undefined'){
        your ajax calling code
    }
}

you can call above function onchange for select box and on onkeyup in input textbox. But with above mentioned way it will call ajax every time there is change in your text field or select box.

want to fetch conditional data using ajax

Question

1 answers

solution1
0 2017-01-04 08:23:59

want to fetch conditional data using ajax

Question

1 answers

solution1 0 2017-01-04 08:23:59

solution1
0 2017-01-04 08:23:59