I would like to know in what way passing data from a form to a php file is best?
I have used ajax to retrieve a page and load into a div tag on the "master page", now there is a form on this sub page that needs to upload a file. So far i have got it to upload and the form posts to a new .php file where the data is handled.
When the data is handled and the page then navigates back to the master page, i noticed upon form submission when it is directed to the new php page, it shows blank white while the code executed and then redirects to the master page, my question is:
In order to eliminate the white page while code is being executed, is there a better way to go about this or is this sufficient and what can i do to not show the white page?
Thanks in advance.
Warren
Why not simply use jQuery. See how they interupt the submit and you may put validations etc. then process then do whatever you need: http://api.jquery.com/submit/
<form id="target" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
</form>
<div id="other">
Trigger the handler
</div>
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
You could use ajax to upload the files without submitting the form, for example by using a script like this :
http://www.a2zwebhelp.com/multiple-file-upload
Related
I am writing a chrome extension. In my content script I am injecting two forms into the DOM with target = "_blank". The forms are visible on the page
Form 1
<form action="page1.php" target="_blank" id="form1" method="POST">
<input type="submit" value="Save" id="savebutton1">
</form>
Form 2
<form action="page2.php" target="_blank" id="form2" method="POST">
<input type="submit" value="Save" id="savebutton2">
</form>
I want to submit the two forms using jQuery so I wrote ;
$( "#form1" ).submit();
$( "#form2" ).submit();
But finally only one tab opens, that is only the last form submits and my first form is ignored. But I want to open two tabs
I can not only see page2.php in one tab. My page1.php is never called. Please help in fixing the issue
This is not possible.
The browser can only submit one form and handle whatever redirect that single form generates at server.
If you need multiple forms to submit you would need a different approach such as using ajax
As #charlietfl said, this can't be done as you are trying to do it.
However, depending upon your back end system, you may be able to make a composite form and parse the data there. C#, I know, can handle this.
<input name="form1.xxx">
<input name="form2.xxx">
Then, in C# you could create your object
class Form1 {
xxx: string
}
class Form2 {
xxx: string
}
class Combined {
form1: Form1,
form2: Form2
}
Access it with: Combined.form1.xxx
I'm not expert in PHP, and I'm trying to create public chatroom for my simple website.
I'm using SQL database to store messages.The file named chat_index.php getting all messages from database and show it to users. Also it has a simple form to send message with PHP GET method. The following is code for my form.
<form method="get" action="sendmessage.php">
<input name="msg" placeholder="Message" data-theme="a" type="text">
<button type="submit" class="ui-btn ui-corner-all">Send</button>
</form>
With above code I'm sending data to sendmessage.php file. In this file adding message to database and user redirect to chat_index.php with this code.
header("Location: chat_index.php");
exit();
After redirect page loading correctly on browser window. But URL end like this
...../sendmessage.php?msg=test_message
So if I reload the page message sending again and url getting correct like this
...../chat_index.php
How can I resolve this problem?
UPDATED
I tried with POST method. but not solved. browser showing content in chat_index.php and url ending with ../sendmessage.php
Why you are recieveing the url variables is because you are using GET. use POST instead and the variables will be gone.
example:
<form method="POST" action="sendmessage.php">
If you don't want to send data to the query string use POST instead of GET.
<form method="POST" action="sendmessage.php">
This should clearly be a POST form. Any form saving or changing anything on the server should be. Otherwise (using get) people could add messages by just following a link, which is not intended. The redirect after save is OK and good practice. Note that such redirects only work before any output is produced.
Cannot say much more by what you have posted. You should also check if your saving and redirect code is triggered correctly when message is posted.
This is what is happening, the form is being submitted from chat_index.php, so the action ends up being chat_index.php/sendmessage.php.
To solve this change the method to post as directed and change your action to /sendmessage.php
your form should look look like this
<form method="POST" action="/sendmessage.php">
....
</form
hope this help
If this is to be a simple forum site, then it would be much less complicated to not redirect at all. Just set your action attribute to "", and when someone submits the form, it will post the data back to the page. So do something like this:
<form method="post" action="">
<input name="msg" placeholder="Message" data-theme="a" type="text">
<input name="function" type="hidden" value="post_message">
<button type="submit" class="ui-btn ui-corner-all">Send</button>
</form>
Then put the php code that was in sendmessage.php into chat_index.php above the starting DOCTYPE and html tags, and delete sendmessage.php. Or alternatively, use include('sendmessage.php') in the same spot. Then when the page loads, check if $_POST['function'] == 'post_message', and if this condition is true, then execute the stuff you had in sendmessage.php. That will be much more compact, and the user will be redirected once instead of twice. Also, I don't know your file structure, but you might want to rename chat_index.php to just index.php to make it intuitive and so that people can't see inside your directory.
I am trying to send a form by using a click event to trigger the form submission. For some reason however, this does not seem to work.
Code:
<form id="send_intake">
<div class="input_line">Voornaam: <input type="text" name="firstname" id="send_intake_firstname"></div>
<div class="input_line">Achternaam: <input type="text" name="lastname" id="send_intake_lastname"></div>
<div class="input_line">E-mailadres: <input type="email" name="email" id="send_intake_email"></div>
<input type="submit" class="form_submit" value="Stuur">
</form>
<script>
//Send form
$(document).ready(function(){
$(".function_header").on( "click", "#submit_send_intake", function() {
alert ("click event fired.");
$("#send_intake").submit(function() {
$.post("pages/forms_intake/functions/send_intake_form.php", $("#send_intake").serialize());
});
});
});
</script>
Hope you guys can see what's going wrong here :(
UPDATE:
Sorry for not providing you with all the information.
Actually this form is part of a web app. The form is inside a .php file that is loaded into a dashboard with .load().
The situation is as follows:
In the dashboard file, there is a specific DIV in which forms are dynamically loaded upon user's request. But for UI reasons I want the users to be able to submit the form with the same button every time. So when the form is loaded, the ID #submit_send_intake is assigned to that button. I'm using Jquery event delegation to bind the click event to the dynamically added ID by specifying the buttons' parent element, which is .function_header.
To summarize: .function_header and #submit_send_intake are elements that exist in the parent document (dashboard) of this form document.
I cannot see element with class function_header and element with ID submit_send_intake. Probably you didn't copy that part of markup (but please check).
If you leave action empty in your form tag, your page will be refreshed by submit. So you should specify action.
I have a little problem with Firefox and forms.
I have a form that is dynamically loaded from an external file from the same server trough an XMLHttpRequest(); that has no set target and no direct submit button but sends its data trough a Javascript function, looks like this:
<form name="blahform">
<input type="text" name="blubb">
<input type="button" value="Barfoo" onclick="return someFunction(this.form);">
<input type="hidden" name="id">
</form>
The problem is that Firefox sends this to the forms page, completely ignoring my Javascript code of course. It works if i don't press enter but use the button directly, but i want him to ignore the enter key completely or at least only call the Javascript routine and not try to send the whole thing into nirvana, reloading the page. (And yes, there is a XMLHttpRequest(); waiting behind that Javascript function for that data. ;) )
So, how to tell Firefox to do what i want and not what he thinks is best?
BTW, i have started the form with "submit" instead of "button" and changed to "button" in the hope that this solves the issue, but no luck with that.
EDIT:
Solution, thanks to Mike and Riateche:
Used an onsubmit="return false;" inside the < form >-tag and it works like expected now.
You need to use the <form>'s onsubmit event instead of onclick event of buttons.
I have two forms and a button. Everything works fine in Firefox. I get a new window, with a Paypal payment, and in the window where everything happened i get the send_mail form submitted that will send an e-mail to the user. How can I make this work in Chrome? Why it's not working? I've tried anything (or so I think)!
So:
<form name="registerForm" id="registerForm" target="_blank" action="paypal_url" method="post" onsubmit="$('#send_mail').submit();">
...
</form>
<form name="send_mail" id="send_mail" action="" method="post">
...
</form>
<a onclick="$('#registerForm').submit()">Go to paypal and send confirmation mail</a>
Unless you have a really good reason to use a javascript-only submit, why set up the form to be unusable if there is a javascript error?
Use a standard form input of type submit, give it an id, alter the look or text of the submit via javascript as necessary, and create onclick & onsubmit events as a layer on top of that functionality and have them return false. Better fallbacks.
I'm not sure why you're trying to submit two forms at once, but how about this alternative (note that I haven't tested this code, but it should convey the idea):
<script type='text/javascript'>
$('#fallback-register-submit').hide(); // Hide the submit button.
$('#registration-link').show().click(function (){ // Show the link and attach the action.
$('#registerForm').submit();
return false; // Don't bother following the link anchor.
});
</script>
<form name="registerForm" id="registerForm" target="_blank" action="paypal_url" method="post""><!-- Single form that does all of the submitting. -->
...
...
<input type='submit' id='fallback-register-submit'>Register</input><!-- In the event of a javascript error for their browser, they can still buy your stuff! -->
<a id='registration-submit' style='display:none'>Go to paypal and send confirmation mail</a>
</form>
why not just bind both submits to your a?
onclick="$('#send_mail').submit(); $('#registerForm').submit();"
if you want the other form to submit AFTER the first one:
onclick="$('#send_mail').submit( function() {$('#registerForm').submit();}); "
assuming you're using jquery here
As far as i understand, you want to submit the form using a link?
Why not use "plain" javascript then? Without jQuery: document.getElementById(....).submit()
Or link the submit event to the link in a normal jQuery way:
$(document).ready(function() {
$(".yourLinkClass").click(function() { // or "#yourLinkId" for that matter
$("#registerForm").submit();
});
});
And you also could use the submit button ;)