I have seen a few of these floating about however I want to use it different to the way they posted on here.
I have all my server validation (for register page) at the top of the page so the form submit looks like (im on index.php so it just does it's self):
However, the index.php page has a login button and a register button and the form pops up depending which you click.
However i need that div to act like a page, so you submit and it reloads the div as if it were a web page if that makes sense?
Thanks for reading :-)
Related
I'm working on a landing page made with Bootstrap 4, Wordpress and Contact Form 7 plugin. In the page I have 4 buttons that when clicked show the same Contact Form 7 pop up form. I want them to:
Any of the 4 buttons clicked for the 1st time show the pop up with the form (already done).
When the form submited and any of the buttons clicked again (could be the same one) do not show the form, but start a download of PDF document.
I don't know how to design that better. I think that when the form is submited a cookie is set through PHP so I can check in each button if the form is done. Is it a good aproach? How should I set the cookie? Is there any other way?
The simple solution would be redirecting the user to the PDF right after the form submission - there is a simple guide on how yo can do it. That could enchance the UX, users wouldn't need to understand that they need to click the same button once again.
Also, it could be easier because you would obviously want to change something after the actual event of sending the data (no matter how you track it). For example, you will not only need to add teh URL to the PDF into the button, but change the text and maybe even the style of it to make it obvious to the user.
However if you'd like to make it complex way - you can try changing the link on the button of form submission or adding the download link (or "enabling" it), while disabling the submission button inside your form. Some examples on changing the link or showing/hiding contect can be found here and here - all using the jQuery, no extra PHP needed.
I would like to show certain image on a page which is open in a tab, only when the other page press a button. I know I can post on the other page, but is it going to be live? Because I am not gonna be refreshing the page at all. My whole plan is to press a button on one page and show live result on an another page without refreshing it. How can I make it possible? I just need the basic idea behind it. Sorry if I made it sound complicated.
Thanks
I'm wondering the best way to go to a new page. I have a PHP document with a submit button. Once that button is pressed, it runs the php code on that page, creates some session variables, then I want it to go to the next page after this code is executed. I know with traditional submit buttons you simply have the form that's run being the next page, but how do I link it differently?
You can force redirect with successful headers like as below:
header("Location: second.php");
In a well designed web application, there is no direct relation between the script and the page as the control script is the same for every page and simply shows the page needed based on what was selected or done.
There are many ways to implement this but a good starting point would be to look at MVC design.
set the URL of new page on form action='' to load the another script after submit the form.
I have created a single page portfolio template using Bootstrap framework from Twitter. I am having an issue that when I click on "Submit" button in the contact form, the page scrolls all the way to top. I have checked that I have not used any internal linking to top so I am not sure why this happening. My intention is to stay on the same page and show user some friendly message. Can anyone help me figure out the issue? Thanks in advance!
Template can be accessed at:
https://rawgit.com/gupta235/portfolio_template_bootstrap/master/index.html
I have made the template available on my github page: https://github.com/gupta235/portfolio_template_bootstrap
Forms typically send you to a new page. Since your form is all in one page, the "new page" its sending you to is the same one you were already on, and so it sends you to the first part of that page, which is the top.
You can prevent the page from scrolling to the top by giving the form an action ability that instead of sending you to a new page or the top of the current page, will take you to an id that you place somewhere on the page.
Same concept as putting an anchor point on your page and giving people an option to click a link that takes them to a certain part of the page.
For example if you change your form opening code from
<form method="post">
to this instead
<form method="post" action="#error-check" id="error-check">
This should take you to the form when you hit submit, instead of the top of the page.
A form without an action attribute is not a form, according to standards - and will actually cause a page reload in some browsers.. I've found that action="javascript:void(0);" works well.
FIXED, Wrapping the input tag with an anchor tag around it seemed to
have worked.
The question could sound a bit confusing, let me elaborate.
I have made a mail form with PHP. This form is all the way at the bottom of the page.
When I click send (this is an input tag), if there are errors, it will display them above the form.
But when you click on send the page will first go back to the top and you have to scroll all the way down to see if you have made any errors.
So is it possible to keep the page from jumping back the the start?
You could have a page anchor on the form and point at that anchor in the form action, something like this should do that for you.
<form action="someformaction.php#form-anchor" id="form-anchor">
</form>
Now when the form is submitted it should move the page down to where that anchor is.
By the sounds of it, you are submitting a normal form which in turn sends the email.
You can possibly put an anchor at the bottom of the page and have the action of the form point to it, so that your user will open up on that part of the page, or you could submit via a ajax instead which will not cause a page reload. Here are a bunch of tutorials you could adapt to your code.