Autosubmit form with existing 'submit' element - javascript

I have an HTML page with 1 form on it. So to auto-submit the form I could use this:
<body onload="document.forms[0].submit()">
However, there can be an element in the form with name="submit". This breaks the above code. Apart from removing or renaming the 'submit' field, is there another way to auto-submit a form?
Cheers.

Give the form an id and then use document.getElementById('id-of-your-form').submit();

Is there any particular reason that you'd want to keep a form element with name "submit"? Renaming that seems like it is the most pragmatic solution. Avoid name collisions when possible, and all that.
Assuming there is, give the form an ID and reference that.

Related

Property of a JS dom object overwritten by a sub-object in the DOM tree?

In an HTML code , i have a form Tag :
<form id='my_form' action='url.hmtl'> ... </form>
The corresponding JS object has a property named 'action', which contains the string 'url.html':
my_form=document.getElementById('my_form');
console.log(form.action);
The above code displays: url.hmtl
But if i add a sub-object, say an input, inside the form, with id='action':
<form id='my_form' action='url.hmtl'>
<input type="hidden" id="action" />
</form>
Then form.action is now the JS object corresponding to the input.
My questions :
Is this behaviour normal ?
Should I forbid myself to use the string 'action' as id of any input ?
If there is such an input, is there any way to get the original property 'Action' of the form or is it lost for ever ?
Is this behaviour normal?
Yes, unfortunately.
Should I forbid myself to use the string 'action' as id of any input?
Yes, that one and many more.
If there is such an input, is there any way to get the original property 'Action' of the form or is it lost for ever?
The attribute is still in the DOM, and when you remove the input the action property would represent the attribute's value again. Until then, you can use the getAttribute method of the form element.
The form attribute "action" is not overwritten. See example of Florian.
The question is if you experiencing a problem when sending the form to the "action" address ?
A mistake in the URL might cause an unwanted result (triggered by your typo "url.hmtl" instead of " url.html"
To answer your questions:
The behaviour is normal but perhaps confusing because it differs if you address an element by id or get the value of an attribute.
there is no need to avoid using "action" as id as long as you are specific enough about the information you are interested in. (form attribute or input element)
the form attribute action is not lost as properly answered by Florian :-)
This is a default behaviour, and will happen everytime you do somethink like that. You can use the getAttribute() function to get the Attribute.
my_form=document.getElementById('my_form');
console.log(form.getAttribute("action");

Process each form fields in a form using JQuery

I have many questions based on form. I don't know the title suits or not. I created a JSP page and contains a form. It has many fields like input, select, textarea.
First is I want to count the number of fields in the form using JQuery. I tried the following.
var ln=$("#fileUpload").find('input,select,textarea').length;
alert(ln);
The form has one select box, 3 input fields and a textarea. But it was giving 0, instead of 5.(#fileUpload is the form id I want to submit)
How to get the exact number of fields?
Next is, I want to get each element in the form and find some attribute value. For examaple I want to get the name or id attribute for each element.
I would recommend using each() function:
$("#fileUpload input,select,textarea").each(function(){
console.log(this);
}
Btw: don't use alert, use console.log() instead ;)
You need to make sure that the form is loaded before your js script is launched.
To do so, wrap it in document ready like so:
$(function () {
var ln = $('#fileUpload').find('input, select, textarea').length;
alert(ln);
});
There should no problem in your code
Check that you have added the jquery and add an attribute to your form
id="fileUpload" then check
Also, check you don't have any other element having id fileUpload
like input type="file"
In your page <form id='fileUpload' ... > must be unique
Fiddle http://jsfiddle.net/qUJZf/

How to reference a field within the current form only? -- JQuery beginner

I've tried all variations of the following:
$(this).("input[name='email']").val();
Assuming this is the form element, and you want to find input elements only with that form, you have a couple of options. You could use this as a context:
$("input[name='email']", this).val();
Or you could find the elements within this:
$(this).find("input[name='email']").val();
It depends on the context of this code, James has provided an answer for targeting inputs if you already have the desired form as your "context". But since there aren't a lot of ways to end up in that situation, and since you're looking for values I'm guessing that you're firing this code from a button inside the form, maybe a submit button?
In that case you'll have to traverse up the DOM before you can target your inputs and stay within the same form. Something like:
$(this).closest('form').find('input[name="email"]').val();

Getting reference to form with no id or name

I am working on a project where I need to recall the fields entered in a form so I can repopulate them later. When a form has a name, I can remember it and then later use some JavaScript (document.getElementsByName(...)[0]) to access it. However, if there is no name...I'm at a loss for how to get a reference to it later.
I'm using jQuery, but am open to a JavaScript solution as well. One idea is to remember the index of the form. So, if it was document.forms[3] then later I can use the index. However, when someone submits a form, how do I know the index of the form that it is? (NOTE: I am blindly adding submit handlers to all forms when a page loads to capture the activity.)
Instead of attaching events to the submit buttons, attach it to the <form> elements directly, like this:
$("form").submit(function() {
//do something with this
//this == the form element being submitted
});
Or...in your current event handlers, use .closest() to get the closest parent <form> element:
$(":submit").click(function() {
var form = $(this).closest("form");
});
If you don't want to use an index on all form (flaky because someone may add a form in anywhere), you could use its surroundings as a reference... for example.
$('#content').parent().next().find('form')

jquery, changing form action

i cannot seem to find the answer to this. i uploaded code to pastebin (so wouldnt clutter up the post):
http://pastebin.com/BhnNTnJM
but the action only changes for the delete form (id=form-horse-delete) and not the other 2 forms located on the page. i am at my wits end trying to figure out why it doesn't work for the 2 forms, yet will work for the 1 form.
in IE, if i try and change the action of the 2 forms, it gives a javascript error. but if i take out the change, it works fine with no javascript error.
You have an input field called action in the form-horse-update and form-horse-add forms. e.g.
<input type="hidden" name="action" value="add" />
action is kind of a reserved word, as having an input field with that name changes the behaviour of the form. Normally in JavaScript (let alone jQuery) a reference to something like:
document.myform.action
refers to the action attribute of the form. The minute you add an input field called action then instead the above would refer to the input element called action and there is no longer a way to access the form's action attribute.
The best solution is to rename your action input fields to something else (but probably best not to rename it to submit! ;) )

Categories

Resources