jquery, changing form action - javascript

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! ;) )

Related

JQuery fill the form but failed to be recognized

I am using Flask as the backend. And I wrote a simple form with WTForm, say,
field = StringField('input:', validators=[Required()])
And I write a JQuery to fill it automatically
$('#theidofthefield').val('fillingin');
And I click the submit button in the form but it shows that the field is empty. And I check the request.form.field.data is also empty.
Hope to get a solution.
I have no idea about WTForm but you can check if your field element has got the name attribute, which is required to send back to the backend code.
Your field has to be something like this:
<input type="text" name="thenameofthefield" id="theidofthefield" />
//-----------------^^^^^^^^^^^^^^^^^^^^^^^---name attribute is required.
Another way to fill value is:
$('#theidofthefield').attr('value','filling');
Lets see if it works..
In case variable field is pointer to the object then..
$(field).val('dfsdf') or $(field).attr('value','filling') may work.

How do I access form data submitted by a user in Javascript?

I'm relatively new to programming, but understand the basics of HTML, CSS, and Javascript (including jQuery). Due to my greenness, I'd appreciate it if answers contained both a simple solution and a reason as to why the solution works. Thanks!
So I've got a form, with a text input and a submit button:
<form>
<input type="text">
<button type="submit">Submit</button>
</form>
When the user types data into the text field and clicks submit, how do I gain access to this data? If a user inputs their name, how do I grab that information? I don't intend to store it or write it anywhere, just to hold onto it as a variable in javascript, which I'll assign to a jQuery cookie.
So how do I access the data that the user has submitted, preferably using only Javascript (with jQuery)? Thanks for the help!
You access the data on the server side (in PHP via $_POST['username'] for example). The form sends data to your sever for any named input, so you would probably have to change the input to:
<input type=text name=username>
If you want to access it on the client side (with JavaScript), you can do that too, but you have to prevent the form from submitting:
$("form").on('submit', function (e) {
$.cookie('username', $(this).find('[name=username]').val());
//stop form from submitting
e.preventDefault();
});
say you had an html input tag such as:
<input id="textfield" type="text">
using javascript, you can store the value of that field in a variable like this:
var inputvalue = $('#textfield').val();
of course, you'll need something to run the script.
the reason this works is that the the textfield is an object. you might think of it as a tree trunk with different branches coming out. one of these "branches" is the value contained inside of it. since you know jquery, you know that $('#textfield') gets the element by a selector. the period says we're getting one of the branches, and "value" says we want the branch that tells what's in the textfield.
hope this helps.

Using enter to submit a form breaks after input fields are inserted - why and how to fix?

If an HTML form field has focus and you hit enter, the form will be submitted (unless you've done fancy things to bypass that). Weirdly though, if JavaScript adds a field into the form, that enter-to-submit behavior appears to break. For example:
http://jsfiddle.net/SChas/1/
function goose() {
document.getElementById("addhere").innerHTML="<input name=goose value=honk>";
}
function checkForm() {
alert("ok");
}​
--
<form onsubmit="checkForm();">
<input name="duck" value="quack">
<div id="addhere"></div>
</form>
<button onclick="goose();">add a goose</button>
​
(This is a contrived example attempting to be as concise as possible. The original code involved is more modern code with events attached in JavaScript, etc. But this is the simplest code that replicates the issue. Also, it is necessary in the real use case to dynamically modify the form by adding/removing fields.)
Anyway, you'll get a form that has a single field with a value "duck". Click into it and hit enter, and the form will submit (you'll see an "ok" alert and then JSFiddle will tell you not to post!).
However, if you click "add a goose", you get a new field. And now, you cannot hit enter to submit the form.
Why is this happening? I can't find anything about this behavior via google, perhaps I'm using the wrong search terms. But it happens in IE on Windows and Chrome and FF on OSX at least. So it seems like an intentional, perhaps to-specification, behavior. Is it some kind of security protection?
And, is there any way to restore the enter-to-submit behavior on the form once a field is inserted? A way other than to add onkey* events to the input fields?
FWIW, it doesn't seem to matter if the inputs are added via DOM methods (appendChild), or setting the innerHTML, using jQuery or old fashioned JavaScript.
This is because the enter-to-submit behaviour only happens when it's the only input on the form.
You can restore it by putting a input with type=submit on the form, it doesn't even have to be visible.
Check it out: http://jsfiddle.net/SChas/10/

Autosubmit form with existing 'submit' element

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.

One form, multiple submit buttons and submit links [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Multiple submit buttons in an HTML form
I have web form with multiple submit buttons. To determine which button was pressed, each has a different name, like so:
<input type="submit" name="foo" value="Foo Foo">
On the form there are also normal links that act as submit buttons, like so:
<a href="" onclick="parentNode.submit();return false;">
Bar
</a>
How do I also distinguish between the links being used as submit buttons?
I am not sure if this is relevant:
Here is the start of the form
<form action="foobar" method="post" enctype="multipart/form-data">
I am using Flask (a micro-framework based on Werkzeug) which uses Python (2.6 in this case).
My first question would be to ask if you need that many distinct ways to submit the same form? This sounds like your design should be changed up to make it more simplistic for the user, which will in turn solve your issue.
If you absolutely HAVE to have all the different submit buttons/links and need to know which one was pressed, use something like:
<input type="hidden" id="submitClicked" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='linkName';return true;" id="linkName">Submit</input>
NOTE: I didn't test this code, it was just off the top of my head, and thus some modification may be needed.
You can create a hidden input called submitSource, and set the value of that as you wish from the link or button onclick event handlers. Then you can check that value server-side.
Another solution you should consider: Use <ìnput type="submit"> for "submit links" just like the normal submit buttons and use CSS to style them to look like links.
This has the two huge advantages that it will (a) work with out any extra code that could potentiality break and will (b) work on every single browser on this world.
RedFilter's answer is certainly a solid way to go, but here's another option for you:
I normally use one name for all my submit buttons ("command" or similar), since of course only one of them is ever sent. Then my server-side code just looks at the value of that field to figure out what to do.
Your submit links could append a "command" parameter to the form's action, e.g.:
<a href="" onclick="parentNode.action += "?command=bar"; parentNode.submit(); return false;">
Even if you don't want to use just one name, the concept still holds, e.g.:
<a href="" onclick="parentNode.action += "?bar=bar+bar"; parentNode.submit(); return false;">
Of course, if you do either of the above and your form uses POST rather than GET (as most forms do), then whether you get the parameter value from the same source on the server will depend on what server-side mechanism you're using. For instance, Java's ServletRequest#getParameter method doesn't care, it looks in both the GET and POST data, whereas with some other technologies more of a distinction is drawn. Not a problem, you just have to be sure you're getting from the right place.
I would recommend instead of using onclick="parentNode.submit();return false;" that you create a js function that all links call to perform the submit. Then you could use a hidden field or get variable or whatever to transfer the link's id.
function submitMe(linkID)
{
document.getElementById("hfWhichButtonSubmittedMe").value = linkID;
document.getElementById(linkID).parentNode.submit();
return false;
}
...
blah blah

Categories

Resources