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).
Related
I use an iframe on my page, which consists of a form with input elements.
Every input element has an onblur() event, which validates the input.
When I open the page in IE 8 with a freshly cleared cache it produces a javascript error like this.
document.getElementById(...)' is Null or not an Object
However, when I inspect the form it is loaded completely and the I'm trying to access is rendered.
Furthermore when i reload the whole page I don't get any errors anymore.
Also when I load the content of the iframe on its own I also don't get errors.
Firefox and Chrome dont throw errors at all.
In short, the Javascript errors I get only occur in IE and only when I use an iframe to display the form (which is mandatory) and only when the page is loaded for the first time.
Any ideas on how I can fix this?
I hope its not too confusing to read.
Edit:
document.getElementById("vHint_"+fieldName).innerHTML=data;
FieldName is the id of the input field. Data is the return value of the validation.
In this case data is an image tag.
After every input field is a span Tag with the id "vHint_"+fieldName.
The event is attached like this:
<input id="Jahr" class="input" type="text" onblur="validDate(this,'Jahr','_beginn')" maxlength="4" style="width:32px" value="" name="Jahr">
First of all thank you for your effort.
The example user13500 provided worked like a charm.
And it made me dig deeper.
And i found the solution.
All input fields are created with a self made ASP Framework, which puts them all in the Session.
The onblur() event of the input field within the iframe triggers an AJAX Request to an ASP file passing the name of the input field as a request parameter. The ASP file now tries to find the field in the Session and retrieve its value to validate the input.
After that the result is posted back to the javascript file, which then uses document.getElementById("vHint_"+fieldName).innerHTML=data; to post the result back in the page.
This normally works without erros.
But, since the application is run in an iframe and the domains of the surrounding page and the application in the iframe are different, IE rejects the Session of the iframe. Thus the result of the ASP validation is empty, because it couldn't find the field in the Session.
Having figured that out the only thing that has to be done is to add this line of code in the application:
Response.AddHeader "P3P", "CP=""CAO PSA OUR"""
This way IE doesn't reject the Session of the application anymore.
Maybe this can be useful for others too.
I am writing a script to make a page auto submit twice. The script should first press the first submit button, then have a small delay and press the second. Both are on the same document.
What I am doing is: get the document, then use document.GetElementByID('id_button').click(), and have timeOut for a delay to the second click. Thing is, the first button works fine, but the second won't work. I don't know why. Is my approach correct?
Have the action on the form reflect the state.
/Page.HTML
/Page.HTML? washere=true
/Page.HTML? washereagain=true
That can be identified by your script
What I am doing is: get the document, then use document.GetElementByID('id_button').click(),
Not all browsers support the click method for submit buttons, so your strategy will fail for a good number of browsers in use.
You can submit the form by calling its submit method. If you want to auto-submit it a certain number of times (which seems a pointless exercise, but that's your choice), set a cookie each time you submit the form and check it when the page loads to see how many times it's been submitted.
This is weird, but I've been using this method all over my code: I have dropdown lists that I populate client-side, using callbacks and because of this I'm unable to access their selected values from code behind and using a hidden field to store selected value in it. I had no problem retrieving the hidden field's value on postback, but all of a sudden it stopped working and is always blank, even when the value on client side is present.
Any thoughts?
P.S. I'm not setting or resetting hidden fields on postback.
Okay, if someone wonders what's wrong: it seems there's something related to jQuery.
The thing is that DropDownLists and the hidden field, along with the button that causes postback are inside a jQuery UI dialog that is initiated on page load without opening and appended to the form. Besides this dialog i'm initializin another one and also appending to the form, but for some reason the first appended dialog exibits the weird behavior when postback works, but hidden field does not retain the value. If i don't append the second dialog to the form, everything works as expected. Can't really tell what might appending the second dialog be doing that is causing this weird behavior.
P.S if i reverse the order in which those two dialog boxes are appended, it works just fine... Weird!
Using .NET?
When the values are added dynamically the backend has no clue. You need to use Request.Form to get the values posted back just like oldschool ASP days.
Pressing enter inside a textbox refreshes the whole page in Google Chrome.
please help me out
Pressing Enter in an input field submits a form which, depending on your form's action attribute, may well be submitting the form to the same page (causing it to appear like a refresh). This is intended behaviour. If you're talking about a text-area, then that's an entirely different matter (and is probably relating to some custom JavaScript event).
If this isn't what you mean, you're going to need to clarify your question. At the very least, please post the excerpt of HTML that encompasses your <form> tags.
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?