I have the following text fields -
<input type="text" name="id" id="id" tabindex="1">
<input type="text" name="name" id="name" tabindex="1"/>
and the screenshot of mysql database is -
id name
123 John
124 Rahi
When I insert the track id in the first text field then the corresponding student name should be shown in the second field. How can it be done using ajax ?
Try this:
>> Trigger onblur event (javascript function) for the first textbox.
>> Define ajax in that function to get name.
>> Show the name in textbox.
I think this is simplest way to get this.
--
Thanks
You can call a jquery function on onblur() event of the textbox.
<input type="text" name="id" id="id" tabindex="1" onblur="getname()">
Write the ajax function for getting the name like:
<script>
function getname()
{
var id=$("#id").val(); // get the id from textbox
$.ajax({
type:"post",
dataType:"text",
data:"id="+id,
url:"page.php", // url of php page where you are writing the query
success:function(response)
{
$("#name").val(response); // setting the result from page as value of name field
}
});
}
</script>
and write the code for fetching the result in a page, say page.php
$id=$_POST['id'];
$query=mysql_query("select name from table where id=$id");
$result=mysql_fetch_row($query);
echo $result[0]; // echo the name to js function
exit;
Related
I am trying to set up a form that allows users to input an id that they've been given. When the ID is submitted, the back-end is checked to see if that id exists and if it does it returns data
I haven't really tried anything I'm just trying to wrap my mind around how to get this done
Here is the form code:
<form action="/action_page.php">
Dealership:<br>
<input type="text" name="dealership">
<br>
Email:<br>
<input type="text" name="email">
<br><br>
Phone Number:<br>
<input type="text" name="phonenum">
<br><br>
Order ID:<br>
<input type="text" name="order_id">
<br><br>
<input type="submit">
</form>
Here is the ajax:
$(document).ready(function (){
$("#works").hide();
var $dealership = $('dealership');
var $email = $('email');
var $phonenum = $('email');
var $order_id = $('order_id');
$('.submit').click (funciton(){
var track = {
dealership : dealership.val(),
email: email.val(),
phonenum = phonenum.val(),
order_id = order_id.val(),
};
$.ajax({
type: 'GET',
url: 'http://testingapi.com/api/order-status',
data: track,
success: function() {
tracking.append();
},
sucess: funciton(itWorked) {
}
});
});
});
It may be necessary to remove the submit type button and add the button type.
Also, in your code the ID is by class $ (". Submit").
then add the class to the button too.
<button type="button" class="submit">Submit</button>
This is fairly simple. Once you've accepted the order_id from the user you can pass it along in your data dictionary like this (along with anything else you want to pass):
data: {
'id': order_id,
}
On your server side you could so something like this to retrieve the ID:
In PHP:
$id = $_GET['id'];
In Django:
id = request.GET.get('id')
Once you've done this you can just query your database and pass this id in the query to check if records match or not.
i have a form with a switch toggle and a input field named userid.
When i switch the toggle all works fine and the active.php save the new status in the database.
But now i want to have also the userid value to the active.php.
The var mode can i get in the active.php via
$mode=$_POST['mode'];
How can i send the userid also to active.php?
Any idea?
Thank you
<input type="checkbox" name="<?php echo 'toggle'.$c;?>" id="<?php echo 'toggle'.$c;?>" data-toggle="toggle" data-off="OFF" data-on="ON" checked>
<input id="userid" name="userid" type="hidden" value="<?php echo $userid;?>">
This is the js code
$('#<?php echo 'toggle'.$c;?>').change(function(){
var mode= $(this).prop('checked'),
$.ajax({
type:'POST',
dataType:'JSON',
url:'active.php',
data:'mode='+mode,
success:function(data)
{
var data=eval(data);
message=data.message;
success=data.success;
$("#heading").html(success);
$("#body").html(message);
}
});
});
Use the & to separate the two keys.
First of all, retrieve the userid value
var userid = $('#userid').val();
data:'mode=' +mode+'&userid='+userid,
In your ajax parameter, change the data attribute to look as follows:
data: 'mode='+mode + '&userid=' + $('#userid').val ()
How to fill the complete form input fields from Database based on the value selected from the Dropdown
Example: In a Application, by selecting a client name it fills the complete form input fields with the details stored in the Database.
Sample Code:
<select name="client">
<option value="">-- Select Client Name -- </option>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<input name="phone" type="text" value="">
<input name="email" type="text" value="">
<input name="city" type="text" value="">
<textarea name="address"></textarea>
All the about input fields need to be filled with values on client name selection.
EDIT:
I tried with AJAX but couldn't able get the particular variable from the file... below is my code:
<script>
$(document).ready(function() {
$('#client').change(function() {
alert();
var selected = $(this).find(':selected').html();
$.post('get_details.php', {'client': selected}, function(data) {
$('#result').html(data);
});
});
});
</script>
In the get_details.php file I am storing different values in different variables, but I didn't understand how to get them to individual variable to main page.
This is a just a basic jQuery example that calls itself (the top portion of the script is active when a $_POST is made), which I have named index.php as indicated in the url of the jQuery AJAX. You can use two separate pages to do this if you want. Just separate out the PHP from the HTML/Javascript and change the url: '/index.php':
<?php
// This is where you would do any database call
if(!empty($_POST)) {
// Send back a jSON array via echo
echo json_encode(array("phone"=>'123-12313',"email"=>'test#test.com','city'=>'Medicine Hat','address'=>'556 19th Street NE'));
// Exit probably not required if you
// separate out your code into two pages
exit;
}
?>
<form id="tester">
<select name="client" id="client">
<option value="">-- Select Client Name -- </option>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<input name="phone" type="text" value="">
<input name="email" type="text" value="">
<input name="city" type="text" value="">
<textarea name="address"></textarea>
</form>
<!-- jQuery Library required, make sure the jQuery is latest -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// On change of the dropdown do the ajax
$("#client").change(function() {
$.ajax({
// Change the link to the file you are using
url: '/index.php',
type: 'post',
// This just sends the value of the dropdown
data: { client: $(this).val() },
success: function(response) {
// Parse the jSON that is returned
// Using conditions here would probably apply
// incase nothing is returned
var Vals = JSON.parse(response);
// These are the inputs that will populate
$("input[name='phone']").val(Vals.phone);
$("input[name='email']").val(Vals.email);
$("input[name='city']").val(Vals.city);
$("textarea[name='address']").val(Vals.address);
}
});
});
});
</script>
When you made ajaxCall return data in json format like
json_encode(array("phone"=>'123-12313',"email"=>'test#test.com','city'=>'Medicine Hat','address'=>'556 19th Street NE'));
above shown
then parse it in jQuery and put the value in different selectors like
var Vals = JSON.parse(response);
// These are the inputs that will populate
$("input[name='phone']").val(Vals.phone);
above shown.
i want to pass a jquery variable into php,
l'ets say:
i have this input:
<input type="text" name="" id="course" />
an jquery:
$.get('test.php',
function(data) {
$('#details').html(data);
}
);
and test.php:
$sql = "select name, id, parent_id from mytable where parent_id='theinput'";
so basiclly i want the input data that filled by user to be in the php query ('theinput')
use this:
$.get("test.php",
{"param":"param value"},
function(returned_data)
{
alert(returned_data);
});
in the text.php
get the value of "param" and write the mysql query.
<input type="text" name="course" id="course" />
<script>
var data = $('#course').val();
$.get('test.php?data='+data);
<script>
Make the the name of the textbox that same as the id.
Take the value of the textbox with a variable which takes data from
the elements val.
You could write it like this:
$('#course').focusout(
function ()
{
var data= $(this).attr('value');
load('test.php?data='+data);
}
);
I'm trying to build a nice contact form, from where a user can send an e-mail. I have 3 input fields (1. name, 2. e-mail address, 3. telephone number).
<p>
<label for="name"><?php echo $label_name; ?></label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email"><?php echo $label_email; ?></label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="tel"><?php echo $label_tel; ?></label>
<input type="text" name="tel" id="tel" size="30" />
</p>
The styling of the fields is made with the following JQUERY script:
$(document).ready(function() {
$('input[type="text"]').addClass("idle");
$('input[type="text"]').focus(function() {
$(this).removeClass("idle").addClass("focus");
this.select();
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focus").addClass("idle");
});
});
Basically what I want is to style the fields with RED border, if the server would return false (using AJAX and PHP). For this, I searched the net and tried to implement a few scripts, but none worked. Here's what I tried:
$(document).ready(function() {
$('input[type="text"]').blur(function() {
$.ajax({url:"php/verify_field.php", success:function(result){
$(this).removeClass("idle").addClass(result);
}});
});
});
Thank you all for answering!
The reply of Omid Amraei seems to suit my project so far. But could we add some spice to all this script: I would like to transmit 2 parameters with the Jquery-Ajax script to the server-side PHP file:
the ID of the text input
the value of the text input.
All this with POST method!
This way I could parse the information in the PHP file using $_POST method and check first the ID, then run the verification criteria on the value of the input.
Many thanks for all!
Happy Saturday :)
Because using this in Ajax callback does not point to your input, so try this :
$(document).ready(function() {
$('input[type="text"]').blur(function() {
var $input = $(this);
$.ajax({url:"php/verify_field.php", success:function(result){
$input.removeClass("idle").addClass(result);
}});
});
});
this in this case isn't the textbox it's the ajax jquery object
Change the context to this.
$('input[type="text"]').blur(function() {
$.ajax({
url:"php/verify_field.php",
context: this
success:function(result){
$(this).removeClass("idle").addClass(result);
}});
});
docs:
contextObject
This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax).