JQuery :: Ajax Form Submit - Multiple Post/get Requests Caused When Validation Fails?
May 6, 2010
I have a problem where if a form submission (set up to submit via AJAX) fails validation, the next time the form is submitted, it doubles the number of post requests - which is definitely not what I want to happen. I'm using the jQuery ValidationEngine plugin to submit forms and bind validation messages to my fields. This is my code below. I think my problem is that I need to unbind from the validationEngine plugin when the form fails, but I can't figure out how to do this.
I have a form with multiple fieldsets which are visible conditionally. There are three submit buttons "Abandon", "Save" and "Save & Continue". Each button should validate specific controls of the form and submit it. I tried setting "onsubmit: false" and checking for "$('#myForm').valid ()" on click of these buttons., but that validates all controls of the form.
I have built out a fairly rhobust app using jquery and jquery-ui all was going well until we started to bring different screens together inside a tabbed interface. Seems that now when we execute our validation code on one form its checking the fields of all other forms on the page.All of my forms do have unique ID's and all elements within all forms have unique ID's.My understanding of using this.find inside of the submit event was that it should only find the forms elements am I wrong? Method that performs the actual validation:
function validateForm(event){ var allOk = true; $(this).find("*[validation]").each(function(){[code]....
I am trying to display validation error messages when form validation fails. Currently it does display the error messages but then disappears straight away. How can I stop the page from refreshing when validation fails? I have return false in my code when validation fails but still having same problem. Currently I have only done the validation for the full name only. The error msg is showed in:
I would like to submit a form depending on the success data of an ajax post.
Below is my jquery code; as you see #theform is the main form and before submitting the form I need to check the availability of the the date and time and the room using$.ajax. However it doesn't submit the main form if the date, time and the room is available.
required=["txtCal_Event_CalendarID","txt_TreatmentRoom","txtTreatmentID","txtTreatmentTypeID","datepicker1","datepicker2","timepicker1","timepicker2"]; emptyerror="Please fill out this field.";
I have a page that relies on AJAX for content manipulation. Once a person selects a radio button, a request is made through $.getJSON() to get the replacement content. This works in all browsers. Once the new content is loaded, there are 3 more calls to $.getJSON() to change more content (on other tabs in jQuery UI). This works in all browsers except for IE.
I understand this is a Microsoft problem, and not a jQuery problem, but I am wondering if there is a way to manipulate the jQuery calls to get them to work in IE. I did try replacing $.getJSON with $.ajax, and even set async to false. None of those three methods worked in IE. I noticed the problem when my loading div was still displayed in IE. Using Firebug Lite, I saw that only one request was made, rather than four.
I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes.
I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return.
This might seem like a silly question..First issue. If i have a response and i'd like to update both text div and a status div how would i go about doing this. I've seen that jQuery has a few options such as OnSuccess etc?
Say that i post a comment and obviously you'd want to update some kinda statusbar on your website with the info that the message was posted successfully with ajax. (otherwise it might slip by the user unnoticed since ajax is kinda discrete)
Would it be a good way to for instance check the responseText if it contains anything and if it does you simply write a successmessage by grabbing a div from JS and if the responseText contains a custom error code lets say 1 you'll update the statusbar with a deny message?
Second thing. I've currently created an Ajax search on my site which activates whenever the user press or unleash the button. The issue is that if the user types fast enough it comes stuck showing the Loading.gif constantly. Could this be due so many requests opening and that i have a sleep on the server-side and if so how would you do it instead? I am using a serversleep of 1 second to have the Ajax pic appear consistently.
I have a jsp page using ajax that has a button with an action. The action sends multiple ajax requests. The response from these requests is to be used to update a progress indicator to show the servers current progress. I can see from the debug that I am getting the 1st response. I think it is the way how I have implemented the further requests. I think this is down to my javascript knowledge, which isnt very much. Also I assume using multiple requests in this way is the correct thing to do? I have spent ages trawling the internet trying to get a solution.
I've got some strange behavior with validation. I'm loading up a form to allow editing of an existing database entry. If I make my changes to the fields, enter in the required "revision comments" and submit, the page does NOT post, it seems to only refresh and empty out all the entries in each of the fields. Now, on the other hand if I open the form to make changes to a database entry and immediately press "Submit" without filling in the revision comments field, it fails validation and tells me to enter comments. Now if I fill in comments to satisfy all the requirements and press submit, it posts and I get my "Successful Entry" confirmation prompt. I think I've narrowed it down to the remote: part of my jQuery. I eliminated by trial-and-error the other pieces of the jQuery code and it seems that when I remove the remote: it does not experience this strange behviour.
jQuery Code: [code] // Form Validation customization $("#Form_business").validate({ rules: {
I'm encountering an AJAX problem when I try to execute multiple AJAX requests at the same time. What I want to do is delete a message and display the status (succes or failure) of that in div1, and refresh the messages on the page in div2. This needs (for as far as my knowledge reaches) two AJAX actions from which I both need the responseText.
The problem: What happens when I execute my script is that the second action (refresh a part of the page) happens before the deletion is executed. The result of this is that when the deletion has been executed, the page is already updated, and the deleted message is still there.
The script What I now have is: function doAjax(url, element_id, img_url){ var ajaxObject = createAjaxObject(); ajaxObject.open('GET', url, true); ajaxObject.onreadystatechange = function(){ if(ajaxObject.readyState==4 && ajaxObject.status==200){ document.getElementById(element_id).innerHTML = ajaxObject.responseText; delete ajaxObject; .....
I need to send 15 requests to my server and get results, these results are queries to other sites. I then update my page with the results. I need to know if I am taking the correct approach, as things are working a bit slow, and i.e., seems the be as slow as a snail.
Here is my function for the first request Code: function one(){ var xmlHttpa=null; try{ xmlHttpa=new XMLHttpRequest(); } catch (e){ try { xmlHttpa=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try { xmlHttpa=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; }}}
xmlHttpa.onreadystatechange=function(){ if(xmlHttpa.readyState==4){ document.getElementById('resulta').innerHTML = xmlHttpa.responseText; var el = document.getElementById('showMessagea'); el.parentNode.removeChild(el); applystyle(); }} xmlHttpa.open("GET","one.php",true); xmlHttpa.send(null); }
I then call this function and others from my page, one(); two(); etc. Am I correct in my approach?
I am making a call to a php file which right at this minute has no validation, all validation is been done by the jquery form plugin. the validation (xss prevention soon to be implemented) in the thanks fails I want to stop the processing of the form i.e. stop the return of success.
One of the links adds a button to the form dynamically (and also removes it).I give the button an onclick event handler that also removes it from the page (basically just setting its parent.innerHTML='')A third link submits the form using a function (for validation perhaps).The third link submits the form successfully, EXCEPT when I have removed the newly created button by clicking on it. In this case the form.submit() is simply ignored although the function is still executed.This is essentially the problem I have: The link fails to submit after using the button to remove itself.If I hide the button using the first link and/or change the button's onclick to do nothing then I can still click it and the form submit succeeds.Here is the test code:
but I am getting this error in FF3/Mac: document.forms.fromPreview2commitForm.submit is not a function Why?I just want the anchor (when ciicked) to submit the form.I have been over several examples I found while googling.. and I follow them.. but still getting this error.
I'm using the Validation plugin for JQuery and was wondering if there was a function to submit the form without causing it to validate the form. I have a table with a list of radio-buttons and above that is a drop down list of states. The drop down list of states is used to filter the table rows and when the selected item changes it posts-back to the server (via $("#frm").submit()). I don't want this to cause any validation to occur. Is there another function I can call besides submit(), or some other method?
I have a series of paired <select> objects. By paired I mean the <option> values of one is dependent on the state of the other via an ajax call. Something like:
[Cdoe]..
Here's where the bizarre behavior happens. If I trigger a change event for "primary" classes, i.e. $('.primary').change(), only the LAST "secondary" gets changed. For the list above only $('#number_six') would be dynamically filled. I tried using $('.primary').each(function(){ blah }) instead but got the same result. I read somewhere that some change events are only registered when the object is no longer in focus, so I tried adding .blur() to the end of the statement.
I have acollection of local variables populated via Flash movies and scripts, and now I need to submit an ajax post (can also be get, but prefer post). I have tried:
The problem with this is the encoding of the localParam1 and localParam2 sometimes breaks the normal & delimeters. An even more problem is I sometimes haveupwards of 25+ local variables that I need to submit. These inline +s makes it feel, and look, like one huge hack - not to mention the encoding. One last restriction: I cannot use any jquery plugins due to the company's policy. So, I'm looking for something small and light as a solution - not a plug-in. Isn't there an easy way to do this? ONe thought I had was to create a new <form> on the page, and insert the variables as new <input /> fields - and then finally submit the entire form. Again, a big hack + css
I know how to submit via a text link, using document.frmname.submit(), but you can not attach a value to the A tag, so you can't have several submit links within one form.
I need to do this however! I want to have several text links within one form - submitting to the actionpage, and based on the value of the submit, it will do something different.
Ok, so I know I can do this without problems using the input tag and submit buttons, or I could use seperate form tags for each link, but that would mean a lot of repeating code, and I want to make this as compact as possible.
I use ajax submit for my jquery validation form. I NEED a captcha for the form, being I am getting attacked by bots. I cannot figure out how to do it. I will past my code below.
$('#contact_form2').validate({ submitHandler: function(form) { var str = $("form").serialize(); $.ajax({ type: "POST", url: "contactpage.php", data: str, success: function(){ $('#contact_form2').html("<div id='message'></div>"); $('#message').html("<h2>Contact Form Submitted!</h2>") .append("<p>We will be in touch soon.</p>") .hide() .fadeIn(1500, function() { $('#message').append("<img id='checkmark' src='images/check.png' />"); });}}); return false; }
I am trying to follow this article on doing a POST request with AJAX and PHP and it works fine, but as soon as I switch from the default submit button to an image I get an error. why switching the submit button to an image would affect it. [URL]
I am trying to use jquery's ajax framework to check if the data that is entered is valid or not. The form works properly except i cannot get the page to go to action="something.php" file in the form part.
[Code]...
I enter a company into the form and hit submit The form will send the data to my validate company.php file. Validate company will return either "good" or "bad" If "bad" the form works as expected. it will stop the function by returning false and alert you that it is already in the database If "good" the page just sits there, basically returned false. however if you click submit again on the html form the function will go through and do what return: true should do.
