I want to attach a function to my submit button. But my code doesn't seem to be calling the function.
Basically what I want it to do is, enabling all disabled field when the form is being submitted.
This below is my code:
<script>
function enableField() {
$("#Booking_clientPackagedService_id").prop("disabled", false);
}
</script>
<?php
echo CHtml::submitButton(Yii::t('app', 'Save'));
$this->endWidget();
?>
This #Booking_clientPackagedService_id initially is disabled after certain action being done. But when I click on submit, I would like to enable the field. How can I do it? Please advise, thanks! :D
EDIT
So I've removed onclick event on my submit button and added as per Kancho Iliev's comment.
$( "#booking-form" ).submit(function() {
$("#Booking_clientPackagedService_id").prop("disabled", false);
});
But it is still not working. Where have I missed out?
Remove onclick event, and add
$("your_form_name").submit(function(){
enableField();
});
This is the correct way of attaching a submit function:
$(function() {
$("#formName").submit(function() {
alert("hi");
//do whatever
});
});
Related
I have the following form on a page:
<form action="/" method="post">
<select id="SelectedMonth" name="SelectedMonth">
<option>7/1/2017</option>
<option>6/1/2017</option>
</select>
</form>
I am trying to use the following jquery snippet to submit the form. The jquery code resides outside of the form and the form is the only form on the page.
$("#SelectedMonth").change(function () {
alert(this.value);
$('form').submit(function (event) {
alert("Submitted");
event.preventDefault();
});
});
The first alert is triggered and shows the selected value but the submit is never triggered.
It seems like this is pretty straight forward but it is not working. What am I missing?
TIA
change action and make it blank
and change function like this
$("#SelectedMonth").change(function () {
$('form').submit();
});
and it will work
That's because, while you can change the selected element in the drop down (thus causing the first alert() to fire), you have no mechanism for submitting the form, so the second one doesn't.
You need to add a submit button so that the submit event of the form can be triggered.
Also, the way you have the code, the submit event handler won't actually fire unless you change your selection in the drop down first. You probably don't want that behavior. The two event handlers should be set up independent of each other.
$("#SelectedMonth").change(function () {
alert(this.value);
});
$('form').submit(function (event) {
alert("Submitted");
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post">
<select id="SelectedMonth" name="SelectedMonth">
<option>7/1/2017</option>
<option>6/1/2017</option>
</select>
<button type="submit">Submit</button>
</form>
you are putting the submit event inside change event try and also add a submit button to submit the event
$("#SelectedMonth").change(function () {
alert(this.value);
});
$('form').submit(function (event) {
event.preventDefault();
alert("Submitted");
});
if you want to submit on date chaneg then try this
$("#SelectedMonth").change(function () {
$('form').trigger('submit');
});
$('form').submit(function (event) {
event.preventDefault();
alert("Submitted");
});
The answer to the question "why it does not work" is that .submit(function(){}) not actually submits form but add submit handler - function that will be executed when form will be submitted
This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third.
Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
So if you pass function to it, it will BIND handler. When you will trigger it without params, it will actually submits form.
You dont need button to submit form.
So actually code must be something like this
$('form').submit(function (event) {
alert("Submitted");
event.preventDefault();
});
$("#SelectedMonth").change(function () {
$('form').submit();
});
Demo - jsfiddle.net/75CqW/
When someone clicks the Submit button, it shows the loading div even if the input is empty.
I don't want the user to see the #loading if he didn't write anything in the input, I've tried to add "required" in the input but the #loading is still showing when the input is empty. What do you think is wrong with my loading div?
Thanks in advance.
Instead of click handler use submit handler for the form - the form validation are triggered on form submit not on submit button click
$(function () {
$("#myform").submit(function () {
$("#controller").hide();
$("#loading").show();
});
});
Demo: Fiddle
Note: You might want to prevent the default action of submit event so that the default form submit is prevented - if you are using ajax to do server side processing
try this
var id = $("#statusid").val();
if (id.length == 0)
{
return false;
}
You need to test for a value (or run a validation check) on the field(s) before firing off the processing code
$(function() {
$(".submit").click(function() {
if $('#statusid').val() {
$("#controller").hide();
$( "#loading" ).show();
}
});
});
I have a form that ends with
input type='submit'
That is used to submit the form and also trigger validation script.
Now I don't like this submit button. I want submit to be just an tag but with submit function to trigger validation normally.
Is there any way out of this problem ?
it's just like this:
Submit
or better:
Submit
<script type="text/javascript">
$(function(){
$('.submit').click(function(){
$(this).closest('form').submit();
});
});
</script>
note that this solutions requiore jQuery and will only work if javascript is enabled while the traditional submit-button works everytime.
I think something like this should work:
$('.anchor').click(function() {
$('#form').submit();
});
http://jsfiddle.net/wmuYq/
I want to eliminate an awkwardness: the user has to click the submit button twice to submit the text.
What should I do to make it work with one click?
You can set a timeout: http://jsfiddle.net/wmuYq/1/
document.getElementById("text1").onblur = function () {
var target = this;
setTimeout( function () {
target.style.height='36px';
}, 250);
}
You could use the onmousedown event on the submit button to submit the form:
document.getElementById("submitButton").onmousedown = function() {
this.form.submit();
}
For the above example to work, you would need to give the button an ID. Also, you would need to change the name of the submit button from "submit" to something else, because otherwise it overwrites the submit property of the form element.
This works because the mousedown event will be triggered on the button before the blur event is triggered by the textarea.
Here's a working example.
Well for one thing you have no form, so I am not sure how it submits at all.
Wrap your code in a form and add an action and it should work fine :-)
This might work. Untested
Remove the onblur event from the textarea and place it as on onclick on the input
onclick="document.getElementById('text1').style.height='36px'"
Revised fiddle: http://jsfiddle.net/jasongennaro/wmuYq/2/
**Update: I have pasted working code in order to erase any ambiguity about what is going on. I have also tried to remove the preventDefault on both handlers, does not help*
I have a form where upon the button click, a JS event needs to happen, and the form needs to submit.
As per the code below, what I thought would happen is: alert(button), then alert(form), or vice versa. I do not care about sequence.
If i run it however, the alert(button) will show up, but the alert(form) will not.
If i comment out the code for the button, the form alert comes up.
Do i have some fundamental misunderstanding of how this is supposed to work?
jQuery(document).ready(function(){
$("form.example").submit(function(event){
event.preventDefault();
alert("form submitted");
});
$("form.example button").click(function(event){
event.preventDefault();
alert("button clicked");
});
)};
<form class="example" action="/v4test">
<button type="submit">Meow!</button>
</form>
After edit of OP
You do not need to preventDefault of the click.... only the submit... here is you working code:
jsFiddle example
jQuery(document).ready(function(){
$('form.example').submit(function(event){
event.preventDefault();
alert("form submitted");
// stop submission so we don't leave this page
});
$('form.example button').click(function() {
alert("button clicked");
});
});
old answer
You can simply put your .click() and .submit() handlers in series, and they should not cancel out. You have some syntax errors in your pseudo code.... maybe those are causing problems?
Another potential problem is that $("form button") targets the HTML <button> tags. If you use <input type="button" /> you should use $("form:button") and note that <input type="submit" /> is not a button. Anyway, I'll assume you are in fact using the <button> tags.
Usually return false is used inside .submit(function() { ... });. This stops the form from being submited through HTML. s**[topPropagation][6]** is very different. It deals with stopping events "bubbling up" to the parents of elements....... But I don't see how this would effect your case.
If you are doing a true HTML submission, make sure to put your .click() handler first, since a true HTML submission will cause you to leave the page.
If you use return false inside .submit(), the form will not be submitted through the HTML, and you'll have to handle the submission with jQuery / Javascript / AJAX.
Anyway, here is a demonstration of both the .click() and .submit() events firing in series... the code is below:
jsFiddle Example
$(function() {
$('form button').click(function() {
// Do click button stuff here.
});
$('form').submit(function(){
// Do for submission stuff here
// ...
// stop submission so we don't leave this page
// Leave this line out, if you do want to leave
// the page and submit the form, but then the results of your
// click event will probably be hard for the user to see.
return false;
});
});
The above will trigger both handlers with the following HTML:
<button type="submit">Submit</button>
As a note, I suppose you were using pseudo code, but even then, it's much easier to read, and one is sure you're not writing syntax errors, if you use:
$('form').submit(function() { /*submits form*/ });
$('form button').click(function() { /*does some action*/ });
If you put a return false on the click, it should cancel the default behavior. If you want to execute one then the other, call $('form').submit() within the click function. e.g.
$('form').submit { //submits form}
$('form button').click {
// does some action
$('form').submit();
}
There seems to be a bit of confusion about propagation here. Event propagation (which can be disabled by stopPropagation) means that events "bubble up" to parent elements; in this case, the click event would register on the form, because it is a parent of the submit button. But of course the submit handler on the form will not catch the click event.
What you are interested in is the default action, which in the case of clicking a submit button is to submit the form. The default action can be prevented by either calling preventDefault or returning false. You are probably doing the latter.
Note that in Javascript functions which do not end with an explicit return do still return a value, which is the result of the last command in the function. You should end your click handler with return; or return true;. I have no idea where I got that from. Javascript functions actually return undefined when there is no explicit return statement.
Does clicking the button submit the form? If so:
// Disable the submit action
$("form").submit(function(){
return false;
});
$("form button").click(function(){
// Do some action here
$("form").unbind("submit").submit();
});
If you don't unbind the submit event when you click the button, the submit will just do nothing.