i have a javascript onchange function on my select tag which when selected it sends the data to my php file and retruns it. i want the results to be displayed in a textbox with ID typid. all seems well. the function response returns data from the php file but for some reason its not displaying in my textbox. i tried to display in a span tag but still not working. kindly help. below is my function.
function getvalues(){
var select1 =document.getElementById('select1').value;
var datastring = 'select1='+select1;
$.ajax({
type:"POST",
url:"gettypid.php",
data:datastring,
dataType: 'Text',
cache:false,
success:function(html){
var k= html;
//$("#typid").html(html.responseText);
// alert(k);
$('#typid').HTML(html);
getvalues();
}
});
return false;
}
You should use .val() function to set value.
$('#typid').val(html);
Form inputs have no html values so if you want to get or set the input text by using val() function.
function getvalues(){
var select1 = document.getElementById('select1').value;
var datastring = 'select1='+select1;
$.ajax({
type:"POST",
url:"gettypid.php",
data:datastring,
dataType: 'Text',
cache:false,
success:function(html){
$('#typid').val(html);
getvalues();
}
});
return false;
}
Related
I have a small ajax script with which i'm searching and loading results without reloading or redirecting the page:
$(document).ready(function(){
$('#db-search').keyup(function(){
var txt = $(this).val();
if(txt != ''){
$('#db-search-results').html('');
$.ajax({
url: 'search.php',
method: 'post',
data:{search:txt},
dataType: 'text',
success:function(data){
$('#db-search-results').html(data);
}
});
} else{
//reload previus data
}
});
});
It works but there is a problem. Before entering anything in #db-search field I'm already displaying all the results from the database inside #db-search-results. Now when I'm searching for something all that previous data is replaced with those new results but if I clear the search field my results are gone(which is ok) but my previous data isn't coming back.
Is there a way to keep previous data after clearing that search field?
P.S: currently i'm just performing a SELECT * query and then i'm loading it using $('#db-search-results').html('search.php'); but that's an extra query and I would rather search for another way of doing this :D
You could store it in a variable once the page is loaded and display it when you need like :
$(document).ready(function(){
var default_data = $('#db-search-results').html();
$('#db-search').keyup(function(){
var txt = $(this).val();
if(txt != ''){
$('#db-search-results').html('');
$.ajax({
url: 'search.php',
method: 'post',
data:{search:txt},
dataType: 'text',
success:function(data){
$('#db-search-results').html(data);
}
});
} else{
$('#db-search-results').html(default_data);
}
});
});
I hope this helps
$(document).ready(function(){
var previousData='';
$('#db-search').keyup(function(){
var txt = $(this).val();
if(txt != ''){
$('#db-search-results').html('');
$.ajax({
url: 'search.php',
method: 'post',
data:{search:txt},
dataType: 'text',
success:function(data){
previousData=data;
$('#db-search-results').html(data);
}
});
} else{
//reload previus data
$('#db-search-results').html(previousData);
}
});
});
I am trying to submit a form which will insert data into a mysql database which is working fine. I then would like to return the id of the new inserted row (id auto increment in mysql table) as I want to open up a modal once the form is submitted so I can provide a link which includes id as a parameter in the url.
To send the data for the form I am using the following code:
$(document).ready(function(){
$("#submitForm").click(function(){
var string = $('#commentForm').serialize();
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "SubmitData.php",
data: string,
cache: false,
success: function(result){
//alert(result);
}
});
});
});
The SubmitData.php file then inserts the form data into the database.
In the SubmitData.php I can create a variable to pick up the id of the newly inserted row like
$last_id = mysqli_insert_id($conn);
Is there a way I can return the $last_id from the SubmitData.php file within the same function?
Yes return from SubmitData.php the id using the following echo:
echo json_encode(['id'=>$last_id]);
js:
$(document).ready(function(){
$("#submitForm").click(function(){
var string = $('#commentForm').serialize();
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "SubmitData.php",
data: string,
cache: false,
success: function(result){
alert(result.id);//this will alert you the last_id
}
});
});
});
print last id in that php file
echo $last_id;
get that in ajax success function
success: function(result){
alert(result);
}
I have javascript to get content from another page, like this :
$.get('disp/run_txt.php?type=andon&dispnm=PS&line=1',function(data){
$('#result').html(data);
});
What I want is the value of id='result' can transfer to variable, i have try :
$result = "<span id='runtxt'></span>";
echo $result;
My question is, how to capture the id='result' to variable?
Try
var resultVariable = $('#result').val(); //For non-text value
OR
var resultVariable = $('#result').text(); //For text value
If you want to pass what you have in data to some PHP code, you will have to do an ajax call to a php page.
$.get('disp/run_txt.php?type=andon&dispnm=PS&line=1',function(data){
$('#result').html(data);
var url = 'your-php-page.php';
// Will now send data to your-php-page.php
// where you can assign it to the variable
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
});
Ok, what i'm trying to do is to create a list of select boxes which update their value each depending on the above:
the first one is like that:
<script>
var $schoolRegion = $('#stage_attendedSchoolRegion');
$schoolRegion.change(function() {
var $form = $(this).closest('form');
var data = {};
data[$schoolRegion.attr('name')] = $schoolRegion.val();
$.ajax({
url : $form.attr('action'),
type: $form.attr('method'),
data : data,
success: function(html) {
$('#stage_attendedSchoolDistrict').replaceWith(
$(html).find('#stage_attendedSchoolDistrict')
);
}
});
});
</script>
when it's value changes an ajax request is dispatched, and the choices of the "#stage_attendedSchoolDistrict" select are updated with the POST html value.
Since here's all good, now i need to do the same with the "#stage_attendedSchoolDistrict" select so:
<script>
var $schoolDistrict = $('#stage_attendedSchoolDistrict');
$schoolDistrict.on.change(function() {
var $form = $(this).closest('form');
var data = {};
data[$schoolDistrict.attr('name')] = $schoolDistrict.val();
$.ajax({
url : $form.attr('action'),
type: $form.attr('method'),
data : data,
success: function(html) {
$('#stage_attendedSchoolCity').replaceWith(
$(html).find('#stage_attendedSchoolCity')
);
}
});
});
</script>
The problem is that the event doesn't trigger at all. I'm thinking it is related to the fact that the former has values in the HTML of the page while the latter doesnt. How can i solve?
Any suggestion is appreciated, thanks for the help.
You're calling on.change in the second example instead of just .change as in the first example.
i have this working code with this code i can pass data to div within same page
but insted of passing data to div i want to pass this to label or textbox so that i can post it to the server. i am new in ajax,jquery . please suggest me best answer
<script type="text/javascript">
//send clicker data to div
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(){
//alert(data);
$('.responseDiv').text(data);
}
});
});
});
</script>
<script type="text/javascript">
i think i need to change this line only
$('.responseDiv').text(data);
but dont know how to do that. didnt find any solution on net also
take any name like propertyId
Let's say the text field has id="propertyID"
Use the val() method to assign this new value to your text field.
$('#proertyID').val(data);
Like:
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(){
//alert(data);
// $('.responseDiv').text(data);
$('#proertyID').val(data);
}
});
});
});
In the below line change selector .responseDiv with id/name or class of input/label $('.responseDiv').val(data);
<script type="text/javascript"> //send clicker data to div
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(data2){
//alert(data);
$('.responseDiv').text(data2);
}
});
});
});
success return in data2 and use this..