I have a select form that allows users to select multiple items. I am trying to avoid having a submit button so I wanted to figure out a way to have the form submit when the user clicks out of the form.
I used <select onchange="this.form.submit()"> but this submits the form whenever they click any option and I want it to work for selecting multiple items.
Is there any way I can have it submit the form when the form loses focus?
This will do the trick but you still have to do some action to lose focus, like click outside or tab out:
onfocusout="this.form.submit()";
You can use onblur event.
$("select").blur(function(){ /* do stuff */ });
http://jsfiddle.net/2mSUS/3/
Related
Hello I have form that has an option to enable/disable some fields. If user selects No as an option for particular section of the form all fields in that form will be disabled. However, I use this logic when saving form data:
frmObject.find(":submit").prop("disabled", true); // Disable submit button
then this code to enable submit button:
frmMessage.show().addClass(obj.CLASS).html("Error!").delay(7000).fadeOut('slow').queue(function(){
$(this).removeClass(obj.CLASS).dequeue();
frmObject.find(":submit").prop('disabled', false); // Enable submit button
});
Problem that I have after form is submitted and successfully saved code that enables submit button will affect other buttons in the form that should remain disabled. I'm not sure why since the other buttons have <button></button> tag and they do not have type=submit. Does anyone know how to prevent this behavior?
I'm not sure why since the other buttons have tag
and they do not have type=submit. Does anyone know how to prevent this
behavior?
The default type for <button> is submit. It's a good idea to always specify the type explicitly:
<button type="button">I'm NOT a Submit Button</button>
<button>I'm AM a Submit Button</button>
I have form name as myForm with two elements dropdown and autocomplete() textbox. If an end-user selects the value on the dropdown and give a suggestions on the autocomplete (tokens) and click an apply button to get the search results matching our inputs.
My Screen Input : HTML Screen
My problem here is to retain the form values after submitting the form through jquery. My code is here:
$("#myForm").submit(function(){
$('#myForm').attr("method","post");
$('#myForm').attr('action','http://localhost:8080/LscaSearch/');
$('#myForm').submit();
});
I wanted to retain the form values after submit the form. Any help on this?
You can use asynchronous form submission using jQuery AJAX. That way you can show the results on the same page without having to refresh it.
How do I select the submit button of the second form on a webpage?
Am I able to able to submit said form by using the .click() function on the selected submit element?
This is the script I am using in attempt to do so currently:
function Ellipsis_Mouse_Click()
{
$("form:eq(1):submit:eq(0)").trigger('click');
}
To select the second form:
$('form').eq(1);
// Or
$('form:eq(1)');
.eq() works from a zero-based index, hence using .eq(1) instead of .eq(2).
This isn't a particularly good way of selecting the form as it's vulnerable to any DOM changes (whether made manually or with more JS). Consider adding a class or ID to the form, or select it relative to a container that has a class or ID.
To submit the form:
$('form').eq(1).submit();
You don't need to find the submit button and trigger a click on that. Instead, you can just call .submit() on the form itself.
I need to submit just one input field value to a cgi script via a web form.
I've added a couple of extra form controls (a check box and radio buttons) which manipulate the input value depending on the states selected.
When the form is submitted, the extra form field values are submitted as well which breaks the cgi script (which I don't have access to). I removed the 'name' attribute from the check boxes so they are not submitted but cannot do this for the radio buttons as it breaks their grouping.
How can I prevent radio button values from being submitted?
You can add a disabled attribute to them in the submit handler, this will prevent them from being serialized, either by jQuery or a normal <form> submission. For example:
$("#myForm").submit(function() {
$(this).find(":radio, :checkbox").attr("disabled", true);
});
Or you can .serialize() only the elements you want, for example:
$.post("myPage.cgi", $("#myForm input[type=text]").serialize());
Make them "unsuccessful". There are several ways to achieve this:
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
It is also possible to have two different forms: one that has visible form elements and one that has a hidden input that represents the end result to be submitted. You can either attach onchange handlers to your visible form elements so that they call some JavaScript to update the invisible field, or you can run a function as part of the onsubmit handler to set the invisible value directly before it is submitted.
Here's a jsFiddle demonstrating the second approach (the onsubmit handler): http://jsfiddle.net/gtU4J/
I have an html form and within the form I have a <button> element. I am using jquery to redirect the page upon clicking the button (essentially I wanted to nest form elements but since its not valid xhtml I used a javascript workaround).
Furthermore, clicking the button grabs text from an input field, appends it to the query string then redirects the page (note that both the input field and the button are inside of the html form).
Now for what I want to do: I also want to have the same functionality when the user hits the 'enter' key from within the previously mentioned input field (i.e. same functionality as if the <button> was pressed. I have already written code that binds to the enter key (when I press enter in the input field I can get an alert to pop up). The problem is that since this input field is within <form> tags, I cannot seem to override the default action which is: upon pressing enter trigger the submit button. Is it even possible to override this and have the pressing enter event redirect the page to something other than whatever <form action is set to? Thanks.
Try
$('form').submit(function () {
return false;
});
This would really go against accessibility, but I think you could cancel the default action which is on the 'submit' event, with:
$('form#foo').submit(function(e) { e.preventDefault(); });
If I'm understanding correctly... or program that function to be dynamic and have it submit or not submit depending on a factor/flag.