I am writing a very heavy Javascript application using jQuery. One of the problems I am facing occurs when I perform AJAX form posts. Initially, the forms are rendered from a server side templating engine, these forms have default values set. The form has two options, SAVE and CANCEL (revert). When a user clicks "SAVE", the form data is POSTed to the server via jQuery. When the user clicks "CANCEL", Javascript's reset() function is called on the form.
The real problem occurs when I input/update fields on the form and then SAVE it. If I then attempt to edit the form again and click "CANCEL" the form is reverted back to it's original state (the state of the form on initial page render) and not that of the last AJAX submit.
It appears that Javascript's reset() function is using the 'value', 'checked', etc. attributes that were set on page render. If this is the case, what is the best way to update a forms values so that the reset() method will revert to the last point at which I submitted the form via AJAX?
you would need to "repaint" the forms so that their "initial values" are the ones that are on that AJAX submit. form reset rely on the value that came when the element is painted on the page. here's a demo to show the concept
just rebuild that form again, with a template and the successful values. you can do this on the fly using a JS template engine like mustache and maybe cache the template locally so you won't be doing extra HTTP requests
Related
When purchasing a course, the user can enter 1 or more students to register for the course. By default there is only one entry but the user can use a dropdown to select more and then the form will update to show more.
I am accomplishing this by triggering an event when the user changes the dropdown value that uses ajax to call an action which returns a partial with the appropriate number of entries and then I just replace the existing div with the new one.
My question is whether there is a way to implement this so that it's kind of like "refreshing" the page where the form remembers and automatically refills in he values the user already entered just like if you were to refresh the entire webpage. Is there a way to do this, or will I need to pass in the existing values into the action in my ajax call and have the partial set them?
A secondary question I just thought of (and perhaps this should be in another post but I will go ahead and put it here for now) is whether I should be concerned about any weird behavior with validation when doing it this way? (I'm using stock, built in validation with annotations).
Is it possible to replicate f5 action to link using jquery? I need to refresh the page and resend data using this link, I have tried :
location.reload(true); or document.location.reload(); or $.f5();
But did not satisfy me.
Steps to reproduce using f5 key :
1. fill form then submit
2. press f5 - confirm box will appear
The page that you're looking for used information that you entered.
Returning to that page might cause any action you took to be repeated.
Do you want to continue?
try using
window.location.reload(true);
if it wont resubmit the form. you have two more options.
Submit the form using ajax after once submitted and resubmit the form and second time refresh the page or clear the form
Or you can keep the post data in some session or in the post array [server side code] and refill the form and resubmit,
Make sure you keep the track of numbers of submit you made since it will cause you trap in some recursion.
BUT why you want to resubmit the form you already have data you can perform both actions,
And if you have to post the form to some other action for second submit you can do the same may be using CURL at server side.
Try this:
window.location.reload(false);
// If we needed to pull the document from
// the web-server again (such as where the document contents
// change dynamically) we would pass the argument as 'true'.
source
I've tried to insert a form in woocommerce product page. I've inserted the form in the product page. When the form is submitted I'm trying to get the email (form input value) and validate it accordingly.
The problem is I'm not able to get the value in some theme using jQuery. I see the form and its elements in firebug. But jQuery is not even working for the click event in variable product (woocommerce product page). Here the form is inside their form (which enctype is multipart/form-data), this might be one reason or if I place the form above the variable product form jQuery it works but it returns empty string.
Even if there is some text inside the form input field, it returns empty string.
Here is the form
Here is the jQuery On submit click
jQuery(document).ready(function() {
jQuery('.mailsub').click(function() {
var subaddress = jQuery('.subemail').val();
console.log(subaddress);
if ( jQuery('.subemail').length > 0 ){
console.log('the element with element_id exists in the DOM');
}
//ajax goes here followed by validation for the email
return false;
});
});
I've tried to check whether it is in DOM or not, so I've used the code, it says the element with element_id exists in the DOM.
I'm able to get the form completely work on twentyeleven and defaults themes. It is working in wordpress defaults themes but not in some other third party themes.
What might be the problem? Any suggestion would be much helpful.
The HTML and code as given should mostly work. I'm guessing that there is another element with the class subemail earlier in the document. When you do jQuery(".subemail").val(), jQuery finds all of the matching elements, but then returns the value (if any) of only the first of them.
Side note: If you step through the code with the debugger built into your browser, rather than doing console.log statements, you can inspect variables as the code is running, which is dramatically more educational, usually.
Side note 2: Some browsers submit forms when the user presses Enter in a text field. In that case, the click event on the submit button may not be fired (since the button wasn't clicked). To reliably hook into the form submission process, use the submit event on the form, rather than the click event on the button.
Side note 3: You've said you're using ajax to validate the email address. By default, ajax calls are asynchronous, which means you cannot use the result from the server to decide whether to submit the form, because you don't get the result until after the submit event handler has returned and (probably) the form has already been submitted. You can make the ajax call synchronous, but that locks up the UI of most browsers while the call is in progress, leading to poor user experience. I suggest validating the email address via ajax when the field changes, and then again on the server when it receives the form (you can never rely on client-side validation). That lets you give the user proactive feedback (the on-change validation) without trying to validate it via ajax when submitting the form.
am using a form to register the user on my website and i have a captcha security on it. Everything is working well and good but the only problem that i am facing is that if i enter a wrong captcha or somehow the page refreshes , all the data entered by the user is wiped out.
what i wish to achieve is that even if the captcha entered is wrong and the form is submitted , the form should have all the fields intact as the user filled in excluding the captcha field.
How can this be done? My form is html and by using javascript im validating it
Some browsers may be smart enough to do this, but if you want to make sure, the only way to retain data across a page reload/refresh (including form submission) is to keep it on the server, and/or put it in a cookie.
However, instead of using a submit button, you could use a normal button with an onclick() function which validates the data first, then manually submits the form if appropriate.
document.forms["form_name"].submit()
You also have to handle key events for the form text inputs, to prevent enter from submitting.
However, this is still much easier in the end, since it prevents the page from changing and doesn't require server side storage or cookies.
Upon user interaction, I need to remove certain input params from an HTML form before submission. Using javascript to remove the input fields from the DOM doesn't seem to actually remove the params from being sent through the request.
Is there a way to delete or clear the actual request params?
You could disable them.
formElement.disabled = true;
I am not sure if I am following your question exactly or not. But the way I read it, you have a set of fields in a form and when you submit, you are relying in the native form post behavior which places all the fields into the post.
My initial reaction would be to make the post yourself, using Ajax. Then you have complete control over what values are passed along and what are left behind.
That being said, if Ajax is not an option for whatever reason, what you could do is create a second, hidden form which is responsible for the actual posting. When you submit the visible form, you can copy the values you actually want submitted over to the hidden version, and them programatically post that one.