I need to trigger a form submit event when any form value changes and all the fields in the form are filled. Everything in this works apart from the $('#date_filter_form').submit(); line. I can .hide() the form but can't submit() it for some reason. Documentation says submit() is the same as trigger('submit') so I can't figure out why it wouldn't be working.
$('#date_filter_form input[type="text"]').change(function() {
var from_val = $('#date_filter_form #from_date').val();
var to_val = $('#date_filter_form #to_date').val();
if(from_val != '' && to_val != '') {
$('#date_filter_form').submit();
}
});
HTML:
<form method="post" id="date_filter_form" name="date_filter_form" action="">
<label class="left required" for="from_date">From</label>
<input type="text" id="from_date" class="datepicker hasDatepicker" value="" name="from_date">
<label class="left required" for="to_date">to</label>
<input type="text" id="to_date" class="datepicker hasDatepicker" value="" name="to_date">
<input type="hidden" value="" name="from_date_db">
<input type="hidden" value="" name="to_date_db">
<input type="submit" id="submit" class="button" value="Show results" name="submit">
</form>
Your submit button is named 'submit', and it clashes with the form.submit method.
This happens because browsers provide shortcut accessors to form elements, properties that refer to the elements, are bound to the form element, using the name attribute as the property name.
An element named submit will replace the form.submit method, you should simply change name.
Also keep in mind that in IE you will have the same problems with the id attribute.
See also:
Form Access - The Most Common Mistake
The most common mistake made when defining the form HTML that a script will interact with follows from the existence of the shortcut accessors for form controls. It is to give the control a NAME (or possibly ID) that corresponds with an existing property of FORM elements. And the most common example of that is an INPUT element of type="submit" with the NAME "submit". Because the named controls are made available as named properties of the FORM element this INPUT element is made available under the property name "submit". Unfortunately FORM elements already have a property with the name "submit", it is the submit method that can be used to submit the form with a script.
yo your from is named
date_filter_form
but you are looking for a form named
date_filter
So your validation is not going to pass
Related
When I submit form by using below function it is submitting but values are not passed through this function. I use all functions but nothing found:
document.getElementById("postad").submit();
Form is given below.
<form action="register.php" id="postad" method="post">
<input class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
<input class="button" type="button" name="save" value="Publish" onclick="send();" />
</form>
Your form contains two form controls. Neither will be a successful control (i.e. one that appears in the submitted data), but for different reasons.
Only form controls with name attributes can be successful. Your text input doesn't have a name. (It also doesn't have a default value, so you need to type in it first).
Buttons can only be successful if they are the submit button used to submit the form. Your button isn't a submit button and you use JavaScript to submit the form.
There is no name attribute in your input text fields
<input name="post_title" class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
.........^
I have html form which contains one hidden input element that have name="submit":
<form method="post" action="url.php">
<input type="text" name="sometext" />
<input type="hidden" name="submit" value="go" />
</form>
I am using this code to submit form:
$("#link").click(function() {
$("form").get(0).submit();
});
When I change input name to any other name except name="submit" the form is submitted:
<form method="post" action="url.php">
<input type="text" name="sometext" />
<input type="hidden" name="othername" value="go" />
</form>
<button id="link">Click</button>
<script>
$("#link").click(function() {
$("form").get(0).submit();
});
</script>
The question is Why form is not submitted when hidden input has name="submit"?
According to MDN:
Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named action will have its action property return that input instead of the form's action HTML attribute).
Because of that, when you name your button as submit, you overwrite the native submit function of your form with the button's DOM object. With that your call to form.submit() ends up to be equivalent to form.elements.submit.submit(), which fails as form.elements.submit.submit is actually undefined.
You cannot the name the element submit. It is a butoon type inside form. It send all elements of the form to action as you may know. I'd suggest to call your PHP function using that if possible. The submit() function is checking for that "submit" button primarily causing issues. If you name something else as "submit", it will be checked for input data.
I have a html form with a hidden field and 2 submit buttons. Based on what button in clicked ( trial or buy) I need to set the promo code field ( with "trial" as promo code for trial button and "buy "as promo code for buy button.
I am not sure how I could read what button is clicked in java script. I have a java script already in place that is copying email ID into another field on hitting submit. I'd like integrate the java script with existing one.
HTML code:
<form>Email:
<input type="text" name="email">
<br>
</label><input type ="hidden" name="retype-email">
<br>
<input type="hidden" name="PromoCode" value="" method="post">
<input class="Orange_button" type="submit" value="Start my free trial">
<input class="green_button" type="submit" value="Buy it now">
</form>
JS Fiddle: http://jsfiddle.net/x1bdgvyt/3/
It looks like the best solution is to manually track which button was clicked by subscribing to their "click" events.
Working Example here (jsFiddle)
HTML
<form>Email:
<input type="text" name="email">
<br>
</label><input type ="hidden" name="retype-email">
<br>
<input id="promo-code" type="hidden" name="PromoCode" value="" method="post">
<input class="Orange_button" type="submit" value="Start my free trial" data-code="trial"/>
<input class="green_button" type="submit" value="Buy it now" data-code="buy"/>
</form>
JavaScript
$('form').on('submit', function(e){
$('[name="retype-email"]').val($('[name="email"]').val());
var value = $("input[type=submit][clicked=true]").data("code");
$("#promo-code").val(value);
alert(value);
e.preventDefault()
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
Note that I added a data attribute to the submit buttons so that we can store the code that should be added.
source: jQuery: how to get which button was clicked upon form submission?
First, add 'data-type' (or whatever the name, most important is the prefix data-) to your inputs:
HTML
<input data-type="trial" class="Orange_button" type="submit" value="Start my free trial">
<input data-type="buy" class="green_button" type="submit" value="Buy it now">
Then, change a bit your javascript in order to grab the data-type value and populate your field with it:
Javascript
$('[type="submit"]').on('click', function(e) {
// populate your duplicated 'email' field
$('[name="retype-email"]').val($('[name="email"]').val());
// populate your 'code' field : grab the data-type attribute added in your HTML
$('[name="PromoCode"]').val($(this).data('type'));
// finally, submit the form
$('form').submit();
});
Quick warning: you should consider using IDs or classes instead of working with wide selectors like [attr], it could be an issue if you have more than one form in your page (and it's a better practice anyway)
Here is my solution:
$('#usuario_form').submit(function(e){
console.log($('#'+e.originalEvent.submitter.id));
e.preventDefault();
});
You can have access to OriginalEvent Submitter Id to identify wich button was clicked
I have two forms in a JSP page, one contains a text field. I need to make sure that whenever the other form is submitted, it copies the value contained in that text field, and writes it's text value in an hidden parameter.
More clearly:
One form is named "search";
Another form is named "changeInitialForm";
The text field is contained in the "search" form, and it's name is "searchString";
The "changeInitialForm" has an hidden field, also this named "searchString";
The purpose is to make sure that whether the user submits one or another form, a "searchString" parameter is passed, with the value of the text field.
I tried to include an action in javascript, executed when the "changeInitialForm" is submitted, that reads the text field value and writes it into the hidden parameter:
function searchContacts(form)
{
var searchString= document.search.searchString.value;
form.searchString.value= searchString;
}
...
<form name="search" >
<input type="text" name="searchString">
<button name="search"> Cerca </button>
</form>
...
<form name="changeInitialForm" method="post" action="AddressBookView.jsp" onSubmit="searchContacts(this.form);">
<input type="hidden" name="selectedInitial"/>
<input type="hidden" name="status" value="view"/>
<input type="hidden" name="searchString" />
</form>
But after the "changeInitialForm" is submitted, regardless of the text field value, and empty parameter is passed, I am seeing this with firebug:
I would also appreciate an alternative solution, because I know what I am doing is tricky, but I don't find another method to do that. "search" and "changeInitialForm" cannot be joined in a single form, because they do very different things.
The following seems to work
function searchContacts(form)
{
var searchString= document.search.searchString.value;
form.searchString.value= searchString;
}
...
Form 1:
<form name="search" >
<input type="text" name="searchString">
<button name="search"> Cerca </button>
</form>
...
Form 2:
<form name="changeInitialForm" method="post" action="AddressBookView.jsp" onSubmit="searchContacts(this);">
<input type="hidden" name="selectedInitial"/>
<input type="hidden" name="status" value="view"/>
<input type="hidden" name="searchString" />
</form>
Notice that searchContacts(this.form) was replaced with searchContacts(this).
UPDATE after some precisions by the author of the question:
The onsubmit event is not triggered when form.submit() is called by some javascript code. Thus, what you need when you submit the form is to call searchContacts separately, for example using
searchContacts(document.changeInitialForm);
document.changeInitialForm.submit();
I have this simple form:
HTML
<form>
<label for="eName">Name</label>
<input id="eName" type="text" name="eName">
<label for="Email">Email</label>
<input id="Email" type="text" name="Email">
<button id="create" class="boton"
onclick="doSomething();" type="submit">Create!</button>
</form>
JS
function doSomething() {
var name, email;
name = document.getElementById("eName").value;
email = document.getElementById("Email").value;
putElementsIntoTheDOM(name, email);
}
When the user inputs some information I want to populate the DOM with the user input.
The example above works. But I think it can be done better. I just don't know how.
How can I wire the <button> so that when the user clicks it the form values are passed
to the function doSomething()?
Also, since I'm not sending the form values anywhere except populating the DOM, how can I
prevent the submission?
I've seen something like this but I can't get it too work.
<button id="create" class="boton" onclick="doSomething(this.form);"
type="submit">Create!</button>
If you don't want to send the form values anywhere, then you just need to remove type="submit" from your button.
Your example code works fine. I'm not sure what you mean by a 'better' way. More modern/idiomatic javascript would not be using the onclick attribute, but instead binding doSomething to the button. Using jQuery, that would look like:
$("#create").click(doSomething);
First of all you have to update your function declaration to be able to receive the variables you want to send
function doSomething(name,email) {
}
Secondly, if you have to send values of some fields to that function, you can do so on button click like this.
<button id="create" class="boton" onclick="doSomething(document.getElementById('eName').value,document.getElementById('Email').value);" type="submit">Create!</button>
However, using unobtrusive javascript is recommended, and for that jQuery is one of the options you can use for passing variables to your function neatly.
There is a difference between the type="submit" and type="button" that I didn't realize.
Also, the button and submit types react differently with onclick and onsubmit events.
For example
<form onclick="doSomething()">
<label for="eName">Name</label>
<input id="eName" type="text" name="eName">
<label for="Email">Email</label>
<input id="Email" type="text" name="Email">
<button id="create" class="boton" type="button">Create!</button>
</form>
Notice that at the top of the form there is onclick.
The onclick is fired whenever you focus on an input element, and of course if you click the button.
Changing the form to <form onsubmit="doSomething(); but not changing the type="button" doesn't do anything. Clicking the button doesn't trigger the function.
By changing the type="submit"and keeping the head <form onsubmit="doSomething(); triggers the function when the button is clicked. A nice added functionality to this is that if you have any <input ... required="required"> the submit will only work if those fields are filled in (and your form will let you know about the required fields).
To prevent the submission/refreshing (since I'm only populating the DOM with user input) adding return false at the form head prevents submission
<form onsubmit="doSomething(); return false">.
Finally, to get the form values adding this:
<form onsubmit="doSomething(this); return false> and then
function doSommething(formInfo) {
var name = formInfo.eName.value;
var email = formInfo.Email.value;
...
}