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>
Related
<form role="form" method="post" action="test.php">
<label for="contact">Mobile No:</label><br>
<input type="tel" class="form-control" name="contact" title="Mobile number should not contain alphabets. Maxlength 10" placeholder="Enter your phone no" maxlength="15" required id='contact_no'>
<br><br>
<button type="submit" class="btn btn-success" name="submit" id="submit">Submit</button>
<button type="reset" class="btn btn-default" id='reset'>Reset</button>
</form>
Ajax and Javascript Code
script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var dialcode = $(".country-list .active").data().dialCode;
var contact = $("#contact_no").val().replace(" ","");
var countrycode = $('.country-list .active').data().countryCode;
var cn;
var cc;
var dc;
$.ajax({
url: "test.php",
type: "POST",
data: {'cc' : contact},
success: function(data)
{
alert("success");
}
});
});
});
</script>
The variables show the values if displayed by alert message but are not passed on to the test.php page. It shows undefined index error at the following statement
test.php is as follows
<?php
if(isset($_POST['submit'])){
$contact = $_POST['cc']; //it shows the error here
}
echo $contact;
I had referred to many websites which show the same thing. It dosent work for me. I think the syntz of ajax is correct and have tried all possibilities but still dosent work. Please help
You're posting {cc: contact}, but you're checking for $_POST['submit'] which isn't being sent. The callback also doesn't stop the event, so you might want to return false (stops default and propagation). Something like this should do the trick:
$('#submit').on('click', function()
{
//do stuff
$.ajax({
data: {cc: contact},
method: 'post',
success: function()
{
//handle response here
}
});
return false;
});
Then, in PHP:
if (isset($_POST['cc']))
{
//ajax request with cc data
}
Also not that this:
$("#contact_no").val().replace(" ","");
Will only replace 1 space, not all of them, for that you'll need to use a regex with a g (for global) flag:
$("#contact_no").val().replace(/\s+/g,"");
You are using ajax to form submit
and you use $_POST['submit'] to check it would be $_POST['cc']
test.php
<?php
if(isset($_POST['cc'])){// change submit to cc
$contact = $_POST['cc'];//it shows the error here
}
echo $contact;
#Saty answer worked for me, but my code on ajax was a bit different. I had multiple form data wrapped up into a form variable, that was passed to the php page.
const form = new FormData();
form.append('keywords', keywords);
form.append('timescale', timescale);
form.append('pricing_entered', pricing_entered);
$.ajax({
url: "../config/save_status.php",
data: form,
method: "POST",
datatype: "text",
success: function (response, data) {
}
Then my php was:
if (isset($_POST['data'])) {
// all code about database uploading
}
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();
......
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.
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>
I was totally confused by the following situation...
situation
post data from a.php to b.php and redirect to b.php...but fail
CODE
- a.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function() {
$.ajax({
url: 'b.php',
dataType: 'html',
type: 'POST',
data: {
value: $('#value').val()
},
error: function(xhr) {
console.log('ajax went wrong!');
},
success: function(response) {
console.log(response);
window.location.href = "b.php";
}
});
});
});
</script>
</head>
<body>
value: <input type="text" id="value">
</body>
</html>
CODE
- b.php
<?php
echo $_REQUEST['value'];
?>
a.php can get the right response from b.php without redirect function. However, once I include the statement window.location.href = "b.php";, a.php will redirect to b.php but without printing anything.
Why is this situation happening?
Is there any solution to fix this?
Thanks!
you can't pass data between to pages in this way. Posting data to b.php and redirecting to it - are two different requests.
if you want to pass data via redirecting - use GET params:
window.location.href = "b.php?value="+$('#value').val();
Also form submission directly to b.php can help you.
<form action="b.php" method="post">
<input name="value" />
<input type="submit" />
</form>
You just need a <form> so that whenever you click on submit button your all form data will be transferred to b.php (YOU WILL AUTOMATICALLY BE REDIRECTED TO b.php page) and you can there access $_POST['value']. That's very simple. No need to do $.ajax call.
<form id="myFrm" name="myFrm" method="post" action="b.php">
value: <input type="text" id="value" name="value">
<input type="submit" id="submit" name="submit" value="submit">
</form>
Your ajax code is working. It is calling the url b.php and printing the value to output. However, the result is not what you expect.
When you made the ajax call and send the data in the form, the evaluation of b.php will be in response when ajax request is successful. Try to make the following change :
From
window.location.href = "b.php";
to
alert(response);
You will see what you send in the input in a message box. Follow your code adapted. Note I added a button to make the call:
index.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#submit').click(function() {
$.ajax({
url: 'ajax.php',
dataType: 'html',
type: 'POST',
data: {
value: $('#value').val()
},
error: function(xhr) {
console.log('ajax went wrong!');
},
success: function(response) {
alert(response);
console.log(response);
//window.location.href = "b.php";
}
});
});
});
</script>
</head>
<body>
value: <input type="text" id="value">
<input type=button id="submit" value=go>
</body>
</html>
ajax.php
<?php
echo $_REQUEST['value'];
?>
This is the ajax approach. But if you need only pass the value in the form to b.php, you do not need ajax. Just create a form and use b.php as it action like this:
index.php
<html>
<head>
</head>
<body>
<form method="POST" action="b.php">
value: <input type="text" id="value" name="value">
<input type=submit value=go>
</form>
</body>
</html>
b.php
<?php
echo $_REQUEST['value'];
?>
Note the changes I made in your html.
Try this one, i think this will help you.
Here i create two pages.
one is a.php and another page is b.php
a.php
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
var abc='';
$('#submit').click(function() {
var abc=$('#abc').val();
$.ajax({
url: 'b.php',
dataType: 'html',
type: 'POST',
data: {
value: abc
},
error: function(xhr) {
console.log('ajax went wrong!');
},
success: function(response) {
console.log(response);
var stateObj = { foo: "b" };
history.pushState(stateObj, "page 2", "b.php?value="+response);
$('#hid').hide();
$('#res').html(response);
}
});
});
});
</script>
<html>
<body>
<div id="hid">
Value: <input type="text" id="abc" /> <input type="button" id="submit" value="Get Value" /><br>
</div>
<div id="res"></div>
</body>
</html>
b.php
<?php
echo $_REQUEST['value'];
?>
use
$_post['value'] instead of $_request['value']