I'm trying to use JQuery to submit a form on the same page within a DIV. It works fine, however whenever I submit the form, it reloads the form script. For example
add-album.php contains the form and PHP logic
index.php contains include("add-album.php") within the DIV tag.
While on index.php, I will fill in the form details and click 'submit' which then redirects to add-album.php. How can I prevent this from happening?
JQUERY Code:
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#container").load(this.href);
});
});
PHP _SELF form:
<form enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
Thanks in advance
Just prevent form from submitting:
$('form').bind('submit', function(e){
e.preventDefault();
return false;
});
The action of the form is the address of the current script because you set it to $_SERVER['PHP_SELF']. It's a little tricky, though - it's going to be the script that runs that code, which may or may not be the one loaded directly by the browser.
This means that when you submit, either manually or with jQuery, you are going to send the data and request to whatever corresponds to $_SERVER['PHP_SELF']. If you want to arrive somewhere else, you probably want to set the action of the form to be something besides this "current script" value. In this case, add-album.php is the file that is calling <?php echo $_SERVER['PHP_SELF'] ?>, so you get add-album.php in the action.
To see what I mean, look at the rendered code of the index.php page. You will see that the form tag renders with action="add-album.php" or something similar. That's why add-album.php loads when you submit. You may find that setting the action with a static value is what you want. You left out one important detail - where do you want to send the form data?
Related
I am using a bootstrap theme and am trying to get my page's form to stay on/open the specific registration form's confirm message. Unfortunately with several Registration Forms on the page, each is "hidden" inside it's own hidden div/tab. I am not too good with JS and have spent about 4 hours so far trying to get this to function properly:
http://middlechambersociety.com/dev/mcs2014/
On any Registration Form completion I want the user to be brought back to and shown that Registration Form's Confirmation Message AND the "Pay with Card" button when it is part of the reg process (the button currently shows when it should). However, the problem is that when my form reloads the best i can do is bring users to the Registration Section and show the Golfer's Reg Form and/or Confirm message only (because it is the default open div/tab). I have tried php and limited JS/jQuery with no success. I have tried adding Class .active to the li i want to display but no luck. I currently have the following trying to fire on each form when submitted to TRY to get the appropriate registration tab to display:
<?php
if ($reg_type == 'Diners' && !empty($confirm_msg)) {
?>
<script type="text/javascript">
alert('Working1');
$(document).ready(function() {
alert('Working');
var tab = $('#reg_diner').parent();
alert(tab);
tab.addClass('active').siblings().removeClass('active');
});
</script>
<?php
echo '<div class="confirm-message">' . $confirm_msg . '</div>';
echo $stripe_pay_form;
}
?>
please help.
For anyone who may be confused as to what i am looking to accomplish: feel free to complete one of the forms (Dining for instance) and see that the confirm message is hidden until you PHYSICALLY navigate back to the Dining registration tab.
Maybe try an ajax call and on success add active class to new content?
My bad - misunderstood. Heres where I can see your error:
In console.log You've got an $ reference error at your script calling point. Cause you load jQuery in footer. So it cant use scripts before it load fully. (Document Ready doesn't work because he doesn't know this command yet) Put jQuery into head, or your tag after calling jQuery
I understand not wanted to navigate user to a different page but sometimes it is just much easier.
One way though would be to put a $_GET string in the form post then use that to control the display message. Add it to the form action url maybe:
enter code hereaction="index.php?form=golfer1"
Then update your code :
<?php
if ($_GET['form'] == 'golfer1') {
echo '<div class="confirm-message">' . $confirm_msg . '</div>';
echo $stripe_pay_form;
}
?>
So I'm having an issue submitting a form. Basically once the form is submitted the entire site wont work until I clear the cash and refresh the browser.
The form tag is
<form action="cart.php" method="post" name="AutomaticReorderForm">
The form was initially being submitted like
function saveAutomaticReorder()
{
document.AutomaticReorderForm.action = "/store/save_automatic_order.php";
document.AutomaticReorderForm.submit();
}
which has a javascript call to this function in the href of the button.
I tried jquery like so
$("#saveAutomaticReorder").click(function() {
$('form[name="AutomaticReorderForm"]').attr("action", "/store/save_automatic_order.php");
$('form[name="AutomaticReorderForm"]').submit();
});
These both submit the form fine. In the php page at the very top i put in die(); which killed the page before any php was run but then it still gave me the same problem of breaking the whole site. Im not sure where to go from here does anyone have an idea about what could be causing this issue? Thanks
After submiting a form, a new page should open to be printed as pdf.
But by doing it like that <form action="page.php" method="POST" target="_blank"> the form with all the information still exists which is very, very bad. Instead of still showing the page with the form, I would now like to load another page within this windows/tab AND open
the print-window. With php and headers it's not possible, but with javascript should be right?
But how? I'm not used to javascript, so I have no idea how to handle this problem, but do you have an idea?
You can attach an onsubmit event to the form, f.ex:
document.getElementById('form').onsubmit = function() {
window.location = '/anotherpage.html';
}
This assumes that the form has an ID of "form".
I have a page with 80+ dynamically generated input boxes, when the user submits the form to another .php page and one of the inputs contains a value that is not numeric, it will send them back to the inputs page using: <?php header("Location: javascript:history.back()"); ?>, at the same time it registers the error in a session variable. The reason why I'm using javascript:history.back(), is because it stores the values that were in the form, even when you press the back button. But because it is caching the page I can't output the error in the same .php script, so I added a an element and some Ajax code. The Ajax code retrieves another file called error.php, this contains:
<?php
header("Cache-Control: no-cache");
session_start();
if(isset($_SESSION['error']))
{
echo $_SESSION['error'];
unset($_SESSION['error']);
}
?>
This is retrieved when the page is loaded on it own, but not when history.back() is used, it looks like the following isn't firing:
<script type="text/JavaScript">
$(document).ready(function(){
$("#error p").load("error.php");
});
</script>
Any ideas?
Thanks,
Justin
Using header("Location: javascript:history.back()") is generally ill-advised.
Use an absolute path i.e.
header('Location: /forms/input.php');
You could avoid submitting the form entirely and send the data via an AJAX call - the server could validate the data and send back either "success" or a list of validation errors.
If success, move on to the next URL (possibly specified alongside the success message)
If failed, modify the current page to indicate what the problems were. This avoids you having to re-create the whole form (as you never leave the page) but also allows for reliable server-side validation
having some real problems with jquery at the moment. Basically what I have so far is. The form is submitted once the form is submitted a grey box pop's up with the relevant infomation.
What I need to do though is refresh the whole page then allow the grey box to appear.
I have the following code
$("#ex1Act").submit(function() {
//$('#example1').load('index.php', function()
$("#example1").gbxShow();
return true;
});
the line which is commented out load's the page again after the form is submitted the other code makes the grey box pop-up.
Is their a way to say once the:
$('#example1').load('index.php', function()
has been exucted do this:
$("#example1").gbxShow();
hope this makes sense.
This is not possible.
Once the form is submitted, the Javascript running on the page that submitted the form is completely gone; it cannot affect the page that the form returns.
Instead, you should put server-side code in the form that writes $("#example1").gbxShow(); in a separate <script> block if the form has been submitted.
Why not just submit the form normally (i.e., not using JavaScript) and add a variable to the resulting page signalling the need to display the grey box? Like so:
<?php if(isset($_POST['submit'])): ?>
<script type="text/javascript">
var showGreyBox = true;
</script>
<?php endif; ?>
...
<script type="text/javascript">
$(function(){
if(showGreyBox !== undefined){
// execute code to show the grey box
}
});
</script>
Something like that, maybe?
The problem you have is that the web page is "stateless". This means that you can't do a bit of JavaScript, refresh the page and continue on with your JavaScript. When you refresh the page, you lose your current state and the page starts from scratch.
You will need to re-engineer your design to bear in mind the page lifecycle (i.e. all JavaScript stops permanently on navigation).
One solution may be to use the jQuery AJAX forms plugin, which will submit the form to the server and give you back the result of the submission, which would avoid breaking the page lifecycle. You could then display the box as you wish.
The standard way to do this is to have the server return the gray box contents in the response to the form post.
You could probably do this in jquery by putting the page and the grey box into separate iFrames so that it would be safe from the page refresh