Form auto submit only once and reload same page - javascript

I have created a form in php which has to fetch data from table1 and dump it into table2 every time user clicks on a link (link provided in a different page). I have written code in a php page (assume eg -> test.php) including html as well. I tried submitting the form onload of the page using Javascript (document.formname.submit) but it keeps on going in an infinite loop and keeps inserting data in table2 again and again.
How do I prevent this and auto form submit only once and still stay on the same PHP (i.e. test.php) page, which also contains the code for displaying detail view of the inserted data in table2?

That's because simply calling submit() on a form fill cause a full page reload. If you want to keep the current approach, you should instead use AJAX call to submit the data from that form.
Read here for more details. The article explains how to do both GET and POST requests using JS.
That sad, your solution seems somewhat ... emm ... hairy. Why exactly are you copying data from no table top another?

Before JavaScript check this condition by using form name.
if ( ! isset($_POST['main']) )
Here main is form name.

Related

PHP: Can I submit a form within a form using AJAX?

I am modifying an existing plugin, and it has a form. The perfect place for me to add my code is at the end of the form but before the submit button. I want to add a form that will allow users to enter their credit card info, but nesting my form within the plugin's form is causing problems.
I was wondering if it would be possible for my form nesting to somehow work with AJAX. So basically, I just need 4 input areas (CC#, Exp date, CCV, amount) to be submitted that to Braintree's servers. I need to maintain PCI compliance with anything I do, so is this possible? Is it recommended? If not, what is?
EDIT - I found a question on here that made me wonder if it would be possible to separate the 2 forms but use CSS to make it look like my screenshot. Below is a quote from one of the question's answers.
Why not place the input inside the form, but use CSS to position it elsewhere on the page?
Update - I'm still confused...
It is against the standards to do nested forms like you are thinking. (See this question for more about that: Can you nest html forms?)
That doesn't mean that you can't have the form send data to multiple locations on submit. Register a submit handler for the form with two ajax methods. The first takes the four pieces of data and sends them to your server. The second grabs the rest of the data and sends it to the location specified by the form.

How to update 2 forms with one submit button

I have 2 forms on my page that I'm looking to update with one submit button.
I am able to successfully update each form individually, however, I haven't been able to update them concurrently using the same button.
The first form is updated via the php code located on the same page (say page1.php) that I'm putting the button.
The second form is updated via redirection to another page (let's say page2.php) where an event is called/handled (after completion, the page redirects back to page1.php where the changes can be viewed) and I achieve this using the onclick="page2.php".
I was wondering how I should go about getting both of these forms to update when I click the button.
Code example:
<form id="form" method="post" action="page1.php">
<input type="submit" class="button" value="Submit" onclick="form.action=\'page2.php\';" />
</form>
Assuming by updating a form, you mean submitting, there is no way you can submit two forms at once since you can't have two redirections at the same time (it just won't make sense).
But, one of the options is to submit the first form via an AJAX call, and if the response is correct, do the normal submit of the other form. This also makes sense since you said that you're submitting the first form to the current page you're on, which means no layout changes, etc...
Ideally, you'd make a new landing page for the AJAX call (no need to render the whole page behind the curtains) which would just output the result of whatever you're doing there (for example, updating database, and if success, just echo 'ok'). Then just check if the response is the expected one ('ok' in the case above, though you might want to return some more info, like an id or something), and if so, submit the second form regularly.
Hope this wasn't too confusing.
The other method I can suggest is simpler, but involves changing the app flow.
You can try to combine the two forms into a single form and just submit it to page2. It's something worth thinking about, altough it might require a lot of rewriting of the existing code.

How do I add a callback function to .submit() in Javascript?

I am submitting a page onclick of a form element and need a function to run after the submit refreshes the page. I'm trying to add an animated scroll back to the clicked element that caused the submission. I've got the scroll part covered but I can seem to figure out how to cause the function I wrote for the scroll to run after the page refreshes from the submit.
Any timely help would be much appreciated!
If you are doing a full submit, rather than an AJAX submit, then the page that displays afterwards is not the same page as the one that the form was submitted from. Consequently, the identity of the clicked element will not be available on the second page.
What you need to do is, during the submit handler, store the identity of the clicked element (Should probably be a unique ID of some kind) in a hidden field of the form.
When the page refreshes, it should now have the unique ID available (Probably placed in the same hidden field of the form by the server side code) and a javascript function can read this value to control the scrolling.
Does this make sense?
If you update your question to include some sample code, then I might be able to clarify further.
If you do a "real" form submit, where the actual page refreshes, there is no way you can do it from the client (except using frames). Once you leave the page, your javascript is out of scope. You need to insert the javascript to the refreshed page on the server.
If, on the other hand, you are submitting the form and refreshing a part of the page via ajax, then, depending on the framework you use, you'll be looking for a callback hook like onSuccess etc. in your ajax submit function
This would be easier to do in ajax however if you need to do it as a postback then you need to attach an event to the body load event and send some data back with the postback that would identify that the page has loaded as part of a post back and not a new page load.
e.g. create a hidden contol ont he web page and on the postback give it a value , on the postback check to see if that hidden control has a value and if so run your scorll code.

POST a form in an iframe

I would like to POST a form in an iframe, generated like so:
My JS loads an iframe inside the page, adds a form to the iframe and submits the form. What I would like to happen is the iframe to load the result of that request. So, I would effectively like to post a form and render the result inside the iframe, without touching the parent (apart from putting the iframe up for display in the first place).
I am using the code from this answer:
JavaScript post request like a form submit
but I can't get it to not reload the parent. I post the form, and instead of the iframe refreshing, the entire parent refreshes. I don't know why that is, since the url it's posting to is different and would at least redirect there.
Can anyone help me with this problem? I just want a post inside an iframe and only within the iframe, basically.
EDIT: After some more research, apparently the form is not being created properly. I'm using document.createElement("form") and then document.getElementById("my_iframe_id").appendChild(form) to append it, but it does not seem to be working correctly.
Correct, because you are creating the form node in the current document.
document.getElementById("my_iframe_id").contentWindow.document.createElement('form');
to create it inside the iframe.
It works now, part of it was that "document" was wrong, as Dan said, and the other part was that, when inserting into the iframe, one needs to use document.getElementById(div).contentWindow.document.childNodes[0].appendChild(form) rather than just document.getElementById(div).innerHTML.
Not sure how much this will help, but the answer you point at does not give the form a name/id. If you are trying to post the form with something like document.getElementById('myForm').submit(), you might have a problem because your form doesn't have a name/id.
In the past, I've had trouble with form submission apparently submitting the wrong form when there are multiple forms on a page. In every case, giving the form a name/id and then getting the form by id and calling submit() seemed to solve the problem.

Dynamically Refreshed Pages produced by Python

I've been researching this on and off for a number of months now, but I am incapable of finding clear direction.
My goal is to have a page which has a form on it and a graph on it. The form can be filled out and then sent to the CGI Python script (yeah, I'll move to WSGI or fast_cgi later, I'm starting simple!) I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that. I have a form and a graph now, but they're on separate pages and work as a conventional script.
I'd like to avoid ALL frameworks except JQuery (as I love it, don't like dealing with the quirks of different browsers, etc).
A nudge in the right direction(s) is all I'm asking for here, or be as specific as you care to.
(I've found similar guides to doing this in PHP, I believe, but for some reason, they didn't serve my purpose.)
EDIT: The graph is generated using Flot (a JQuery plugin) using points generated from the form input and processed in the Python script. The Python script prints the Javascript which produces the graph in the end. It could all be done in Javascript, but I want the heavier stuff to be handled server-side, hence the Python.
Thanks!
I'm assuming that you have two pages at the moment - a page which shows the form, and a page which receives the POST request and displays the graph.
Will a little jQuery you can do exactly what you want.
First add to your form page an empty div with id="results". Next in your graph plotting page put the output you want to show to the user in a div with the same id.
Now attach an onclick handler to the submit button (or to the individual parts of the form if you want it to be more dynamic). This should serialize the form, submit it to the plotting page snatch the contents of the id="results" div and stuff them into the id="results" div on the the form page.
This will appear to the user as the graph appearing on the page whenever they click submit.
Here is a sketch of the jQuery code you will need
$(function(){
// Submit form
// Get the returned html, and get the contents of #results and
// put it into this page into #results
var submit = function() {
$.ajax({
type: "POST",
data: $("form").serialize(),
success: function(data, textStatus) {
$("#results").replaceWith($("#results", $(data)));
}
});
};
$("form input[type=submit]").click(submit);
// I think you'll need this as well to make sure the form doesn't submit via the browser
$("form").submit(function () { return false; });
});
Edit
Just to clarify on the above, if you want the form to redraw the graph whenever the user clicks any of the controls not just when the user clicks submit, add a few more things like this
$("form input[type=text]").keypress(submit);
$("form input[type=checkbox], form select").change(submit)
If you'll be loading HTML and Javascript that needs to be executed, and your only reason for not wanting to load a new page is to preserve the surrounding elements, you could probably just stick the form in an IFRAME. When the form is POSTed, only the contents of the IFRAME are replaced with the new contents. No AJAX required either. You might find that the answers here give you sufficient direction, or Google for things like "form post to iframe".
I'd like the form to be able to send multiple times, so the user can update the graph, but I don't want the page to reload every time it doe that.
The general pattern goes like that:
Generate an XMLHttpRequest (in form's onsubmit or it's 'submit' button onclick handler) that goes to your Python script. Optionally disable the submit button.
Server side - generate the graph (assuming raw HTML+JS, as hinted by your comment to another answer)
Client side, XmlHttp response handler. Replace the necessary part of your page with the HTML obtained via the response. Get responseText from the request (it contains whatever your Python script produced) and set innerHtml of a control that displays your graph.
The key points are:
using XMLHttpRequest (so that the browser doesn't automatically replace your page with the response).
manipulating the page yourself in the response handler. innerHtml is just one of the options here.
Edit: Here is a simple example of creating and using an XMLHttpRequest. JQuery makes it much simpler, the value of this example is getting to know how it works 'under the hood'.
Update img.src attribute in onsubmit() handler.
img.src url points to your Python script that should generate an image in response.
onsubmit() for your form could be registered and written using JQuery.

Categories