I've been looking ofr a while but I'ven't found any question that solves my question:
I've a php page with some forms, it's a long page and users may use one or some of the forms each time they connect to the website. When an users submits one of the forms the forms calls the same page but with the data updated (that works good for me).
The problem is that I would like that after submiting any form, the new page starts in middle of the scroll where the form submited is, so the user hasn't to go to the start of the page.
I'm not sure if this can be done with php or I need javascript (i don't know anything about javascript yet).
Use an id to navigate between elements in a page. Put # in action attribute when the user submits the form the browser will navigate to the form location
Example
<form id="example" action="yourpage.php#example" method=...>
<form id="example2" action="yourpage.php#example2" method=...>
Related
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.
On my current project, the user clicks on "Save Changes" on what they are editing, and it is further down the page where the edit box, saved text, etc... pops up. Is there a way I can have the site retain its page location in order to auto-scroll them back down to where they clicked edit?
Ideally I'd have some type of solution where the page wouldn't have to reload but I don't know how to do that, lol.
My site is coded in PHP.
Thanks
There is one functionality in Html to position your page with the help of using (#).
For example considering the following scenario where your Edit button resides
<div id="editButton">
<input type="button" name="Edit" value ="Edit"/>
</div>
If your page name is "index.php" and you redirect with url : "index.php#editButton"
Your page will automatically scroll to that section without much efforts.
It identifies the id of the element and put the scroll up to that position.
Cheers
You might want to have a look at some tutorials on how to save a form via AJAX. This will mean you aren't POSTing the page, and therefore it won't refresh and the user won't lose their position on the page.
http://www.jstiles.com/Blog/How-To-Submit-a-Form-with-jQuery-and-AJAX
http://www.devblog.co/easy-jquery-ajax-php-contact-form/
I have simply put name of ID selector in form action:
<form class="form-horizontal" method="post" action="#regform">
And it works for me.
Yes, it is good to have that approach.
Rather than complete redirection, only a chunk of data should be sent over and uploaded accordingly.
For this, you need http://www.w3schools.com/ajax/default.ASP
then, learn jQuery (hope you familiar with what is an id and class in CSS)...
http://api.jquery.com/jQuery.ajax/
Cool?
If you have multiple forms on one page, you could add name attribute of that form to link. e.g.
<form name="my-form1" action="form.php#my-form1">
I guess this should work.
Another way is to consider using Ajax, so you dont have to reload page at all, or you can create javasscript function that will be called on form submit and will add current page position in hidden input. After page reload, you can scroll to original position using value from that hidden input.
Yes, use Ajax to update the page partially. This is the way to do it in any web technology.
Problem:I have an RSS feed. As some of you may know, RSS feeds do not always update promptly (I'm using FeedBurner) so I'd like to provide the option on my webpage to update the RSS feed. This is a simple process, and I just need to ping an address. The catch is this: I'd like to stay on the initial page, and ideally refresh it.
I've seen some "solutions" around with using hidden iframes, and javascript, Ajax, etc.. What I am wondering is if there is an elegant way to do this using php/html.
Below is a flowchart illustrating exactly how I would like the system to function.
EDIT:
Here is the simple form code which I currently have:
<form action="http://url.to.ping" method="post">
<input type="submit" value="Refresh" />
</form>
This is a standard form, performing an action on submit. I require now that the browsers destination (as seen from the user) is a different url than that in the action. It is worth noting that the action page is not in my domain, and is not part of a domain which I own or have access to.
Thanks!
What i meant was,
/contactme.php
once they've submitted and come back to the page is there any additional variables like
/contactme.php?thanks=1
basically is there anything to declare they have just submitted and come back to the original page, if so..
You could do;
<?php
if(isset($_GET['thanks']))
{
$pingServer = file_get_contents('http://www.the.server.to.ping.com/pingit.php');
unset($pingServer);
}
?>
at the bottom of the page and it'll just hit that page.
This way you are not relying on JavaScript being enabled and the user is not hopped around multiple URLs.
What I have done when I needed the landing page to be different from the processing page is add a JavaScript redirection where one would put their "thanks for filling out my form" material.
So, the code process would be:
user fills out form, clicks submit
server-side validation and processing.
if success then location.href(URL, 0); else do error case
user is redirected to new URL (your refresh page)
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 :-)