EDIT: This privately published page is what I need to work with. Password: stackOF
My client desires is to have her Wordpress blog show a MailChimp form on her home page as a gateway to a .pdf. I need the following behavior to occur when the user clicks "Submit":
execute the included MailChimp's javascript file; this ensures the form was properly filled, and then performs the sign-up to the newsletter list (don't need help with this part)
then show the user an informational PDF for download or viewing
EDIT: The logical order was flipped from when I originally posted this. The script should execute, and only if the script gets executed properly should the PDF show to the user
Note:
My experience level with HTML and PHP is 3/4, and with JS I am 2/4 EDIT: (seems more like 1/4 at this point lol). If my research is correct, PHP (server-side language) would be used to do that which the client wants.
Additional validation is not necessary beyond what MailChimp's script provides (it ensures that user has submitted a completed form) in this case (the client says it's ok if the e-mail isn't valid at all).
The .pdf URL and content is static, and simply needs to be shown, not generated.
----RESEARCH----
I know that the Mailchimp form uses the following line to actually submit the information, but I want to do the action mentioned below, as well as open the aforementioned .pdf:
<form action="http://*BLAH*.us2.list-manage.com/subscribe/post?u=*BLAHBLAH*&id=*BLAHBLAHBLAH*" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
I am reading on other sites that I can conceivably point "action" to a .php file, but if there is a way to do this with javascript - since its using the .js file that I created for that already anyways, then I would be most happy. Barring that, I'll take what I can get..
You can try the following:
add an onsubmit handler on the mailchimp form like below:
<form onsubmit="runMyStuff(this)" action="http://*BLAH*.us2.list-manage.com/subscribe/post?u=*BLAHBLAH*&id=*BLAHBLAHBLAH*" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
Your javascript function:
function runMyStuff( o ) {
// open the pdf file in a separate window
window.open( PATH_TO_YOUR_PDF_URL );
// now, submit the form
o.submit();
}
Hope this helps.
You might possibly create a page that includes your script and have an iframe that points to the URL of the PDF.
Related
I am new to developing PHP forms and currently trying to understand and learn how they are processed. If I understand it correctly, there are two approaches to using the "Action" attribute.
Method A: Use a separate PHP file to process the form. So in your first file (Form.php), you have the code for the form and submit button. Then in the ProcessForm.php file, you put all of your code for validating the data. In this case, you define the form as
<form method="post" action="ProcessForm.php" >
Method B: Use one PHP file for everything, including the code for the form, submit button, and all validation stuff (including output of error messages if form fields aren't entered properly). Here, you define the the form as
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Right now, I don't understand if one of these methods is more correct or why you would use one vs the other.
I see a form as having four components: HTML for the form, PHP for connecting to MySQL, PHP for input validation/cleaning/error printout, and PHP for moving the data into the MySQL database. I want my form to be able to (upon submitting) work as follows:
If there are one or more errors in the submission process, stay on the same page (stop the submit process) and display relevant error messages, with the fields all still populated (as opposed to blank).
If there are no errors in the submission process, move the data into MySQL, and then display a blank page that says "your data has been submitted successfully" and a link back to my homepage.
Currently I am using Method B, and have implemented #1 above successfully. But I haven't achieved #2. So after this long story, my question is this: Where am I supposed to put those four components? In one file or two, and why?
Neither method is "more correct"; both are just as valid, the one you choose completely depends on the UX you are trying to achieve. Where you are supposed to put the four components depends on whether you are using method A or B.
For method A
If the form is on one page, and you're going to be submitting the data to another page via the action="example.php" attribute, the HTML for the form should (obviously) be on the first page, while everything else should be on the second (example.php) page (all the PHP and SQL). If there's a validation error, you can use header(Location: firstpage.php?error=something) to return users to the original page to fix their mistake.
For method B
If you're doing everything on one page (by putting action="<?php echo $_SERVER["PHP_SELF"]; ?>" or simply action="", both of which do the exact same thing), you should do the validation when a user submits the form on that one page, and if there are no validation errors, insert the data into the database and redirect the user using PHP's header() function.
As you're using method B, this is my more detailed step-by-step process of how I would handle such a form. In the example, firstpage.php is the page a user starts on, and secondpage.php is the page a user is taken to if all the information is correct.
Present the user with your form.
When a user submits the form, the data is submitted via POST or GET (depending on whether you want this information accessible via the URL. If you're not sure, use POST) to firstpage.php where the following PHP is:
PHP:
<?php
if (isset($_POST['submit']) {
// Some validation function
if (do_validation()) {
// Information is valid, insert into db
header(Location: secondpage.php);
die();
}
else {
echo "Error; the information you submitted is not valid.";
}
}
?>
When the user ends up on secondpage.php, you can tell them that the form was successfully submitted.
If you are posting to the script that generates the form itself then you don't even need an action. So method 3 is:
<form method="post">
which is the best version since it will not break and makes it clear that one script renders and handles the post for the form.
Neither of your other methods is ideal. Really you should be looking at (Smarty or something similar) to let you template the HTML and separate the display from the logic. Having said that both options 1 & 2 are perfectly acceptable - if you choose not to use the (superior) option 3 from above.
I can't speak to a "Best Practice", but of the 4 "Components" you mentioned, I think a missing key item is client-side validation as well (javascript typically). This saves you the "round trip" overhead of processing a form that could have already been validated before submitting to the server to handle.
With that being said (and because it's the approach I use), you'll be incorporating some javascript, so what I do is use javascript to validate my fields "on submit" (I override the form's default submit with a javascript event handler), then, if it validates, perform the submit. I do this with ajax, or you can use standard javascript to submit the form. You can even use javascript to set the "action" attribute dynamically (assuming you need to - see #Paul's reasoning why you may not need to).
The php file it submits to typically does 0 presentation work. It connects to the database, saves the "post'ed" info, closes the connection, and returns a status (which is typically why I like ajax because it's easier for me to handle that status response). Based on the status response, you can display an error message (like an alert, a bootstrap modal or info alert, etc.) or a success message/redirect.
While my answer does not offer code, I think the methodology above will serve you better based on your question. The "how" is the easy part once you understand the steps you want to take.
So I'm creating a form that uses the values entered to create a PDF. Now, the php that I'm using to do this is already completed from another person. Currently everything works great, except once you complete the form it redirects you to the site listed in action="..."
<form action="http://www.otherdomain.com/action.php" method="post" name="application" target='_blank' onsubmit="return validateform(this);">
That is what the code looks like. I would like to have the code redirect to my own 'success' page rather than the otherdomain.com success page, except I can't copy the PHP into my own page because I am using wordpress and there isn't a way to create a page with a .php ending, so the action needs to stay as-is.
Sorry if I'm seeming kind of vague, I don't know much about php or javascript and I'm having troubles putting my thoughts into words.
You should do this request within your server, using PHP extension named curl to achieve this.
Basically, from you own website, the script will make another request based on the one you sent with de form, get the response and then redirect to the disired page.
I have a WordPress site with a form that I need to add a captcha to. The form isn't it's own template or even on it's own page but it is a single php file that is included on all of the pages. The actual form is in the shape of a drop down menu. When a user clicks on the "request info" link, the form drops down from the navbar. Do to the way it is set up I can't use a WordPress plugin.
Normally, I could I just add a php captcha script and be done with it but the form action is set to post to an external website. When the visitor submits the form, it goes to another website that collects the info, as you can see here:
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" name="contact" id="contact" onsubmit="return checkform(this);">
Because the form isn't verified with a php file on the sites server, I don't know how to verify the captcha and get it to work. Does anyone have any suggestions?
The only way to do it would be to make an ajax call on submit to your server where you check the captcha code. If the code is valid, then submit the form. If it isn't display the error and don't allow the form to submit.
If you are using Recaptcha, check this SO: using reCAPTCHA with ajax....javascript loading problem
If a general Captcha is what you are doing: jQuery ajax validate captcha
The answers are more focused that what you are looking for, but will at least get you pointed in the right direction.
People
I want to know how to submit form without action attribute shown.
Like this
<form action="someact.php" method="post">
...
</form>
Some suggest to use $_PHP['SELF'], but I want my form to be processed using another php file like separating UI part and process part so that anyone can't see my process file ?
I want like this
<form method="post">
...
</form>
But it processed to the file I want.
Help please ?
Firstly, I don't quite understand why you would want this. The whole point of the action attribute is to tell the browser where to send the request, and "hiding" it achieves nothing - any half-way competent hacker (or even less than half-way) can still find the information you are hiding, no matter what you do.
Having said that, you could do something like this:
<form id="hidden_action_form" method="post">
<!-- ... -->
</form>
<script type="text/javascript">
document.getElementById('hidden_action_form').action = 'someact.php';
</script>
Why on earth would you need a "hidden" process file? That's impossible: the browser has to know where the request should be sent.
If you explain the problem you're having in the first place, and not the problem that arose from your solition to that problem, other people might be able to help you.
I get the impression that you mix up two things. The PHP-file is only on your server and will not be sent over to the browser. The server (normally apache httpd) processes the file and generates HTML code from it. This code is then sent over to the browser.
When you have a form you MUST have an action associated because as CodeCaster pointed out: The browser needs to know where to send the data. It's like a hyper link without setting the href-Attribute. Nothing can ever happen because the browser does not know what to do.
You can't do that. A form must always have an action attribute.
Noone can see the contents of the file that is going to process the form data (if this is your problem).
You won't be able to hide that without javascript. Even javascript won't hide it, but can post the data to another file while the user gets directed to the (public) file defined in the action of the form.
You can use an ajax post() call to POST data to another file. See the link provided to do this with jQuery and make sure that ajax sends the post first and then redirects/loads the user-content.
Notice though that if a client has javascript disabled, the whole POST will not be executed. Also if someone takes a look into your js, one can see the hidden filename there too, unless you password-protect the js file.
I want to have a user select a file and then have php put the contents in db. Now the last part (processing the file in php) is easy. But is there a way I can process a user selected file whithout a new page load?
If I use the following:
<FORM ACTION="upload.php" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="somefile"><BR />
<INPUT TYPE="submit" NAME="submit" VALUE="Upload">
</FORM>
Page upload.php automaticaly loads after which I can insert the uploaded file in a database.
I would like to use a combination of javascript, php and xajax to process the file. I don't think something like this is possible:
<FORM ACTION="javascript:xajax_proces_file()" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="somefile"><BR />
<INPUT TYPE="submit" NAME="submit" VALUE="Upload">
</FORM>
Because the file is not uploaded when function xajax_process_file() is called. Or is it? I think I do not fully grasp the principle of uploads with javascript, html and php.
Any help and or clarification is much appreciated.
It may help to think of this as a two step process.
First, the user fills in the form and submits it - step one.
Second ( which is the default action ) the specified target file takes the input from the form and uses it to do whatever. You can almost think of a form "action" as a link - the default action of a link click is to display the result of the link. The same goes for a form action - display the result of a form action.
Now, it's possible via JavaScript to disable the default action of an element for a particular event. It is also possible via JavaScript to access a browsers HTTP mechanism to send/receive HTTP request (which is what every page request is - whether from your URL bar or a page link or a Google search result).
And that is what AJAX in simple terms is - using JavaScript to use a browsers HTTP mechanism to send requests to a web server and possible receive a response back without the use of a traditional click event. You then combine this with the use of JavaScript to "turn off" default actions and instead follow the action specified by you to get information from a server and add it to the page without ever having to refresh the page.
Many times to prevent the defualt action from taking place for a certain element, you return false in your code. The same goes for your form. Using javascript:
form.onSubmit = function() {
blah blah blah.....Use ajax to send the information to the form handler
return false; //Prevents the defualt action of the submit event
}
If you are really new to AJAX, I suggest you check out this tutorial and then this one. Lastly, I would recommend using a Javascript framework like jQuery to help you - it is awesome and does alot of great stuff, but also has easy and built in functionality for AJAX.
Here is another tutorial to do a form submit with no page refresh (uses jquery).
an alternative is to make the form directs the action to an iframe, after processing the query in the iframe, proceed by JS to clear the form of the father