Develop Reference

Replace text on page on form submit

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.

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

javascript form submitting to wrong target second time

I have a form I am submitting with form.submit() to a hidden iframe. I then take the result and process the data.
If the result fails (validation errors) then I display an error in a div tag.
The problem I have is that if you press the submit button again the form submits to a new tab.
I tried form.reset(); // just resets the form.
I have tried resetting the target of the form to the hidden iframe again but that doesn't seem to work either.

I tried this a long time back.
The trick was to set the target of the form to hidden iframe using html and not JS. What I mean is, you should do:
formContainer.html("<form target='iframe_name' .... />");
However,
get_form_by_id.setAttribute("target","iframe_name")
didn't provide the desired result.
(There shouldn't be a reason for it, however speaking from experience, I faced this issue when designing an IE compatible website and this was the solution that worked).

HTML - Which form element caused submit

I'm debugging a weird problem with two simlar search forms - when user types some search criteria in a text box and hits enter, one form returns results and another just reloads. And it happens only in IE - FF treats both forms as expected. I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
How do I find what form element caused submit event?
Thanks,
Andrey

Sounds like the single textbox form bug in IE.
To get around it, you can use Javascript to handle the enter key press, or just insert a blank hidden textbox. Lame, I know.

I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
Yes. Browsers may, largely at their whim, treat enter as clicking on a submit-button, just submitting a form, or nothing. Put general form submission stuff in form.onsubmit, rather than an onclick on the first submit button.

You could sprinkle your form elements with onclick events to set a hidden form variable with a different value per element, then sniff the results either with a DOM inspector or through something like Fiddler.
There may be a way to simply have a form onsubmit() event that you can extract the triggering element from the event object, but I'd have to dive into the docs to see if this is possible... if I get chance I'll do some looking.

I think I may help you much If you provide your two forms code. However, check to see for the following submit button code:
<input type="submit" value="Submit">
When you use this, then when you press Enter among the corresponding form, the form will be submitted. If you wish to check something before submitting you can use JavaScript Function like the following:
<input type="button" onclick="javascript_function_name();" value="Submit">
Thanks. If this can not help you, please express the situation more briefly.

jQuery: issue with live events, a form and the back button

I have build a quite complex widget which contains "some kind of
form". It has a form tag, but I'm loading a lot of stuff in there via
Ajax etc. Cannot explain it in detail, and the code is too long to
paste in here.
Now, in a "live('click', function()" I use for one of the form fields,
I'm writing a couple of values into hidden fields of another form.
That works fine, as I can see them in the generated code. But if I
leave the page and then hit the back button, the values are gone.
If I write some values into those fields outside the live click
function though, they are still there when I leave the page and come
back using the back button.
But I need to write the values into the hidden fields out of the live
click function (I'm inserting values from fields of my form into
them).
I don't know what causes this and wasn't able to find a workaround yet
(even though I tried a lot).
Any ideas?
Thanks!

Have a look at the jquery history plugin (http://plugins.jquery.com/project/history)

Usually what happens is that browser remembers what you have entered into a form (even if you don't submit it) so that when you hit back button, it populates all the visible fields for you.
It seems it's not the case with hidden fields. There's a workaround though.
Every time one of your hidden fields is changed, you can add #part to your url (eg. www.mysite.com/users#userId,groupId,...).
When the page is loaded again (via back button for example), it will contain the #part. Parse it as a string to determine how to populate hidden fields and populate them.
Review the history plugin for jQuery to see how to read the #part.http://plugins.jquery.com/files/jquery.history.js_0.txt

Use CSS to hide the input instead of the input type.
<input type="text" id="foo" name="foo" style="display: none;" />
instead of
<input type="hidden" id="foo" name="foo" />
I tripped over the same issue and this seems to resolve it.