I have the super awesome jQuery validate and form plugins working all over my site without problems. Unfortunately, for one of my forms I have this weird problem where no form data gets submitted regardless of what I type into the form's textboxes.
To show you what I mean, when I console.log the field data before typing ("stored data") and upon submission ("live data") this is what I get (serialized using $.param):
stored data: full_name=&email_address=&password=
live data: full_name=&email_address=&password=
So nothing is being submitted on this form, whereas the "live data" for all other forms on my site which use the exact same JS codebase display whatever is inputed.
UPDATE Here's a JSFiddle for this form.
UPDATE 2 I'm realizing that this form's elements aren't being recognized by Javascript. So the background doesn't turn red if I do this.
$('#email_address').focus(
function(){
$(this).css({'background-color' : 'red'});
});
Wow this is totally confusing, thoughts?
You have
$(document.body).on('click', ".ajaxFormBtn"
and
<button data-loading-text="Saving..." class=" btn btn-green btn-large txt24"
value="Sign up" id="signupModalBtn" ><i class="icon-key icon-signin"></i>
Sign up</button>
Notice anything missing from the button's class attribute?
Related
I am confused about some behaviour on my webpage where I use both submit action and onclick event on the Save-button in a form. It works fine for me, but it seems that some users have trouble to save the information in the form.
I have simplified the form here:
<div class="container">
<form id="myform" action="action.php">
<input "nameinput" type="text" name="name">
<button id="savebutton" type="submit" >Save</button>
</form>
</div>
Now... I have also added an jQuery section that shall hide the form when the save button is pressed:
$(".container").on("click", "#savebutton", function(){
$("#myform").slideUp("slow", function() {
$(this).remove();
});
});
So: When the user presses the Save-button it shall both send the name to action.php and trigger the click-event to close the form.
This works perfectly fine for me, but I wonder if this design can cause troubles on some browsers, especially older ones? I have got bug reports from users where the form is closed, but no data is saved (i.e. action.php isn't called). Is it possible that the form "dissapears" before the form can submit the data?
Here the default behavior of the submit button is to send the data to action.php. Definitely, it is going to load the page again when users click the submit button in that case your javascript code will not run.
I will recommend you to use JQUERY AJAX Documentation
I want some input element be $setPristine when I submit the form. Because after I submit the form, I would empty the model bind to the input element, in case of user can totally input something new again. But once I empty the model, the input element would empty too, so the validate information would show, for required.
So I want $setPristine after submit the form. I figure out two ways:
One:
I use expression in the ng-submit, like:
<form ng-controller="FormController" name="userForm" ng-submit="userForm.$valid?submitForm(),userForm.keywordsInput.$setPristine(): ''">
But this syntax seems wring because angular report error information in the console.
Two
I could pass form to the submit function, then $setPristine in the submit function :
$scope.submit = function (form) {
form.keywordsInput.$setPristine()
}
But I also don't this is a good practice, because in the angular official reference site, it suggest:
Do not use controllers to:Manipulate DOM.
Is this way a kind of manipulating DOM?
So is there a better way to achieve this job？
I had the same issue logging undefined $setPristine(). But,in the view it works.
<button class="button button-stable button-block " type="submit" ng-click="register(registerData);formName.$setPristine();"> Submit </button>
When you submit the form, you must have set some function to run in the "ng-click" attribute
Add formName.$setPristine(); after it
I call the same function with those two types of button. With the first it works perfectly but with button it works well at the first but in less than one second it looks like refresh the page.
<input type="button" id="bProv" value="filtrar" onclick="filtroP()"/>
<button id="bProv" onclick="filtroP()">filtrar</button>
The type of a <button> element defaults to submit, so it will run the JS and then immediately submit the form.
Use <button type="button" ... if you don't want form submission.
That said, hard coding a button (which does nothing without JS) goes against the principles of unobtrusive JavaScript (which are part of best practise programming for the WWW).
I have a form that relies on javascript to do all the client side form validation. The form is submitted via javascript if all the fields are correctly filled in as opposed to using a standard "submit" button:
<button name="button" type=button onclick="validateReqFields('mForm', 'username, password, compPassword, firstName, lastName');">Register</button>
document[formName].submit();
If the client has javascript disabled, all of the form validation is done server side (its actually performed again regardless but that doesn't really matter). The problem lies with using a button with a type of button instead of submit. It works perfect with javascript, but how do I get around this when javascript is not available? If I use a submit button along with the javascript then it submits the form with each button press and doesn't work properly.
Use a submit button instead of the "button" button, and then have your validateReqFields function return false if the form is not valid.
Then take out the form submit from the validateReqFields if you like.
This way
If the form is valid, then the button click will bubble and the form will submit
If the form is invalid, then the javascript will cancel the button click
If javascript is disabled, then it will be submitted to the server as a fallback
Change the type attribute to submit.
<button name="button" type="submit" ... />
Use the <noscript></noscript> tags to define a "normal" submit-button when javascript is disabled.
You could maybe use the <noscript> tag and encapsulate the above code with the button type as submit. If the client has js, the code inside the noscript will be ignored.
I want to trigger the submit event of the form the current element is in. A method I know works sometimes is:
this.form.submit();
I'm wondering if there is a better solution, possibly using jQuery, as I'm not 100% sure method works in every browser.
Edit:
The situation I have is, as follows:
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select></label>
</p>
</form>
I want to be able to submit the form on change of the <select>.
What I'm looking for is a solution that works on any field within any form without knowing the id or name on the form. $('form:first') and $('form') won't work because the form could be the third on the page. Also, I am using jQuery on the site already, so using a bit of jQuery is not a big deal.
So, is there a way to have jQuery retrieve the form the input/select/textarea is in?
I think what you are looking for is something like this:
$(field).closest("form").submit();
For example, to handle the onchange event, you would have this:
$(select your fields here).change(function() {
$(this).closest("form").submit();
});
If, for some reason you aren't using jQuery 1.3 or above, you can call parents instead of closest.
this.form.submit();
This is probably your best bet. Especially if you are not already using jQuery in your project, there is no need to add it (or any other JS library) just for this purpose.
I have found that using jQuery the best solution is
$(this.form).submit()
Using this statement jquery plugins (e.g. jquery form plugin) works correctly and jquery DOM traversing overhead is minimized.
Similar to Matthew's answer, I just found that you can do the following:
$(this).closest('form').submit();
Wrong: The problem with using the parent functionality is that the field needs to be immediately within the form to work (not inside tds, labels, etc).
I stand corrected: parents (with an s) also works. Thxs Paolo for pointing that out.
You can always JQuery-ize your form.submit, but it may just call the same thing:
$("form").submit(); // probably able to affect multiple forms (good or bad)
// or you can address it by ID
$("#yourFormId").submit();
You can also attach functions to the submit event, but that is a different concept.
Your question in somewhat confusing in that that you don't explain what you mean by "current element".
If you have multiple forms on a page with all kinds of input elements and a button of type "submit", then hitting "enter" upon filling any of it's fields will trigger submission of that form. You don't need any Javascript there.
But if you have multiple "submit" buttons on a form and no other inputs (e.g. "edit row" and/or "delete row" buttons in table), then the line you posted could be the way to do it.
Another way (no Javascript needed) could be to give different values to all your buttons (that are of type "submit"). Like this:
<form action="...">
<input type="hidden" name="rowId" value="...">
<button type="submit" name="myaction" value="edit">Edit</button>
<button type="submit" name="myaction" value="delete">Delete</button>
</form>
When you click a button only the form containing the button will be submitted, and only the value of the button you hit will be sent (along other input values).
Then on the server you just read the value of the variable "myaction" and decide what to do.
In JQuery you can call
$("form:first").trigger("submit")
Don't know if that is much better. I think form.submit(); is pretty universal.
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select>
</label>
</p>
**<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
</form>
<!--
this.form.submit == this.form.elements['submit'];
-->