How do i load data into textfields after clicking a checkbox & after doing it, i need to disable that textbox, but again as i uncheck it, need to remove that data & make the textbox enable to manually enter data. I tried this code,i'm new to jquery/ajax, can't figure out how to solve this problem.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#chk').click(function(){
if($(this).is(":checked"))
$("#txtaddress").removeAttr("disabled");
else
$("#txtaddress").attr("disabled" , "disabled");
// here, i don't know how do i assign $row['address'] to txtaddress by
// using php mysql
});
});
</script>
<!-this is my html code-->
<form>
<input type="checkbox" id="chk" name="chk">Same as home address?
<input id="txtaddress" name="txtaddress" disabled type="text">
</form>
Try the following,
<script>
$(document).ready(function(){
$('#chk').click(function(){
if($(this).is(":checked"))
$("#txtaddress").val(""); //reset the textbox
$("#txtaddress").removeAttr("disabled");
else {
$.ajax({
type: 'GET',
url: destinationUrl, // your url
success: function (data) { // your data ie $row['address'] from your php script
$("#txtaddress").val(data); //set the value
$("#txtaddress").attr("disabled", "disabled");
}
});
}
});
});
</script>
From your php script you can echo $row['address'], so the data in success function can be put into textbox in ajax
javascript code:
$(document).ready(function(){
$('#chk').click(function(){
var txt = $("#txtaddress");
($(this).is(":checked")) ? txt.attr("disabled" , true) : txt.attr("disabled" , false);
});
});
I hope this is what u meant.. Hope this might help... :)
$('#chk').click(function(){
if(! $(this).is(":checked")){
$("#txtaddress").removeAttr("disabled");
$("#txtaddress").val('');
}
else{
$.ajax( {
url: "get_row_details",
type: "POST", //or may be "GET" as you wish
data: 'username='+name, // Incase u want to send any data
success: function(data) {
$("#txtaddress").val(data); //Here the data will be present in the input field that is obtained from the php file
}
});
$("#txtaddress").attr("disabled" , "disabled");
}
});
From the php file echo the desired $row['address'].This value will be obtained at the success of the ajax function
Related
I need to use a localStorage value in a PHP file to update values in my database. I know that I need ajax to achieve this, I can't get it to work.
My localStorage item is named option and it exists (checked in browser and stored the value in a div)
$(document).ready(function(){
$.ajax({
type: "POST",
url: "activity.php",
data: { storageValue: localStorage.getItem('option') },
success: function(data){
alert('success');
}
});
});
PHP Example:
$option = $_POST['storageValue'];
mysql_query("...SET x = '".$option."'...");
echo 'Update complete';
I dont see any post data nor do I get a response.
Thank you!
Your page:
<form>
<input type="hidden" value="thedatayouwanttopost" id="option"/>
</form>
<script src="Your_Js_File.js"></script>
Your JS file:
document.getElementById('option').submit(); // This submits the form
var storageValue = $('#option').val(); // This gets the value of the form once it has been posted to the .php file
$(document).ready(function(){
$.ajax({
type: "POST",
url: "activity.php",
data: { storageValue:storageValue },
success: function(data){
alert('success');
}
});
return false; // This stops the page from refreshing
});
Your PHP file to callback the data to AJAX and display the alert (activity.php):
...
$option = $_POST['storageValue']; // This is the post value of your hidden input on your page
mysql_query("...SET x = '".$option."'...");
?><input type="hidden" id="option" value="<?php echo $option; ?>"><?
// The input above posts the value of 'option' on your page back to your Ajax and spits out the request.
...
I'm "fighting" with this for hours now, I hope you could help me with the solution. So I've got a basic form with an empty div that will be then filled:
<form method='post' action='/shoutek.php'>
<input type='text' id='shout_tresc' name='shout_tresc' class='shout_tresc' />
<input type='submit' id='dodaj' value='Dodaj' />
</form>
<div class='shoutboxtresc' id='shout'></div>
<span class='loader'>Please wait...</span>
The shoutek.php contains the queries to do after submission of the form and functions to populate the div.
Here goes my jquery:
$(function() {
$(\"#dodaj\").click(function() {
// getting the values that user typed
var shout_tresc = $(\"#shout_tresc\").val();
// forming the queryString
var data = 'shout_tresc='+ shout_tresc;
// ajax call
$.ajax({
type: \"POST\",
url: \"shoutek.php\",
data: data,
success: function(html){ // this happen after we get result
$(\"#shout\").toggle(500, function(){
$('.loader').show();
$(this).html(html).toggle(500);
$(\"#shout_tresc\").val(\"\");
$('.loader').hide();
});
return false;
}
});
});
});
The problem in that is that it directs me to shoutek.php, so it does not refresh the div in ajax.
As you can see, I used return false; - i also tried the event.preventDefault(); function - it did not help. What is the problem and how to get rid of it? Will be glad if you could provide me with some solutions.
EDIT
Guys, what I came up with actually worked, but let me know if that's a correct solution and will not cause problems in the future. From the previous code (see Luceous' answer) i deleted
$(function() {
(and of course it's closing tags) and I completely got rid of the:
<form method='post' action='/shoutek.php'>
Leaving the input "formless". Please let me know if it is a good solution - it works after all.
$(function() {
$("#dodaj").click(function(e) {
// prevents form submission
e.preventDefault();
// getting the values that user typed
var shout_tresc = $("#shout_tresc").val();
// forming the queryString
var data = 'shout_tresc='+ shout_tresc;
// ajax call
$.ajax({
type: "POST",
url: "shoutek.php",
data: data,
success: function(html){ // this happen after we get result
$("#shout").toggle(500, function(){
$('.loader').show();
$(this).html(html).toggle(500);
$("#shout_tresc").val("");
$('.loader').hide();
});
return false;
}
});
});
});
For readability I removed your escapes. You've missed the preventDefault which prevents the form from being submitted.
You need to prevent the default action on submit button click:
$("#dodaj").click(function(event) {
event.preventDefault();
// your code
}
I want to update my session variables on textbox's onchange event, without page reload
How to do that.?? thanks!
You must use ajax for it, on on change event of textbox like,
$('textbox').on('change',function(){
$.ajax({
url:'yoururl.php',
data:{data},
success:function(){
alert('success');
}
});
});
I would use on blur, that way it wont set the variable everytime the user types, only when he clicks somewhere else....
$('textbox').blur(function(){
var thevalue = $(this).val();
$.ajax({
url:'yoururl.php',
type: "post",
data:{"value":thevalue},
dataType:"html",
success:function(data){
console.log(data);
}
});
});
THen in your php...
<?php
$_SESSION['yoursessionkey'] = $_POST['value'];
echo "success";
?>
It can be done by combination of javascript and PHP.
Make a function() and insert PHP code in it.
Pass the current argument as in session variable in javascript function..
<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
$("#field").change(function(){
$.ajax({
url: "http://yourserver.com/ajax.php",
data: { value: $("#field").val() }
});
});
});
</script>
...
<input type="text" id="field" />
And in ajax.php:
<?php
$_SESSION['var'] = $_GET['value'];
?>
I have a simple combo box whose value I can get in JavaScript.
I am doing that so I don't need to refresh the page.
Also I want to use the selected value to do some conditional branching after combo box so how do I get the value of combo box from JavaScript to my variable $change.
echo '<select id="combo_1">';
echo '<option value="2">Submative</option>';
echo '<option value="1">formative</option>';
echo '</select>';
Below is my JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#combo_1').change(function(){
});
});
</script>
Here I want to do $change = $(this).val(), but obviously I cant do it like this.
Any suggestions?
i want to do it on the same page without refreshing or without submitting
my url kinda look like this
http://localhost/lms/grade/report/userdef/index.php
and i want it to be on click action
cuz depending on the choice of combobox 2 very different procedures will be called
You're gonna want to use AJAX and submit the form, then you can access the returned data without ever refreshing the page.
Basically:
HTML
<select name="combo" id="combo_1">
<option value="2">Submative</option>
<option value="1">formative</option>
</select>
JavaScript
$('#combo_1').change(function() {
$.post('calcScript.php', $(this).serialize(), function(data) {
alert(data);
});
});
in PHP, you can access your combo data via $_POST['combo'].
<script type="text/javascript">
$(document).ready(function() {
$('#combo_1').change(function(){
var combo_1 = $(this).val();
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {'combo_1':combo_1},
success: function(data){
alert(data)
}
});
});
});
</script>
ajax.php
if( isset($_GET['combo_1]) ) {
echo $change = $_GET['combo_1'];
}
JS:
$.ajax({
type: "POST",
url: './filename.php',
beforeSend: function(){
//If you want to do something
},
data: 'data='$('#combo_1').val(), //Optional '&data2='+value+'&datan='+value,
success: function(msg){
alert(msg);
}
});
PHP:
$val = $_POST['data'];
return 'received successfully';
This will alert 'received successfully'
HTML:
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<input value="load()" id="test" type="submit" />
<div id="result"></div>
Script:
$.ajaxSetup ({
cache: false
});
var loadUrl = "http://localhost/test/process.php";
$("#test").click(function(){
$("#result").load(loadUrl, "content=sd345f"+singleValues);
});
function displayVals() {
var singleValues = $("#single").val();
}
$("select").change(displayVals);
displayVals();
That is my current code, I'm new to jquery and what i wanna ask is how do i make the var singleValues update when i choose a list from a dropdown and append it as a get value when i click on submit?
ANd here's process.php BTW:
<?php file_put_contents('1.txt',$_GET['content']); ?>
If I understand right, you want to load the result when you click on the button.
Try the following code:
$("#test").click(function(){
// get the selected value
var value = $("#single option:selected").val();
// GET to server
$.ajax({
type : "GET",
url : "http://localhost/test/process.php",
data : {
"content" : value
},
success : function(response){
$("#result").html(response);
}
});
// Don't use default submit function
return false;
});
More information about $.ajax http://api.jquery.com/jQuery.ajax/