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.
Related
I am looking for a way with my form I am currently showing and hiding fields based on the values selected in the dropdowns, What I want to know is.
when i select yes and the field below displays I click submit on the form, if I return to the form the value is still present but the field is hidden again...
How can I prevent that from happening by default?
I want my browser to remember the jQuery change funtions state I left it at after I submit the form.
What you want to do is 'refresh fields visibility' in some cases. I suggest you to create such function refreshFieldsVisibility. Such function reads values from the dropdown and shows/hide the proper field. Then call your function:
When elements state is changed, with on('change') events.
When document is ready (this is your case as I understand), with $(document).ready
Any other situation if necessary
I've got a form where I'm trying to do the sort of thing you often see with tags: there's a textfield for the first tag, and, if you put something into it, a new and similar textfield appears to receive another tag. And so on. I've gotten the basics of this working by setting up a jQuery .blur() handler for the textfield: after the value is entered and the user leaves the field, the handler runs and inserts the new field into the form. The handler is pretty vanilla, something like:
$('input.the_field_class').blur(function () { ... });
where .the_field_class identifies the input field(s) that collect the values.
My problem is that, while the new textfield is happily added to the form after the user enters the first value, the blur handler doesn't fire when the user enters something into the newly-added field and then leaves it. The first field continues to work properly, but the second one never works. FWIW, I've watched for and avoided any id and name clashes between the initial and added fields. I had thought that jQuery would pick up the added textfield, which has the same class markings as the first one, and handle it like the original one, but maybe I'm wrong -- do I need to poke the page or some part of it with some sort of jQuery initialization thing? Thanks!
Without seeing your code in more of its context, it's hard to know for sure, but my best guess is that you're attaching a handler to the first field, but there is no code that gets called to attach it to the new field. If that's the case, you have a few options, two of which are:
1) In your blur() handler, include code to attach the blur handler to the newly created field.
2) Use jQuery's event delegation to attach a handler to the field container, and listen for blur events on any field in the container:
<div class="tag-container">
<input class="the_field_class" /> <!-- initial tag field -->
</div>
<script>
var $tagContainer = $('.tag-container');
var createNewField = function() {
$tagContainer.append($('<input class="the_field_class" />');
};
$tagContainer.on('blur', 'input.the_field_class', createNewField());
</script>
Which is better will depend on your use case, but I'd guess that the 2nd option will be better for you, since you're unlikely to be dealing with tons of blur events coming from the container.
I need build a form in three steps inside a carousel. I'm using the bootstrap to create the site but I dont know how to validate one step of my form without submit the data and after show the second step (or second slide) to the user continue filling the form up to the third step (or third slide) when he can submit the data. Someone have an idea?
You might just want to validate the fields of the form locally.
You can just bind the onsubmit event listener to the form element, which will be trigger when user submit the data. As you want to validate the form step-by-step, you just need to validate the current step's fields in each step, that you should use event.preventDefault() to stop submitting the data in step one and step two. The code may like:
ndForm.addEventListener('submit', function(e) {
if (!checkSteps()) {
e.preventDefault();
}
});
Or you can validate the field immediately after the user modify it; e.g. attach the onblue event listener to the text field to handle user's input.
I prefer the first way since the code is much clearer and more maintainable.
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(...);
}
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')