I have two HTML forms, a fairly long one (user submitting details of a product they're ordering) inside of which there is a brief secondary form (where user can input + apply a discount code via AJAX). However, including the inner form -- which has proper opening and closing brackets -- seems to break the submit button for the outer form (Doesn't produce a javascript error, just does nothing when clicking on it).
Why might this happen and how can I fix it?
You don't need to wrap the inner "form" in a form tag, if that's what you're doing. The solution is just to bind the submit button for the discount code to a JavaScript function that runs your AJAX, i.e.
HTML
<input type="text" placeholder="Discount Code" name="discountCode">
Apply
Javascript
function applyDiscount() {
discountCode = $('input[name="discountCode"]').val();
$.ajax(...);
}
Related
I'm writing a small program that takes user input from form text fields and when the generate button is clicked, it displays the collected data unto another div.
Problem is once it collects the input (I know this because I used an alert test to know where the function breaks), it doesn't display. It stops exactly where the display commands start.
Any advice?
I'm not sure why you needed to put the output functions into the nested function, they should have worked directly.
But with the nested function, you need to call it. Put:
outputstuff();
after alert("working 8");
The generate button appears to submit the form on return from calling generate - the default type of a button is "submit" and it has the id "submitbutton".
If the page is reloaded from the server, the browser may fill in previously filled in input values but won't copy them into the SPAN elements.
I'm using ASP.Net (not my first choice) so all server-side controls are inside the master template's <form id='frmMain'> form.
In code that's inserted into that template, I have an <asp:UpdatePanel> and within that, a few <input type='reset' /> elements that need to only reset certain values, so I have those values in inner <form> tags.
When one of the inner forms submits, it checks its validity and then does its default GET and the outer form never has a chance to do its thing. In order to keep the validation, I thought to do:
function doSubmit(e) {
if (this.checkValidity()) {
e.preventDefault();
frmMain.submit();
}
// don't preventDefault here because validation is taking place with
// nice UI
}
$(function () {
$('form:not(#frmMain)').on('submit', doSubmit);
});
Unfortunately, triggering frmMain's submit doesn't work with UpdatePanels, and the whole page posts pack rather than doing the async jig.
So I removed the manual calling of submit() and hoped that clicking the button would cause two events, one for each form, but that is not the case. If I call preventDefault() the outer form never sees the event. If I don't call preventDefault() the inner form submits before the outer form can do anything.
Is there a way around this?
Yes, I could change the reset inputs to buttons and use javascript to reset just the values I need to, negating the need for the inner forms, but I'm a purist and want to see if it can be done the "way it was meant to" before Microsoft screwed it all up.
I'm trying to make it so that changing the selected option of a select tag will submit the form the same as a button would, I have:
function form_search()
{
document.forms['myform'].process.value = 'search';
document.forms['myform'].submit();
}
included from just before the /body tag in the html file including:
<select name="attribute" form="myform" onchange="form_search();">
<option value="op1">op1</option>
<option value="op2">op2</option>
</select>
<input type="hidden" name="process">
<button onclick="form_search();">button</button>
When I hit the button everything works as I would expect. However when I change the option associated with the select tag, according to firebug it seems to hit both the lines in the js function but the form doesn't seem to submit. Im thinking there is an error being triggered on the document.forms['myform'].submit(); line of the js function in this case.
Any ideas what is going on? Surely two calls to a function with no args should behave the same?
If document.forms['myform'].submit(); does error, then the most likely reason is that there is something inside the form named submit which is overwriting the submit method of the form in the DOM. There is no sign of this in the code you have shared with us though.
Given that:
Changing the select will run the JS. The first line will run. The second line will error and that is the end of it.
Clicking the button will run the JS. The first line will run. The second line will error. The normal behaviour of the button will continue and it will submit the form (using the standard HTML for form submission instead of the JS).
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/
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! ;) )