can i fetch and populate different fields using function(data) jquery? - php

i want to populate two fields when some one fill up card no.
<input type="text" id="name" name="name" class="form-control" Value="<?php echo $grow['name']; ?>">
<input type="text" id="address" name="address" class="form-control" Value="<?php echo $grow['address']; ?>">
but this code populate field one by one. can any one suggest be better code for populating two fields from database. Thank you
jquery
<script type="text/javascript">
$(document).ready(function()
{
$("#krishi").keyup(function()
{
var k=$(this).val();
var q="name";
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q='+q,
cache: false,
success: function(data)
{
if(data){
$("#name").val(data);
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q=address',
cache: false,
success: function(data)
{
if(data){
$("#address").val(data);
}
}
});
}else
$("#name").val("");
$("#address").val("");
}
});
});
});
</script>
getresult.php
<?php
define('INCLUDE_CHECK',true);
include("mysql.php");
$k=$_POST['k'];
$q=$_POST['q'];
$sql=mysql_query("select * from inward where krishi='$k'");
$row=mysql_fetch_array($sql);
echo $row[$q];
?>

Try to extract both name and address from database and json them
$k=$_POST['k'];
$q=$_POST['q'];
$sql=mysql_query("select address,name from inward where krishi='$k'");
$row=mysql_fetch_array($sql);
$result = array(
'name'=>$row['name'],
'address'=>$row['address']);
echo json_encode($result);
After that parse them via jquery
$.ajax
({
type: "POST",
url: "getresult.php",
data: 'k='+k+'&q=address',
cache: false,
success: function(data)
{
if(data){
var parsedData = jQuery.parseJSON(data);
$("#name").val(parsedData.name);
$("#address").val(parsedData.address);
}
}
});

Javascript Code:
<script type="text/javascript">
$(document).ready(function()
{
$("#krishi").keyup(function()
{
var k = $(this).val();
var q = "name";
$.ajax({
type: 'POST',
url: "getresult.php",
data: 'k='+k,
cache: false,
success: function(data)
{
var jsonArr = $.parseJSON(data);
if(typeof response =='object')
{
$("#name").val(jsonArr.name);
$("#address").val(jsonArr.address);
}
else
{
$("#name").val("");
$("#address").val("");
}
}
});
});
});
</script>
PHP Code:
<?php
define('INCLUDE_CHECK',true);
include("mysql.php");
$k = $_POST['k'];
$sql = mysql_query("select * from inward where krishi='$k'");
$row = mysql_fetch_assoc($sql);
echo json_encode(array('name' => $row['name'], 'address' => $row['address']);
?>

Related

Ajax not posting when value based on selectbox

What I have here is ajax that's post information into textbox from database. This ajax work's in input field, but when I tried to use select box it doesn't working. Why is that?
not working
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
working
<input name="tag" id="tag" type="text" value="" />
Index.php
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
<input name="output" id="output" type="text" value="" />
<script type="text/javascript">
$(document).ready(function()
{
$('input[id="tag"]').change(function()
{
var prjt_code = $("#tag").val();
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});
</script>
autocomplete-ajax.php
<?php
if(isset($_POST['prjt_code'])) {
$prjt_code = $_POST['prjt_code'];
$sql = $mysqli1->query("SELECT * FROM project WHERE project='$prjt_code'");
while($row1 = $sql->fetch_assoc())
{
$code = $row1['project_code'];
}
echo $code;
}
?>
You are targeting input[id="tag"] when you want select[id="tag"]
http://jsfiddle.net/releaf/U28jb/
$(document).ready(function() {
$('select[id="tag"]').on('change', function() {
var prjt_code = $("#tag").val();
alert(prjt_code);
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});

Need to autosubmit form on page loads

i have a website with a jquery search form. I have the searchboxes in every page of the site indide the header. Once you enter the searchwords there it redirects you the the search.php
What i want to do is to make the form submitted as soon as the page loads, because i send the data to the searchbox inside the search.php
Example: in page 1 i enter something and click submit. In search.php loads and in the main search field i have somethis(what i entered before). But i have to click again the submit to see the results. Any idea how can i make the form autosubmit when im being redirected? So i can see the results instantly.
Here's the code:
<form method="get" id="myForm" name="myForm" >
<input type="text" name="search" id="search_box" value="<?php $_GET['q']; ?>" placeholder="Enter band, artist, name..." autofocus/>
<input type="submit" value="Go" />
<br />
</form>
and the jquery:
<script type="text/javascript">
$(function() {
//-------------- Update Button-----------------
$(".search_button").click(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
//---------------- Delete Button----------------
});
</script>
$(function(){
$('#myForm').trigger('submit');
});
When the page is ready you simply trigger the submit using jquery.
$(function() {
$(".search_button").click(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
});
$(document).ready(function(){
$('#myForm').submit();
});
You can try this way.
<form method="get" id="myForm" name="myForm" >
<input type="text" name="search" id="search_box" value="" placeholder="Enter band, artist, name..." autofocus/>
<input id="button-submit" type="submit" value="Go" />
</form>
<script type="text/javascript">
$(function() {
function _myFunction () {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word==''){
} else {
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<p style="text-align:center;">Loading Results...</p>');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
}
$("#button-submit").click(function(e) {
e.preventDefault();
_myFunction();
return false;
});
_myFunction(); //This is where the magic happens
});
</script>
By doing that, the page will trigger on loading the function that is used when you click on the button.

Removing appended div box using jquery ajax

I have to implement two functions, append and delete on set of comments. The insertion and deletion are working properly unless in one case.
When i try to remove newly added comment (before refreshing page), it wont remove. But when i refresh the page that comment removes swiftly.
Here's some code.
Following ajax is appending and removing the comment div.
<script type="text/javascript">
$(function() {
$(".commentbutton").click(function()
{
var element = $(this);
var postid = element.attr("id");
var commenttext = $("#commenttext"+postid).val();
var dataString = 'commenttext='+ commenttext+'&postid='+postid;
var postseq='#post'+postid;
if(commenttext=='')
{
alert("Please enter your comment");
}
else
{
//$("#flash").show();
//$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
dataType:'html',
cache: false,
success: function(html){
$(postseq).append(html);
$(postseq).slideDown();
document.getElementById('commenttext'+postid).value='';
}
});
}
return false;
});
$('.delcombutton').click(function()
{
var commid = $(this).attr("id");
var dataString = 'delcomm=1&commid='+commid;
var delcomment = '#comment'+commid;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
cache: false,
success: function(html){
$(delcomment).slideUp('slow', function() {$(this).remove();});
}
});
}
return false;
});
});
</script>
Structure of my div
echo "<div id='post{$postseq}'>";
while($commentonpost=mysql_fetch_array($resultcomm)){
if($commentonpost['visible']==1){
echo '
<div style="width:90%;float:left;margin-left:5%;margin-right:15%;margin-top:10px;" id="comment'.$commentonpost['commentid'].'">
<div style="width:10%;float:left;"><a href="profile.php?user='.$commentonpost['usernick'].'" >'.$commentonpost['fname']." ".$commentonpost['lname'].'</a></div>
<div style="width:78%;float:left;margin-left:2%;">'.$commentonpost['comment'].'</div>
<div style="width:8%;float:right;margin-left:2%;">
';
if($commentonpost['usernick']==$_SESSION['user_nick']){
echo ' <form action="" method="post">
<input type="submit" name="delcomm" value="X" class="delcombutton" id="'.$commentonpost['commentid'].'">
</form>
';
}
echo '<h5 class="msg">'.datetime($commentonpost['date']).'</h5>
</div>
<br/>
</div>
';
}
}
echo "</div>";
echo '
<form name = "form'.$postseq.'" method = "post" action="" onsubmit="return validateform()" style="width:100%">
<div style="width:90%;float:left;margin-left:5%;margin-right:15%;margin-top:10px;">
<div style="width:10%;float:left;"><a href="profile.php?user='.$_SESSION['user_nick'].'" >'.$_SESSION['user_fname']." ".$_SESSION['user_lname'].'</a></div>
<div style="width:78%;float:left;margin-left:2%;"><textarea placeholder="Comment..." name="commenttext" id="commenttext'.$postseq.'" class="inputcomment" ></textarea></div>
<br>
<input type="submit" id="'.$postseq.'" name="SubmitComment" value="Comment " class="commentbutton" style="font-size:1em;width:100px;float:right;margin-top:4px;margin-right:9%;">
</div>
</form>
</div>
';
PS: Sorry for such a raw code, i have very limited internet now.
You have to use delegation for dynamically added elements:
$(document).on('click','.delcombutton',function(){...});
Use event delegation model with .on() for dynamically added elements
$(function() {
$(document).on('click', '.commentbutton', function() {
var element = $(this);
var postid = element.attr("id");
var commenttext = $("#commenttext"+postid).val();
var dataString = 'commenttext='+ commenttext+'&postid='+postid;
var postseq='#post'+postid;
if(commenttext=='') {
alert("Please enter your comment");
}
else {
//$("#flash").show();
//$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
dataType:'html',
cache: false,
success: function(html){
$(postseq).append(html);
$(postseq).slideDown();
document.getElementById('commenttext'+postid).value='';
}
});
}
return false;
});
$(document).on('click', '.delcombutton', function() {
var commid = $(this).attr("id");
var dataString = 'delcomm=1&commid='+commid;
var delcomment = '#comment'+commid;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "insdelcomment.php",
data: dataString,
cache: false,
success: function(html){
$(delcomment).slideUp('slow', function() {$(this).remove();});
}
});
}
return false;
});
});

CodeIgniter: jQuery post and load next page

I am successfully able to save the input value using ajax post but it is not loading the next page.
Client Side code:
<script type="text/javascript">
function notifyEmail() {
var form_data = {
'email':$('#inviteEmail').val()
};
alert($('#inviteEmail').val());
$.ajax({
url: "<?php echo site_url('main/email_invites'); ?>",
type: 'POST',
data: form_data,
success: function(msg) {
return true;
}
});
}
</script>
<input type='text' id='inviteEmail' placeholder='Enter email'/>
<a href='#' name='email' id='invite-all' onclick='notifyEmail();' class='btn'>Notify Me</a>
Controller Code:
function email_invites()
{
$this->load->model('emailInvites');
if($query = $this->emailInvites->saveEmailInvite())
{
$this->load->view('emailInvites');
}
}
What I do is the following which could help you
<script type="text/javascript">
function notifyEmail() {
var form_data = {
'email':$('#inviteEmail').val()
};
alert($('#inviteEmail').val());
$.ajax({
url: "<?php echo site_url('main/email_invites'); ?>",
type: 'POST',
data: form_data,
dataType:'json',
success: function(msg) {
if(msg.response)
//load the content in the body or wherever you want
jQuery('body').load("<?php echo site_url('main/email_invites/show'); ?>");
else
console.log("Opps, Something wrong happend");
return true;
}
});
}
</script>
<input type='text' id='inviteEmail' placeholder='Enter email'/>
<a href='#' name='email' id='invite-all' onclick='notifyEmail();' class='btn'>Notify Me</a>
In the controller
function email_invites($action = 'process')
{
if($action == 'process')
{
$this->load->model('emailInvites');
$query['response'] = $this->emailInvites->saveEmailInvite();
echo json_encode($query);
}
else
{
$this->load->view('emailInvites');
}
}
You do not need to echo the url, just use it in ajax call like this,
$.ajax({
url: 'main/email_invites',
type: 'POST',
data: form_data,
success: function(msg) {
return true;
}
});
If site_url method returns the required url, then the ajax call needs to be,
$.ajax({
url: "<?php echo site_url('main/email_invites'); ?>",
type: 'POST',
data: form_data,
success: function(msg) {
return true;
}
});

Sending data to php function from ajax

I am using an ajax call which is as follows
var ID=$(this).attr('id');
var input=$("#input_"+ID).val();
var dataString = {id: ID, value: input};
$("#span_"+ID).html(input);
if(input.length>0)
{
$.ajax({
type: "POST",
url: "/apps/worker_app.php",
data: dataString,
cache: false,
success: function(html)
{
$("#span_"+ID).html(span);
}
});
}
How can I get the data in my php function edit_ajax() which is inside worker_app
I use post but the array come to be empty
Thanks
Add dataType: 'json',
var ID=$(this).attr('id');
var input=$("#input_"+ID).val();
var dataString = {id: ID, value: input};
$("#span_"+ID).html(input);
if(input.length>0)
{
$.ajax({
type: "POST",
url: "/apps/worker_app.php",
data: dataString,
dataType: 'json',
cache: false,
success: function(msg)
{
$("#span_"+ID).html(span);
}
});
}
and in worker_app.php get id and value by
$id=$_POST['id'];
$value=$_POST['value'];
edit_ajax($id,$value);
function edit_ajax($id,$value){
$sql="update from ..........";
}
Is this what u want?
Have you tried setting the dataType in your ajax call, like this:
$.ajax({
type:"POST",
url: "/apps/worker_app.php",
data: dataString,
cache: false,
success:function(html) {
},
dataType:"json"
});
Also, you could use a tool like firebug to see so the data is passed correctly in your ajax request.
Here is an example:
file1.php:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javscript"></script>
<script type="text/javascript">
$(document).ready(function() {
// catch submit event for your form
$('#form1').submit(function() {
// serialize data from form
var data = $(this).serialize();
$.ajax({
type="POST",
url:"file2.php",
data:data,
success:function(resp) {
// output response
$('#output').html(resp);
}
});
return false;
});
]);
</script>
</head>
<body>
<div id="output"></div>
<form method="POST" id="form1">
<input type="text" name="name" />
<input type="submit" value="send" />
</form>
</body>
</html>
file2.php:
<?php
if(isset($_POST['name'])) {
header('Content-type: text/html');
echo '<p>Response From Server - Your name is: '.$_POST['name'].'</p>';
}
?>
in /apps/worker_app.php get those posted values
$id=$_POST['id'];
$value=$_POST['value'];
and now use the values with your php function
function edit_ajax($id,$value)
{
echo $id;
echo $value;
}
echo $return=edit_ajax($id,$value);
now you can get the values in the current page as
success: function(html)
{
$("#span_"+ID).html(span);
}
> $.ajax({
> type: "POST",
> url: "/apps/worker_app.php",
> data: dataString,
> cache: false,
> success: function(msg)
> {
> $("#span_"+ID).html(msg);
> }
> });
on success, the argument function is receiving should be same used with
$("#span_"+ID).html(msg);

Categories