The problem that we have is describing as follows. We have two different pages, the first one is called profile.php and the second one is called save_button.php. In the page profile.php I have this script which is written the following code in jQuery:
<script >
$(function(){
$("#save").bind('click', function(){
document.getElementById('save').style.background='#F26522';
document.getElementById('modify').style.background='#0083A9';
$.ajax({
url: 'save_button.php',
type: 'post',
data: { "callFunc1": "test"},
success: function(response) { alert(response); }
});
})
});
</script>
In the body of profile.php page we have written this code, here we have two different buttons:
<body>
<div class="button_container" >
<input id="modify" type="button" class="buttons" value="Modify" onclick="changeText();" />
<button id="save" class="buttons" >Save</button>
</div>
</body>
When we click the save button we want to execute the PHP code in another page, called save_button.php. Inside this page, save_button.php, we have written the following code:
<?php echo "test works"; ?>
What happens with us is that when we click the save button, in our page is not alerted the words "test works". Do you have any idea what to do in this page? Please, give us a quick feedback as this is a school project and we have to submit within the three next days. Many thanks.
Related
I have 2 scripts, submit.php and display.php.
I want to be able to load submit.php, click the submit button & the result div to display 123.
Right now, it just reloads my page. I'm not getting anything from my Console so stuck how to debug.
Can someone take a look and provide assistance?
submit.php:
<form>
<input type="submit" value="Submit" name="display" id="display">
</form>
<div id="result"> </div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("#display").click(function() {
$.ajax({
url: 'display.php',
type: 'GET',
dataType: "html",
data: {
"id": "123",
},
success: function(data) {
//called when successful
$('#result').html(data);
},
error: function(e) {
//called when there is an error
//console.log(e.message);
}
});
});
</script>
display.php:
<?php
$id = $_GET['id'];
echo $id;
?>
It submits or reloads the page. You need to prevent the default action. Change the first two lines:
$("#display").click(function(e) { // Add e (event) parameter.
e.preventDefault(); // Prevent the default action for this event.
You may change to type="button", but not sure if it will be effective.
solved your issue please
replace
<input type="submit" value="Submit" name="display" id="display">
by
<button type="button" name="display" id="display">Submit</button>
Updated: It still not work after I add "#".
I am new to ajax. I am practicing to send value to php script ,and get result back.
Right now, I met one issue which I can not show my result in my html page.
I tried serves answers online, but I still can not fix this issue.
My index.html take value from the form and send form information to getResult.php.
My getResult.php will do calculation and echo result.
How do I display result into index.html?
Hers is html code
index.html
<html>
<body>
<form name="simIntCal" id="simIntCal" method="post"
>
<p id="Amount" >Amount(USD)</p>
<input id="amount_value" type="text" name="amount_value">
<p id="annual_rate" >Annual Rate of Interest
(%)</p>
<input id="rate_value" type="text" name="rate_value">
<p id="time_years" >Time (years)</p>
<input id="time_value" type="text" name="time">
<input id="calculate" type="submit" value="Calculate">
</form>
<p id="amount_inteCal" >The Amount (Acount
+ Interest) is</p>
<input id="result" type="text">
</body>
</html>
ajax script :
<script>
$('#simIntCal').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'getResult.php',
data: $('#simIntCal').serialize(),
success: function (result) {
$("#result").text(result);// display result from getResult.php
alert('success');
}
});
});
</script>
getResult.php
<?php
if ($_SERVER ["REQUEST_METHOD"] == "POST") {
//do some calculation
$result=10;//set result to 10 for testing
echo $result;
}
?>
You are missing the '#' in front of your css selector for result.
$("result").text(result);// display result from cal.php
Should be
$("#result").text(result);// display result from cal.php
index.php
----php start---------
if(isset($_POST['name'])){
echo 'Thank you, '.$_POST['name']; exit();
}
----php end ---------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function test(){
var formDATA = {'name': $('#input_name').val()}
$.ajax({
type: 'POST',
url: 'index.php',
data: formDATA,
success: function(response){
$('#result').html();
}
});
}
</script>
<input id="input_name" type="text" value="">
<button onclick="test();">Test Ajax</button>
<div id="result"></div>
Try something simple, this is a very basic version of ajax and php all in one page. Since the button triggers the function you don't even need a form (doesn't mean you shouldn't use one). But i left it simple so you could follow everything.
Sorry when i added php open and closing tags it didn't show up as code.
Also don't forget to include your jquery resources.
In your html file where you want the result to display, you probably want to be using a div.
Currently your code is using an input field:
<input id="result" type="text">
And what you probably want is something like this:
<div id="result"></div>
Unless you were intending to have the result show up in an input field inside your form, and in that case, the input field isn't actually inside your form code.
Hi I've made an eshop and what I want to achieve is when I click the appropriate "add to cart button" I want the top cart (not the main cart-page of the eshop) to be updated. Top cart is one div at the header of the eshop. When I refresh the page the right content appears but this doesn't happen without refresh. I know this must be accomplished with ajax but it seems I am doing something wrong.
Part of my code:
<input type="button" class="add_to_cart" id="add_to_cart" value="BUY" />
<script type="text/javascript">
$('input.add_to_cart').click(function () {
$.ajax({
type: "POST",
url:"add_to_topcart.php",
data:$('.prod_form').serialize(),
success:function(data){
$('#show-quick-cart').text(data);
$(".add_cart_msg").delay(250).fadeIn("slow").delay(2000).fadeOut("slow");
}
});
});
</script>
</form>
</div>
<div class="add_cart_msg" style="display:none;"><img src="images/green_tick.png"/>Product was added to cart!</div>
The above has a result to temporarily count the products I add to cart
First of all, enclose your code in a document ready handler -
$(document).ready(function() {
$('input.add_to_cart').click(function () {
$.ajax({
type: "POST",
url:"add_to_topcart.php",
data:$('.prod_form').serialize(),
success:function(data){
$('#show-quick-cart').text(data);
$(".add_cart_msg").delay(250).fadeIn("slow").delay(2000).fadeOut("slow");
}
});
});
});
Then open your browser's console and any errors will be logged. You can then fix them one at a time or post them here if you need help troubleshooting.
I have a PHP page included called 'leaguestatus.php'. This page allows the user to post a message/status update and the intent is to have only this part of the div refreshed; however, on submit, the entire page is reloaded.
In the current implementation I'm simply printing all the $_POST variables to the div so I can see what's coming through. The MsgText textarea DOES get posted, however, it's only after the whole page loads. I'm trying to get just the div and that included file to reload.
div id="statusupdates"><? include 'leaguestatus.php'; ?></div>
leaguestatus.php
<form id="statusform" method="POST">
<textarea name=MsgText rows=5 cols=40></textarea><BR>
<input type=submit value=Post id=uhsbutton>
</form>
<BR>
<BR>
<div id='formbox'>
<? print "<pre>POST Variables:<BR>";
print_r ($_POST);
print "</pre>";
$MsgText = $_POST["MsgText"];
?>
</div>
The jQuery I'm running in the header is:
$(document).ready(function() {
$("#statusform").submit(function(e) {
e.preventDefault();
var formData=$(this).serialize();
var pUrl="leaguestatus.php";
submitFormSave(formData, pUrl);
});
function submitFormSave(formData, pUrl) {
$.ajax({
url: pUrl,
type: 'POST',
data:formData,
success: function(response) {
$("#formbox").html(response);
}
}).success(function(){
});
}
});
Here are my includes:
html header
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
Edit: updated code to reflect use of #sazedul's response. Only issue now is on first click page acts as expected (no page refresh). On second click the entire page reloads. On third click we're back to normal.
Use this following code for ajax submit hope it will work.
$("#statusform").submit(function(e) {
e.preventDefault();
var formData=$(this).serialize();
var pUrl="leaguestatus.php";
submitFormSave(formData, pUrl);
});
function submitFormSave(formData, pUrl)
{
$.ajax({
url: pUrl,
type: 'POST',
data:formData,
success: function(response)
{
$("#formbox").html(response);
}
});
}
Made the following changes in your leaguestatus.php remembar to put double quote in the name="MsgText" in text area.
<form id="statusform" method="POST">
<textarea name="MsgText" rows=5 cols=40></textarea><BR>
<input type=submit value=Post id=uhsbutton>
</form>
<BR>
<BR>
<div id='formbox'>
</div>
<?php
if(isset($_POST['MsgText'])){
$message=$_POST['MsgText'];
echo $message;
}
?>
check for .load() like the code below....
$(document).ready(function() {
$("#statusform").submit(function() {
$("div").load();
});
});
You have to preventDefault of submit then other thing
so,you have to use e.preventDefault() to prevent submit.then do what ever you want
$("#statusform").submit(function(e) {
e.preventDefault();
......
First, let's get this out of the way:
No errors (JS, etc) exist on the local and remote dev page. The jQuery lib is also called correctly.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Basically both pages are identical.
What I'm trying to have my webpage achieve:
Submit my form if the user (accidentally) clicks away on a link instead of using the normal form submit button.
Link:
<a class="arrow autoSaveLeft" href="<?php echo $prevWeekURL ?>">←</a>
<form>
// ...
<input type="submit" name="submit" class="submitForm" value="Update" />
</form>
JS (at bottom):
<script>
$(document).ready(function() {
$('.autoSaveLeft').click(function(event){
event.preventDefault();
$('.submitForm').click();
window.location = $(this).attr('href');
});
});
</script>
Any idea why this might fire correctly on MAMP (form is submitted and url is followed), but not when I try live on a shared host (form is NOT submitted, but url is followed)?
Thank you.
If you wanted to save your user's progress on a form before leaving, you'd have to submit the form without actually, submitting it via the browser. Thus you could use AJAX to send the information that's been provided so far, upon success - carry on with the href provided on the original .click() handler.
<a class="arrow autoSaveLeft" href="somepage.php">←</a>
<form id="userform">
<input type="submit" name="submit" class="submitForm" value="Update" />
</form>
<script>
$(document).ready(function() {
$(document).on('click', '.autoSaveLeft', function( event ) {
var $that = $(this);
event.preventDefault();
$.ajax({
type: "POST",
data: $('#userform').serialize(),
url: 'yourpostscript.php',
success: function(){
window.location.href = $that.attr('href');
}
});
});
});
</script>