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/
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.
...
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
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'
Working on a project where I want to be able to delete a dynamic record using jQuery and PHP. I already have the option for users to add a record dynamically it is just getting the delete option to work. While I am trying to develop this function I have set the Delete to INSERT. Where I am having trouble is getting the value from the hidden field to delete-class.php (the bottom script). Below I have posted the code:
<form id="frmDelete" method="post" action="delete-class.php">
<input id="btnSubmit" type="submit"/>
<ul id="class">
<?php
//this is being loaded from a different page and is here just to reference the fields
while ($row = mysql_fetch_array($result)) {
echo '<li id="liClass" class="ui-widget"><img src="trash-can-icon.png" id='.$row["id_distance_class"].' class="delete"/>' . $row["class_section"] . '<input type="hidden" name="hdid" id="hdid" value="'.$row["id_distance_class"].'"/></li>';
?>
</ul>
</form>
<script>
$(function() {
$(".delete").click(function() {
$('#load').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = id ;
// console.log(id);
$.ajax({
type: "POST",
url: "delete-class.php",
data: $(this).serialize(),
cache: false,
success: function(){
commentContainer.slideUp('slow', function() {$(this).remove();});
$('#load').fadeOut();
}
});
return false;
});
});
</script>
//this is the delete-class.php
$results = mysql_query("INSERT INTO distance_class (class_section) VALUES ( '".$_POST['hdid']."' ) ");
The problem is you're not passing this information in your AJAX request. You're passing
data: $(this).serialize()
...presumably thinking this points to the form. It doesn't; it points to the deletion button clicked, since this code is running in the button's event handler callback.
Change the above to target the form.
main.php:
<SCRIPT type="text/javascript">
$("#btnSubmit").click(function () {
alert("What will i put here!");
});
</SCRIPT>
<input type = "submit" id = "btnSubmit" value = "Try IT!" />
<div id = "show_search2">
</div>
output.php:
<?php $val = $_POST['btnSubmit'];
echo "<H1>$val</H1>"; ?>
What specific jQuery functionality can get the value of the btnSubmit and access it through $_POST and output it to the div show_search2? I used prototype.js but it provides conflict with my other JS scripts in the index.
Note: all my script source is included in index and that's why I didn't include the source in this post.
Do you mean something like this:
$("#btnSubmit").click(function (e) {
e.preventDefault();
var submitVal = $(this).val();
$.ajax({
type: "POST",
url: "url_of_your_output.php",
data: {btnSubmit : submitVal},
success: function(response) {
$("#show_search2").html(response); //response from output.php
}
});
});