select ajax result and replace in input search PHP - php

I want select result Ajax request and Replace it on my input.
result display in result div,I want selected one of them and insert to mobile input and hidden results
<form method="post" action="#" class="form-horizontal" id="adduser">
<div class="form-group"><label class="col-sm-2 control-label">Mobile</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="mobile" id="mobile" autocomplete="off" />
<div id="result"></div></div>
</div>
<input type="submit" name="useradd" id="useradd" class="btn btn-block btn-w-m btn-success" value="add">
</form>
ajax jquery :
<script>
$(document).ready(function(){
var req = null;
$('#mobile').on('keyup', function(){
var mobile = $('#mobile').val();
if (mobile && mobile.length > 2)
{
$('#loading').css('display', 'block');
if (req)
req.abort();
req = $.ajax({
url : 'ajax.php',
type : 'POST',
cache : false,
data : {
mobile : mobile,
},
success : function(data)
{
console.log(data)
if (data)
{
$('#loading').css('display', 'none');
$("#result").html(data).show();
}
}
});
}
else
{
$('#loading').css('display', 'none');
$('#result').css('display', 'none');
}
});
});
</script>
fetch data and return in Ajax.php
if(isset($_POST['mobile'])) {
$user = new User();
$result = $user->Searchuser($_POST['mobile']);
$mobiles= array();
$names = array();
while ($info = $result->fetch(PDO::FETCH_ASSOC)) {
echo $info['firstname'].'-'.$info['mobile'].'<br/>';
}
}
Look this pic :
I want select Dany and insert that to mobile input

Related

Post and display data on the same page using PHP (MVC) AJAX

I'm trying to post input data and display it on the same page (view_group.php) using AJAX but I did not understand how it works with MVC, I'm new with MVC if anyone could help me it would be very helpful for me.
view_group.php
<script type = "text/javascript" >
$(document).ready(function() {
$("#submit").click(function(event) {
event.preventDefault();
var status_content = $('#status_content').val();
$.ajax({
type: "POST",
url: "view_group.php",
data: {
postStatus: postStatus,
status_content: status_content
},
success: function(result) {}
});
});
}); </script>
if(isset($_POST['postStatus'])){ $status->postStatus($group_id); }
?>
<form class="forms-sample" method="post" id="form-status">
<div class="form-group">
<textarea class="form-control" name="status_content" id="status_content" rows="5" placeholder="Share something"></textarea>
</div>
<input type="submit" class="btn btn-primary" id="submit" name="submit" value="Post" />
</form>
<span id="result"></span>
my controller
function postStatus($group_id){
$status = new ManageGroupsModel();
$status->group_id = $group_id;
$status->status_content = $_POST['status_content'];
if($status->postStatus() > 0) {
$message = "Status posted!";
}
}
first in the ajax url you must set your controller url , then on success result value will be set on your html attribute .
$.ajax({
type: "POST",
url: "your controller url here",
data: {
postStatus: postStatus,
status_content: status_content
},
success: function(result) {
$('#result).text(result);
}
});
Then on your controller you must echo the result you want to send to your page
function postStatus($group_id){
$status = new ManageGroupsModel();
$status->group_id = $group_id;
$status->status_content = $_POST['status_content'];
if($status->postStatus() > 0) {
$message = "Status posted!";
}
echo $status;
}

I wanna display json data to a card in html page using ajax

Output of my requirement
I have tried many times to get the required result in html page.
am calling a function when i check a box in html ,the function giving back result of json data and this json data i wanna display dynamically into my card style.
Here is hmtl code:
<div id="filter"style="margin-top:100px;margin-left:100px">
<h2>Filter options</h2>
<div>
<input type="checkbox" id="Samsung" checked>
<label for="Samsung">Samsung</label>
</div>
<div>
<input type="checkbox" id="iPhone" checked>
<label for="iPhone">iPhone</label>
</div>
<div>
<input type="checkbox" id="HTC" checked>
<label for="HTC">HTC</label>
</div>
<div>
<input type="checkbox" id="LG" checked>
<label for="LG">LG</label>
</div>
<div>
<input type="checkbox" id="Nokia" checked>
<label for="Nokia">Nokia</label>
</div>
</div>
<table id="phones" >
<thead>
</thead>
<tbody >
<div style="margin-top:100px;margin-left:100px;margin-right:100px" >
<div>
<label style="margin-bottom:50px;margin-left:80px"><h2>Find your best hotel</h2></label>
</div>
<div class="col-xs-12 col-sm-4" style="background-color:lavender;height:310px;width:310px"><label id="hotel_image"></label></div>
<div class="col-xs-12 col-sm-6" style="background-color:lavenderblush;"><label id="hotel_name"></label></div><br>
<div class="col-xs-12 col-sm-3" style="background-color:lavender;margin-left:100px;margin-top:10px"><label id="hotel_price"></label></div>
<div class="col-xs-12 col-sm-3" style="background-color:#ccc;margin-top:220px;margin-left:300px"><label id="book_me"></label></div>
</div>
</tbody>
</table>
Here is javascript code:
<script>
function getPhoneFilterOptions(){
var opts = [];
$checkboxes.each(function(){
if(this.checked){
opts.push(this.id);
}
});
return opts;
}
function updatePhones(opts){
$.ajax({
type: "POST",
url: "submit.php",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success: function(data){
$.each(data, function() {
$.each(this, function(k , v) {
if(k==='img_path'){
v = "<a href='image_description.html'><image src='img_path' height='300px' width='300px' ></a>";
("#hotel_image").html(v);
} else if (k==='price'){
("#hotel_price").html(v);
} else if (k==='brand'){
("#hotel_name").html(v);
}
})
});
}
})
}
var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
var opts = getPhoneFilterOptions();
updatePhones(opts);
});
$checkboxes.trigger("change");
</script>
am geeting data json data from submit.php like this:
[
{
"img_path":"photo1.jpg",
"price":"2000",
"brand":"AAMSOTO"
},
{
"img_path":"photo4.jpg",
"price":"2500",
"brand":"AfMSOTO"
},
{
"img_path":"photo2.jpg",
"price":"3000",
"brand":"CAMSOTO"
},
{
"img_path":"photo3.jpg",
"price":"4000",
"brand":"BAMSOTO"
}
]
Assuming data is a javascript object the following inside your success method should work:
Make sure data is a javascript object, if its not you will have to use JSON.parse() to turn the JSON data into one.
$.each(data, function() {
var imageUrl = this['img_path']
var price = this['price']
var brand = this['brand']
const img = document.createElement('img');
img.src = imgUrl;
document.getElementById('#hotel_image').appendChild(img);
document.getElementById('#hotel_price').appendChild(document.createTextNode(price));
document.getElementById('#hotel_name').appendChild(document.createTextNode(brand));
}

Cannot insert data in database using ajax post jquery request with codeigniter

I want to insert row in database using ajax jquery post method for that i am using the below code in Codeigniter, but my data is not inserted in a database.
Please help to sort out my issue.
View:
$("#Submit_Course_Goal").on("click", function (e) {
e.preventDefault();
var dataString = $("form#courseGoalForm").serializeArray();
alert("datastring"+dataString);
$.ajax({
type: "post",
url: "<?php echo base_url();?>create_course/create_course_goal",
cache: false,
data: dataString,
success: function(data){
alert("data"+data);
},
error: function(){
alert('Error while request..');
}
});
});
<form name="courseGoalForm" id="courseGoalForm" action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="c_id" value="<?=$result;?>" />
<textarea data-focus="false" rows="8" name="description1"> </textarea>
<textarea data-focus="false" rows="8" name="description2"> </textarea>
<textarea data-lang="en" rows="8" name="description3"> </textarea>
<input type="submit" name="submit" value="Save" class="btn btn-primary btn btn-success" id="Submit_Course_Goal" />
</form>
Model:
public function create_course_goal($data,$id) {
$this->load->database();
$this->db->where('id', $id);
$this->db->update('course', $data);
$course_id=$id;
if ($this->db->affected_rows() > 0) {
return $course_id;
}
else
{
return false;
}
}
Controller:
public function create_course_goal(){
$course_goal1=$this->input->post('description1');
$course_goal2=$this->input->post('description2');
$course_goal3=$this->input->post('description3');
$id=$this->input->post('c_id');
$data=array('course_goal1'=>$course_goal1,'course_goal2'=>$course_goal2,'course_goal3'=>$course_goal3);
$result_course = $this->course_model->create_course_goal($data,$id);
if($result_course!='false')
{
return true;
}
else
{
return false;
}
}
have you tried this !
var dataString = $("#courseGoalForm").serialize();
instead of
var dataString = $("form#courseGoalForm").serializeArray();
Try these codes.
("#Submit_Course_Goal").on("click", function (e) {
e.preventDefault();
var description1 = $("#description1").val();
var description2 = $("#description2").val();
var description3 = $("#description3").val();
$.ajax({
type: "post",
url: "<?php echo base_url();?>create_course/create_course_goal",
cache: false,
data: {
desc1 : description1,
desc2 : description2,
desc3 : description3
},
success: function(data){
console.log(data);
},
error: function(){
alert('Error while request..');
}
});
});
<!-- Form -->
<form name="courseGoalForm" id="courseGoalForm" action="" method="post" enctype="multipart/form-data" onclick="return false">
<input type="hidden" name="c_id" value="<?=$result;?>" />
<textarea data-focus="false" rows="8" name="description1" id="description1"> </textarea>
<textarea data-focus="false" rows="8" name="description2" id="description2"> </textarea>
<textarea data-lang="en" rows="8" name="description3" id="description3"> </textarea>
<input type="submit" name="submit" value="Save" class="btn btn-primary btn btn-success" id="Submit_Course_Goal" />
</form>
<!-- Controller -->
<?php
public function create_course_goal(){
$data=array(
'ID' => $this->input->post('c_id'),
'course_goal1'=> $this->input->post('desc1'),
'course_goal2'=> $this->input->post('desc2'),
'course_goal3'=> $this->input->post('desc3')
);
$result = $this->course_model->create_course_goal($data);
if ($result) {
echo 'success';
}else echo 'fail';
}
/*MODEL*/
function create_course_goal($data = array())
{
return $this->db->insert('course',$data);
}
?>
Try this.
Controller.
public function create_course_goal(){
$data=array(
'ID' => $this->input->post('c_id'),
'course_goal1'=> $this->input->post('description1'),
'course_goal2'=> $this->input->post('description2'),
'course_goal3'=> $this->input->post('description3')
);
$result = $this->course_model->create_course_goal($data);
if ($result) {
echo 'success';
}else echo 'fail';
}
Model
function create_course_goal($options = array())
{
if(isset($options['course_goal1']))
$this->db->set('course_goal1',$options['course_goal1']);;
if(isset($options['course_goal2']))
$this->db->set('course_goal2',$options['course_goal2']);;
if(isset($options['course_goal3']))
$this->db->set('course_goal3',$options['course_goal3']);;
$this->db->where('ID',$options['ID']);
$this->db->update('course');
return $this->db->affected_rows();
}
Note : course_goal1, course_goal2, course_goal3 should be same as in database. and course should be database table's name.
This was for update database if you want to insert new data use this model
function addNewData($data = array())
{
return $this->db->insert('course',$data);
}
Note 2 : in your database 'id' should be primary and auto incrementing
your table name should be 'course'
and row names should be 'course_goal1', 'course_goal2', 'course_goal3'
Have you tried removing method='post' from the Form and submit your data with ajax

Cancel submit jquery

This is a part of the code from a form requesting data to check if the email alredy exist. The thing is, the program is supposed to return 0 if there is no any mail like this. It dont work properly, because the program keep sending the data, even if the mail is not correct.
If you want more info, or i am missing something let me know. Thanks in advance.
$(document).ready(function () {
$("#enviar").click(function(e) {
e.preventDefault();
var error = false;
consulta = $("#email2").val();
$.ajax({
type: "POST",
url: "compruebaEmail.php",
data: "b="+consulta,
dataType: "html",
error: function(){
alert("error petición ajax");
},
success: function(data){
if(data==0){
$("#error").html("Email incorrecto");
error = false;
}else{
$("form").unbind('submit').submit();
}
}
});
if (error){
return false;
}
});
});
And here is my compruebaEmail.php
<?php require_once('connections/vinoteca.php'); ?>
<?php
mysql_select_db($database_vinoteca, $vinoteca);
$user = $_POST['b'];
if(!empty($user)) {
comprobar($user);
}
function comprobar($b) {
$sql = mysql_query("SELECT * FROM usuarios WHERE email = '".$b."'");
$contar = mysql_num_rows($sql);
if($contar == 0){
echo 0;
}else{
echo 1;
}
}
?>
And here goes the POST
<form method="POST" name="form1" action="validarUsu.php">
<div class="row">
<span class="center">Email</span>
</div>
<div class="row">
<input type="text" name="email" id="email2" value="" size="32" />
</div>
<div class="row">
<span class="center">Contraseña</span>
</div>
<div class="row">
<input type="password" name="password" id="id2" value="" size="32" />
</div>
<div class="row">
<span id="error"> </span>
</div>
<div class="row">
<input type="submit" value="Acceder" id="enviar" size="20">
</div>
<div class="row">
Recuperar contraseña
</div>
</form>
The problem is you're returning false from your Ajax function. You need to return false from your click function. Give this a try:
$("#enviar").click(function() {
var error = false;
consulta = $("#email2").val();
$.ajax({
type: "POST",
url: "compruebaEmail.php",
data: "b="+consulta,
dataType: "html",
error: function(){
alert("error petición ajax");
},
success: function(data){
if(data==0){
$("#error").html("Email incorrecto");
error = true;
}
}
});
if (error)
return false;
});
If all you want is canceling the submitting event, then :
Either :
1 - Add the event arg to your click handler :
$("#enviar").click(function(event){
2 - use event.preventDefault(); when you want to cancel the submit message :)
or change the "return false;" location so that it will be triggered in the "click" handler scope and note the "success" scope e.g with a boolean that would represent if there is an error (EDIT : that is Styphon' solution)
Documentation here : http://api.jquery.com/event.preventdefault/

Must submit form twice

I have the following script. It works in jsFiddle
The problem is when I fill in the title AND the text box I have to submit TWICE.
Does someone have an idea of what I'm doing wrong?!
form:
<form id="formid" class="form" method="POST" action="/">
<div>
<label class="title">Title</label>
<div id="titleError"></div>
<input type="text" id="title" name="title" value="">
</div>
<div>
<label class="title">Text</label>
<div id="textError"></div>
<textarea name="text" id="text" rows="14" cols="50"></textarea><br />
</div>
<div>
<input class="btn btn-success" type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
JS:
<script type='text/javascript'>
$(document).ready(function() {
$("#formid").submit( function(event) {
tinyMCE.triggerSave();
var title = $('#title').val();
var text = $('#text').val();
if( title.length === 0 || text.length === 0 ){
if( title.length === 0 ){
$("#titleError").html("<p>Title verplicht</p>");
event.preventDefault();
}
if( text.length === 0 ){
$("#textError").html("<p>Text verplicht</p>");
event.preventDefault();
}
$("html, body").animate({ scrollTop: 0 }, 600);
}
else{
tinyMCE.triggerSave();
/* stop form from submitting normally */
event.preventDefault();
/* Send the data using post */
var posting = $.post( 'http://domain.nl/admin/pages/create', {
title: $('#title').val(),
text: $('#text').val()
});
/* Put the results in the show-content div */
posting.done(function( data ) {
//alert(data);
$.ajax({
url: "<?php echo base_url() ?>/admin/pages",
type: 'GET',
success: function(data) {
$("#show-content").hide().html( data).fadeIn(1500);
}
,
error: function() {
alert("error");
}
});
});
}
});
});
</script>
The solution:
I add this
tinyMCE.triggerSave();
after
$("#formid").submit( function(event) {
and now it works correctly!

Categories