Javascript Form Submit causing website to break - javascript

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

Related

Javascript following window.print(); not running in Firefox

I am attempting to print a form before it is submitted by a submit input control.
My code is
<input type="submit" name="printForm"
value="Print Application Form"
onClick="window.print();
if (submitting) {return false;}
else {submitting = true; return true;} ">
('submitting' a global 'var', initialised as 'false' - to stop double sends)
This works in Safari, Chrome and IE, but is giving a problem in Firefox - the form is not submitted after the printing completes - however, if the print dialog in Firefox is cancelled, the form is submitted.
I have tried moving the window.print into a function to isolate it. but that didn't change the result.
Any suggestions would be appreciated, thanks
I have searched here for anything related to window.print and scanned many questions without finding anything that helped. (I haven't read all of the thousands yet!)
I have found an answer ... in the original problem, the javascript was all being executed, but something in the window.print inhibited the actual send of the form.
The solution is to change the to button, and move the actual form submit into javascript, and position the submit to occur immediately before the window.print (instead of after!). In this way, both the form submit and the page print actually occur.
The issue could be in the form action. <form action="">
If you are loading a file on form submit then pass that file's complete path in the action instead of relative path.

insert browser's history entry before submitting the form

I have two web pages: index.php and handler.php
index.php has a form, that submits to handler.php like this:
handler.php?input=some+data
My goal is to do something so that browser's back button takes me to index.php?input=some+data instead of simply index.php. How can I do that? Ideally, I'd prefer to do as much as possible using php instead of js
Solution:
I added submit handler that does this:
function onFormUpdate()
{
window.history.replaceState({} , '', 'index.php?' + document.forms[0].serialize());
}
this way, form will be submitted not from index.php, but from index.php?input=some+data. That is, back button will bring me back to index.php?input=some+data.
You can do this by: (JS)
history.replaceState({}, '', 'index.php?input=some+data');
Before submitting.
But I don't think you need to do this, my browser (firefox, though I think chrome would do the same) saves form data before submitting, so when I go back from the handler, the form still have the input.

Using JQuery to self-submit a form

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?

Create a Javascript function to simulate clicking on a href on a page

Thanks in advance to anyone that can help me on this issue. I have a basic index.php page running a XML rotating banner. In the banner you can have html links to other pages. That all works fine. I also have a jquery Contact Form that gets hidden on load in the index.php page. To activate the form I use the following href link on the index.php page, ContactForm and works and display form perfectly.
However my issue is that I cannot get the link to from the xml rotating banner to load the contact form. If I simply put the link ContactForm into it nothing happens. The Contact form does not appears. I think it maybe because the link is inside the images.xml file and the #contactForm cannot get activated from within that file. I think the form needs to be activated from the index.php file. So what I thought I would do is create a link to a javacript script function and calls the jquery function to show the contact form.
However, I am either going about this the wrong way or I am missing something in my LoadContactForm function. It only triggers the alerts. I have tried so many different code snippets and I still cannot seem to get it to work. Here is the lastest version of my function that I created that is still not working. Any help and sample code would be greatly appreciated!
<script type="text/javascript">
function LoadContactForm()
{
alert("Load Contact Form 1!");
window.location.document.getElementById('a[href="#contactForm"]').click();
return false;
alert("Load Contact Form 2!");
}
</script>
Luke... You about nailed it with:
$("a[href="#contactForm"]").click();
I just used the following and it does work:
$("a[href=#contactForm]").click();
Cheers!
~Ken
You are calling getElementById and you dont have any id. Also your script is not jQuery.
$(document).ready(function(){
$("a[href="#contactForm"]").click(function(){
alert("Form clicked");
});
function LoadContractForm(){
$("a[href="#contactForm"]").click();
}
});
I do not understand you question fully. How is the form hidden? Via css? What triggers the survey form? Why don't you give your survey form an id that you can refer to with $("#idname").toggle();

simple jquery event handler

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

Categories

Resources