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.
Related
I followed the example here Yii2, feedback form in a modal window and I was able to create a contact widget that I added it above the footer of multiple pages on my website using the code <?= FBFWidget::widget([]) ?>.
I stripped the code of the modal box so I am not using that. The problem I am facing now is that whenever I opened a webpage, the page jumps straight to the contact form at the footer instead of showing the top of the page as a any normal browser should do.
I followed all the code as explained in the tutorial so I do not want to post all the codes here. Please see the tutorial
How can I stop this problem.
You are using autofocus property on the contact form field name which is forcing the page to go down as the cursor is focused inside the input field, you should remove that property or bind it only if the page url is /contact-us or whatever you are using for the contact form.
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=...>
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.
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.
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 :-)