Replace text on page on form submit - javascript

I have a form to let people submit news articles to my site (a company intranet). Sometimes the form submission takes a few seconds to resolve due to some actions I have in place on the relevant model save method. I wanted to replace the text on the form page with a message saying "Sending your article. This may take a few seconds, please do not refresh the page." as soon as someone hits submit. I've seen these on a number of websites when buying things online.
My first attempt at doing this was to add an onClick event to the form button. Submitting then successfully replaced the text but did not submit the form. I had a look at this answer on binding two events to one submit button but it doesn't seem to address my need as it looks PHP-specific. I'm certain javascript is the right tool for the job but I can't think of how to do this other that binding to clicking the submit button. Does anyone know the correct way to do this?

JavaScript is indeed the right way to do so. If you are using jQuery you can go ahead and use something like:
$('form#your-form-id').submit(function(){
$(this).hide().after('Loading, please wait...');
});
Where #your-form-id would be the id of the form. This function is hiding the form content and showing that text, you could do anything instead actually.

Related

Can I keep fields in a form populated even if I move to a different page and then back?

I am currently looking at creating a form using HTML, CSS and a bit of JavaScript. I was wondering though if anyone had any ideas how I could keep all the fields populated?
I want to be able to fill in a form and click 'Next' which will go to a different page with a different form. But if the user presses the 'Back' button to edit some information on the previous page for example, how would I keep all the fields populates?
Bit stumped on this, so any suggestions would be appreciated :)
You may use localStorage or cookies for that purpose to store content of the page on the client' side.
See https://stackoverflow.com/a/27273657/696034 for an example; in you case, you call save() when receiving location change event, and load() on the page' initialization.

User account creation and validation (BigCommerce)

I'm having a little trouble with my account creation form.
first of all, my site is on 'BigCommerce', but they can't help me because i changed the design and they don't deal with design related issues.
The problem is like this:
If I fill every textbox with the right information and click submit, everything is just OK. I'm getting transferred to the 'Thank you' page, the new user is added and everything is just fine.
But, If I type something like a wrong E-mail address, Two not-matching passwords, leave some text box blank or something like that and click submit, the form is all blank and I have to start filling the details all over again.
second, I'm getting redirected to another page (with a new and empty form), and the error is written on the top on the form, instead of getting a pop-up message with what's wrong on the same page.
so.. this is the account creation page:
​
http://pastebin.com/pB5mrbtf
​
and the javascript code its redirecting to
http://pastebin.com/gLw5WCEQ
Please help
remove the autocomplete="off" for your text removing issue and for others pls attach jsfiddle link.
Also keep your old id's and class's for validation, otherwise you need to update your js file functions also. please provide jsfiddle link

What HTML Form Action to use when no data is actually being sent?

I am working on learning JQuery and creating a simple HTML / JS calculator. I used a standard HTML form to allow the user to enter the data they want calculated and when the user clicks submit my JS / JQuery calculates and spits out the answer.
My question is what would be the semantically correct way to deal with the HTML form action being that Im not actually posting any data? I dont want to leave it default because when I click my to trigger an event it changes the URL and I dont want to use POST because Im not posting anything. Any help is appreciated!
I would replace the submit button with a normal button, and prevent the form being "submitted" at all. then use javascript to do the calculations on button click. This way the form never gets submitted, and you don't need a method or action at all.
If you really want to do a request at all, you probably just want to do a GET...check the list of HTTP request methods here to see if another one would better fit your needs.
If you are doing everything with javascript, though, you shouldn't be submitting anything at all. Try changing the submit button into a link (or just a regular button) and bind your calculator logic to its click event.
Don't specify any action(Default is GET). Use an html button which would call the js function on the click event. That would do the work on client side
You don't actually need to put input elements inside a form. Since you don't intend to submit the form, I would just omit it entirely.

Validation error with JotForm template

A client sent me a form template they had created using https://jotform.com to implement on their WordPress site. The form template is supposed to hide part of the form until the user clicks the next button. At which point a script is supposed to validate all of the input fields the user has presumably filled out and then display the rest of the form. While I have successfully managed to get the form to display the next part of the form when the user clicks next, it fails to validate the input fields.
It's kind of difficult to explain without a huge block of text so it is probably easier to show you:
The original working template that the customer sent me:
http://www.loftist.com/jotform/List_Your_Loft.html
The problem child:
http://www.loftist.com/?page_id=78
If you just click on one of the input fields and then click elsewhere on the page, the input fields successfully return a validation error message and prevent the user from clicking on the next button. However, if you simply click on the next button than the next set of fields get displayed.
Any thoughts? What am I doing wrong here? Im convinced this must be a really simple problem but Im not sure what it could be.
I don't understand the problem. Your first link, the original template, works for me with all the validations in place. The problem child on the second link is not a jotform form, and it doesn't have any paging stuff.
Do you mean jotform on your first web page is not working correctly? What does this have to do with the second form on your second link?

How to submit form with data before logging someone out?

I'm using the document.form.submit() function for a rather large input form (hundreds of fields, it's an inventory application). I'm calling this after the user has been idle for a certain amount of time and I would like to save any data they've typed. When I try this the page reloads (the action is #) but any new text typed in the fields is not passed in the REQUEST, so I don't get to put it in the DB. Is there some fundamental reason why this happens or is my code just not playing nice together (I'm using the EXTJS grid view to show the form and a library for tracking idle time)?
Thanks,
Robert
I guess I put the answer here. What I found was that doing this:
setTimeout('frm.submit();', 2000);
caused the page to reload but didn't submit the form. When I did this:
frm.submit();
The form was submitted and the data was passed. I don't know why the first way didn't work, but I don't need to know that:)
Might the server be voiding out the input values. Say if your page on the server looks like this:
<form action="/page.cgi">
...
<input name="Fieldx" value=""/>
</form>
I think it'll void out the field. Or this the server action might be setting it indirectly. In JSF, something like this.
<input name="Fieldx" value="#{bean.nullProperty}"/>
What do you have on the server and what's your browser?
I would try to catch the HTML post request to see if the input fields are included. If they are then your server has problem.
But regarding what you said, I think it's because there's conflict in the way your browser handles JavaScript DOM. This may be the case if you leave out the submit button on your form and it works.
The submit method of HTMLFormElement objects should just submit the form, as if the user had clicked the submit button. So, if the action attribute of the form is set to #, it would just seem to refresh the page, because it’s sending the form data to the same page.
Strange that it still does it when you set the action attribute to another page though.
Is the method attribute of the form set to get or post?

Categories

Resources