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).
Related
Summary: I am trying to force a change event to fire on an HTML element, without actually changing it, but the event does not seem to fire.
My scenario: There is a page (created by someone else) that is designed to hide certain fields until a value from a certain dropdown is selected, at which time the dependent fields will appear. But in some scenarios, the dropdown should be autopopulated and fields should appear by default. So I am trying to trick the page into showing the dependent fields when it is first loaded. I do something like this:
form.field('THEDROPDOWNFIELD').$el.trigger('change');
But nothing happens. I found that
form.field(‘THEDROPDOWNFIELD’).setValue(form.field('THEDROPDOWNFIELD').$el[0][1].value); //dummy value, first value in the list
form.field('THEDROPDOWNFIELD').$el.trigger('change');
will fire the change event. For whatever reason, $el.trigger('change') does not trigger the change unless the DOM element's value truly has changed. The problem is I don't want the dummy value in that dropdown to be there.
Summary (again): Is there a way to force the dropdown's element change event to fire when the selected value in the dropdown has not actually changed?
This snippet works ok (uses JQuery):
$('#toChange').bind('change', function() {
$('#result').text('select changed');
})
$('#triggerChange').bind('click', function() {
$('#toChange').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="toChange">
<option>---</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
</form>
<br>
<button id="triggerChange">Click to trigger change</button>
<div id="result"></div>
Your code doesn't seem to be failing, so it must be something related to the DOM or the way the other guy has implemented this effect. It is hard to guess what your problem might be. So my suggestion is as follows:
Check if its really implemented to trigger on radiobutton change and not on a click event handler on a div/other element that's not directly related to the radio button.
Check if your HTML code is failing.
Provide more code snippets that you think might be related.
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(...);
}
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 have the following HTML containing a drop down list (single selection)
<script type="text/javascript">
$(document).ready(function () {
$("#garden").bind('change', function() {
alert("Changed");
});
});
</script>
<body>
<div id="content">
<select id="garden">
<option value="flowers">Flowers</option>
<option value="shrubs">Shrubs</option>
<option value="trees">Trees</option>
<option value="bushes">Bushes</option>
</select>
</div>
</body>
</html>
When the HTML page is rendered, Flowers is the already selected element in the drop-down by default (being the first one). If I select any other value (other than "Flowers"), the Javascript function is fired and a alert box containing "Changed" is shown.
Q1: But, in case I re-select Flowers again, the onchange event is not triggered. I understand it is because nothing was 'changed' in the drop-down list. Is there a way a function is triggered even when no change to the already selected value in drop-down is done?
Q2: How to extract the value of the element which has just been selected (even if nothing new was selected - that is, user clicked on the drop down, and simply clicked somewhere else).
I have already tried the onblur but that requires that the user clicks somewhere else on the document so that the drop-down loses focus. Any help would be really appreciated.
[I have edited out the HTML headers and other script inclusions in the code snippet provided for brevity.]
Well I think I don't get you 100%, but some things I can suggest here are:
bind a click event handler to the select
$("#garden").bind('click', function() {
alert($(this).find('option:selected').text());
});
bind a focusout event handler
$("#garden").bind('focusout', function() {
alert($(this).find('option:selected').text());
});
and of course bind the change event handler which you already got. The click event handler might be a little bit tricky since it would fire every time you click on the element. But if you don't alert() it every time it should not be a problem at all, you got the current selection and can do with it whatever you want.
You can manually trigger the event when you load the page:
$(document).ready(function() {
$("#garden").bind("change", function() {
// ...
}).change();
});
This will pick up the initial value - so I think it makes your second question irrelevant. This won't work in all situations (I'm hoping that your actual handler isn't an alert but actually something useful!), but could come in handy...
Are you sure that whatever you are doing is the most sensible way to do things? It seems like very strange UI to have different behaviour if you select an item by leaving it as the default compared to selecting it by opening up the select and selecting the currently selected item.
If you are wanting to make them explicitly choose flowers then maybe you want a dummy entry at the top that says "Please choose one" that will then mean they are forced to actually change to flowers if that is what they want. It would probably be simpler than complicating your code with more event handlers and such like.
If you do really need to go down the path you are following then you may want to consider what the behaviour is if somebody just tabs to the control and then past it. ie should that fire your script off as well?
Edit to respond to comment at length:
What you will want to do in this case is hook into the onSubmit handler of the form. This is called, as you can imagine, when the form submits. If your handler returns false that form will not be submitted.
This handler is traditionally where you would do client side validation by examining the state of whatever form elements you care about and checking their values are valid. In this case you'd check if the value of garden was "N/A" or whatever you set it to and if so pop up an alert (in the simplest case) and possibly mark whichever fields need attention. Then the user will choose a valid entry (hopefully) and next time he submits your validation will succeed, you return true in the handler and the user can be happy he submitted valid input.
As always though the standard disclaimer that any data can be sent to your server by a determined user so you should not assume that just becasue you had this validation that you are getting valid data on the server. :)
Question 1: I think the event for that would be "onSelect".
Question 2: I think the "onSelect" event would work for that as well, not 100% sure. Something to try at least and mess with.
To my opinion, the easiest solution is to duplicate the first option into a disabled and hidden element having the same label. Your dropdown list will display the label of the hidden option, but thus won't be displayed in the list.
<select id="garden" name="blabla" onchange="this.form.submit();" >
<option value="" disabled selected style="display:none;">Flowers</option>
<option value="flowers" >Flowers</option>
<option value="shrubs" >Schrubs</option>
<option value="trees" >Trees</option>
<option value="bushes" >Bushes</option>
</select>
Your question seems same as HTML SELECT - Trigger JavaScript ONCHANGE event even when the option is not changed
and the solution mentionned above was provided by Simon Aronsson.
Nota bene : the solution works perfectly with Firefox, but not with Internet Explorer.
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! ;) )