is there a way to populate other textbox when onchange? - javascript

here's my code. I'm new to php. so sorry in advance.
I actually want to check my input in txtbarcode and if it is existing in my database I would like to populate the txtdescription but I don't know how to do it or is it even possible?
<?php
$barcode = $_POST['txtbarcode'];
$query = "SELECT * FROM product WHERE product_id = '$barcode'";
$query_exe = mysql_query($query);
$chk_query = mysql_num_rows($query_exe);
if($chk_query > 0)
{
$row = mysql_fetch_assoc($query_exe);
?>
<th class = "textbox"><input type = "text" name = "txtbarcode" value = "<?php echo $row['product_id']; ?>" style="width:80px"/></th>
<th class = "textbox"><input type = "text" name = "txtdescription" value = "<?php echo $row['product_name']; ?>" style="width:100px"/></th>
<?php
}
?>

You can do this using JQuery Ajax. Just using the change listener on the barcode field, it will send an ajax call to the check_barcode file - which will query the table and echo the data you want. The result will then be placed into the other textfield via JavaScript :).
The following is a separate PHP file.
<?php
//-----------------------------------
//check_barcode.php file
//-----------------------------------
if (isset($_POST['barcode'])) {
$query = mysql_query("SELECT * FROM product WHERE barcode = '".$_POST['barcode']."'");
$num_rows = mysql_num_rows($query);
if ($num_rows > 0) {
$row = mysql_fetch_assoc($query);
echo $row['product_name'];
}
}
?>
The following is your HTML and JavaScript code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#txtbarcode').change(function() {
var barcode = $(this).val();
$.ajax({
url: 'check_barcode.php',
type: 'POST',
data: {barcode: barcode},
success: function(result) {
$('#txtdescription').val(result);
}
});
});
});
</script>
<input type="text" name="txtbarcode" id="txtbarcode" />
<input type="text" name="txtdescription" id="txtdescription" />
UPDATE: Returning more data, and populating extra fields.
You'll need you echo a json array from the php script which contains both of the values.
For example:
echo json_encode(array('product_name' => $row['product_name'], 'unit_measure' => $row['product_name']));
and then within the JavaScript
<script>
$.ajax({
url: 'check_barcode.php',
type: 'POST',
data: {barcode: barcode},
dataType: 'json',
success: function(result) {
$('#txtdescription').val(result.product_name);
$('#unitofmeasure').val(result.unit_measure);
}
});
</script>

Related

Making a html alert using ajax, sql and php

I am trying to make some code where a click of a SQL html button can display a different SQL table as a popup. I have already gotten the variable from the table to pass through using this:
echo "<td><a class='btn-floating btn-large waves-effect waves-light black' onclick='partSearch(".$product.")' value='display'><i class='material-icons'>search</i></a></td>";
The 'part search' code is as follows:
<script type="text/javascript">
function partSearch() {
$.ajax({
url: 'serv.php?id=<?php echo $product ?>',
type: 'GET',
success: function(result){
var obj = jQuery.parseJSON(result)
alert(obj)
}
})
}
</script>
Even though the variable is passed through to 'serv.php', I can't manage to get the sql data to be returned as a popup using alert. All I get is either nothing or [object, Object]. This is the SQL/php code:
<?php
include 'includes/dbh.inc.php';
$id = $_GET['id'];
$result = mysqli_query($conn,"SELECT * FROM pr WHERE product_ID='".$id."'");// test this
$rows = array();
while($r = mysqli_fetch_assoc($result)){
$rows[] = $r;
}
echo json_encode($rows);
?>
Any help is appriciated
<script type="text/javascript">
function partSearch() {
var product_id = "<?php echo $product; ?>";
$.ajax({
url: 'serv.php?id=product_id',
type: 'GET',
success: function(result){
alert(result);
}
})
}
</script>

Onclick link to save multiple data without refresh

With this code I can see empty data saving into my db once I click on the link button. But i need to the GET's data in my database. Any solution to this.
<a href="?id=1&pid=238874" id="day" onclick="this.form.submit();><button type="button" class="label label-danger" >Select</button></a>
<script>
$('#day').click(function(e)
{
e.preventDefault();
$.ajax({
type: 'post',
url: "index.php",
data: $("select.day").serialize(),
});
return false;
});
</script>
For PHP Code to save data
<?php
$a = $_GET['id'];
$b = $_GET['pid'];
// query
$sql = "INSERT INTO hos_patient(reg_id,pid) VALUES ('$a','$b')";
mysqli_query($db, $sql);
?>
Thanks
You specified using POST in your ajax function. But then you try to get the data by GET in your PHP-Script. I'd suggest you just use POST for this.
Alter your PHP-Script to use $_POST instead of $_GET
Try with this :
...
$.ajax({
type: 'post',
url: "index.php?id=1&pid=238874",
data: $("select.day").serialize(),
});
...
Use this in script file and in PHP file use below code
<script>
$('#day').click(function(e)
{
e.preventDefault();
$.ajax({
type: 'post',
url: "index.php?id=1&pid=238874",
data: $("select.day").serialize(),
});
return false;
});
</script>
<?php
$a = $_POST['id'];
$b = $_POST['pid'];
// query
$sql = "INSERT INTO hos_patient(reg_id,pid) VALUES ('$a','$b')";
mysqli_query($db, $sql);
?>
<button type="button" class="label label-danger" >Select</button>
<script>
$(function () {
$('.login_form_1').on('click', function (e) {
e.preventDefault();
$.ajax({
type: 'GET',
url: 'show.php?id=22&pid=33',
data: $('.login_form_1').serialize(),
success: function (data) {
$('div.logerrors').html(data);
}
});
});
});
</script>
For PHP output
<?php
$a = $_GET['id'];
$b = $_GET['pid'];
// query
$sql = "INSERT INTO hos_patient(reg_id,pid) VALUES ('$a','$b')";
mysqli_query($db, $sql);
?>

jquery ajax return values into html form

I need help with returning values from jQuery/AJAX to html form inside index.php
index.php :
<script type="text/javascript">
$(document).ready(function () {
$('#display').ready(function () {
var pageid = '<?php echo $_GET[\'ID\'] ;?>';
var powiat = '<?php echo $row[\'powiat\'] ;?>'
$.ajax({ //create an ajax request to display.php
type: 'GET',
url: 'display.php?ID=' + pageid + '&powiat=' + powiat,
dataType: 'html', //expect html to be returned
success: function (response) {
$('#responsecontainer').html(response);
//alert(response);
}
});
});
});
(...)
echo "<form action=\"save.php\" method=\"GET\">";
echo "<tr><td>IP</td><td><div id=\"responsecontainer\"></td></tr>";
echo "<input type=\"submit\" value=\"Save\">" ;
echo "</table></form>
display.php file contains:
$disp_result_2 = mysql_query("SELECT ip FROM swittche_ip WHERE powiat LIKE '%$disp_powiat%' AND ip NOT IN ( SELECT ip FROM switche )" )or die(mysql_error());
while($disp_row_1 = mysql_fetch_assoc($disp_result_2)){
echo "<option value=\"".$disp_row_1['ip']."\">".$disp_row_1['ip']</option>";
}
In return I have filed html as expected but when I try submit form filed by jquery/ajax I have error
Notice: Undefined index: ip.
How can I handle with that?
Thanks.
Syntax error in your code when you are printing the option.
Updated code is as below.
$disp_result_2 = mysql_query("SELECT ip FROM swittche_ip WHERE powiat LIKE '%$disp_powiat%' AND ip NOT IN ( SELECT ip FROM switche )" )or die(mysql_error());
while($disp_row_1 = mysql_fetch_assoc($disp_result_2)){
?>
<option value="<?php echo $disp_row_1['ip'];?>" ><?php echo $disp_row_1['ip'];?></option>
<?php }

how to pass checkbox value to text input using Ajax and PHP?

I'm trying to evaluate the values of all checked checkboxes and pass the result
to html text input I'm trying to do that using php and ajax but I have no good result please help
this is my code:
$(document).ready(function ()
{
$("#check").click(function ()
{
var data = $("#check").val();
//get selected parent option
$.ajax(
{
type: "GET",
data:data,
url: "total.php?val="+data,
cache: false,
success: function (data)
{
$("#tot").html(data);
}
});
});
});
</script>
</head>
<?php
$conn = mysqli_connect("localhost", "root", "", "voucher_test");
$result = mysqli_query($conn, "SELECT * FROM vouchers where cat_id = 1");
while ($row = mysqli_fetch_array($result)) {
$userSet[] = $row;
}
?>
<form action="index.php" method="post">
<?php
foreach ($userSet as $key=>$value){
echo $value['service_name']."<input type='checkbox' id='check' name='{$value['service_name']}' value='{$value['service_price']}'>";
}
?>
<br>
<div id="tot"></div>
</form>
and this is total.php
<?php
$itot = 5;
$itot+=$_GET['val'];
echo"<input type='text' value='$itot'>";
You can use this code to sent value to server y o n
var data = ($("#check").is(":checked") ? 'y' : 'n';
If you want send the value of checkbox, try this code:
var data = new FormData();//Create FormData
if($("#check").is(":checked")){//Verified if the input os checked
data.append('data-check',$("#check").val());//Add data of the checkbox to FormData
}
$.ajax(
{
type: "GET",
data: data,
url: "total.php",
cache: false,
success: function (data)
{
$("#tot").html(data);
}
});
In yur php
$_GET['data-check'];
I don't think you need to use the total.php file, but if you really want to use it I recommend to change your code to this:
<?php
$itot = 5;
$itot+=$_GET['val'];
echo"<input type='text' value='" . $itot . "'>";
The only change is the concatenation of the string you are printing

Dynamically created select list makes mutilple calls to javascript function

I have created dynamically multiple select list. On click of channel name it should get its type. The problem is once click on select list its repetitively calls java script function causing ajax to load multiple times.
HTML CODE:
<td>
<SELECT name="channel_name[]" onclick ="get_type(this)"; required class='channelname'>
<option value="">Select...</option>
<?php foreach($channel_list as $row) {
$channelid = $row['channelid'];
$channelname = $row['channelname'];
if($U_channelid==$channelid)
{
$s = "selected = selected";
}
else
{
$s = "";
}
echo "<option value='$channelid' $s>".$channelname."</option>";
?>
<!-- <OPTION value='<?php echo $channelid ?>' $s ><?php echo $channelname?></OPTION> -->
<?php } ?>
</SELECT>
</td>
Javascipt code:
function get_type()
{
$(".channelname").live("change", function() {
var channel_id = $(this).find("option:selected").attr("value");
var _this = $(this); //Save current object
alert(channel_id);
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>index.php/partner/get_channel_type',
data: 'channelid='+channel_id,
async: false
}).done(function( data1 ) {
if(data1){
_this.closest("tr").find('input[name="type[]"]').val(data1);
}else{
alert("Channel type is not defined");
_this.closest("tr").find('input[name="type[]"]').val("");
}
});
});
}
remove onclick ="get_type(this)" from select tag // because you already using $(".channelname").live("change", function() { in javascript
put this
<SELECT name="channel_name[]" required class='channelname'>
and javascript
$(".channelname").change(function() {
var channel_id = $('.channelname').find("option:selected").attr("value");
alert(channel_id);
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>index.php/partner/get_channel_type',
data: 'channelid='+channel_id,
async: false
}).done(function( data1 ) {
if(data1){
_this.closest("tr").find('input[name="type[]"]').val(data1);
}else{
alert("Channel type is not defined");
_this.closest("tr").find('input[name="type[]"]').val("");
}
});
});

Categories

Resources