onclick not firing for submit input when attached using jquery - javascript

html:
<input id="save "type="submit" value="Create" class="btn btn-primary"/>
javascript that register onclick (IsValid is a function that validates before submiting, returns true of false)
$('#save').click(function () {
return IsValid();
});
Note that this exact same code works if I write:
<input id="save "type="submit" value="Create" class="btn btn-primary" onclick='javascript: IsValid();'/>
This is another option without modifying the markup (createForm is the form)
$('#createForm').submit(function () {
return IsValid();
});
Why $('').click is not registering my event handler?
Form looks like this:
<form method="post" id="createForm" class="well" action="/ScheduleWorkDay/Create" novalidate="novalidate">

It maybe that your id has a space or you have not used document.ready()
here is the working demo
<input id="save" type="submit" value="Create" class="btn btn-primary"/>
$(document).ready(function(){
$('#save').click(function () {
alert("invalid");
});
});
Demo

MrOBrian was right. The problem was that
<input id="save "
had an extra space in the id name. Thanks!

Your event handler isn't registering because there are no handlers on the form with the id save, but there is a save (with a space). Remove the space.
<input id="save" type="submit" value="Create" class="btn btn-primary"/>
$('#save').click(function () {
return IsValid();
});
should work without issues.
A jsFiddle showing it working

Related

Two Html buttons for two different functions

I have a form which has two Options, Submit and Overwrite.
It looks like this:
[ INPUT FIELD ]
[Submit] [Overwrite]
The Overwrite Button only appears when the value already is in the Database.
The HTML Code is:
<input type="text" name="target" id="target">
<button id="submit" name="submit" type="submit" class="btn btn-primary"> Submit </button>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary"> Overwrite </button>
The JS Code is:
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
If I only have the Submit button, it works.
If I only have the Overwrite button, it works.
But if I have both, the Overwrite button wont work anymore.
Does anyone have a solution to this problem?
put retrun false in the anonymous callback function will do the trick. since you declare that the button is a submit button
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
return false;
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
When you click the submit button the page will be refreshed and the overwrite will return to the initial format and the selected will disappear, Try to change the input type to button :
<button id="overwrite" name="overwrite" type="button" class="btn btn-primary"> Overwrite </button>
Hope this helps.
Remove <input type=""> for Overwrite button you may use <button>
Overwrite
<input type="text" name="target" id="target">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-primary" value="submit"/>
<input type="submit" id="btnOverwrite" name="btnOverwrite" class="btn btn-primary" value="Overwrite"/>
$(document).ready(function(){
$("#btnOverwrite").unbind("click").bind("click",function(e){
e.preventDefault();
alert("overwrite called");
});
$("#btnSubmit").unbind("click").bind("click",function(e){
e.preventDefault();
alert("submit called");
})
});
Review fiddle
https://jsfiddle.net/dipakchavda2912/rwdakvyg/

Jquery auto submit not working

I have a problem. I want when I click an h1 tag, then h1 tag id add in input value and Submitted automatically. But auto submits is not working.
If I click submit button then its submitted data.
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
Jquery:
$(document).on('click', 'h1', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
The problem is here:
$(document).on('click', 'path', function () {
what is path here?
you have to use either id, class, name of the attribute as a selector, but in your case there is nothing with path in html. So change path to:
$(document).on('click', '#my-id', function () {
and try again.
You can use a simpler approach as your button type is submit. Allot an id to it and on document click programmatically click on it.
<button type="submit" name="submit" class="btn" id="submitBTN">Submit</button>
THE JS:
$(document).click(function(){
$("#submitBTN").click();
});
Whatever be the event if you want to submit the form, you can always follow the above mentioned approach.
Just update #my-id instead of path:
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
In Your JQuery You mention You mention path but what is that
just simply change that into id of h1 tag So changes are as follows
$(document).on('click', '#my-id', function () {
Running Example
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>

Multiple submit buttons in angular2 form

I am building angular2 form and I would like to have multiple buttons to submit the form, e.g "Save" and "Save and close".
I have tried to use simple buttons with click action on them, but I didn't find anyway to manually mark form as submitted to force form validation.
<form #ticketForm="ngForm" novalidate>
<input type="text" id="customerName" required
name="customerName" [(ngModel)]="ticket.customerName"
#customerName="ngModel">
<div class="tj-form-input-errors"
*ngIf="customerName.errors && (customerName.dirty ||
customerName.touched || ticketForm.submitted)">
<small [hidden]="!customerName.errors.required">
Customer name is required
</small>
</div>
<button type="button" (click)="save(ticketForm)">Save</button>
<button type="button" (click)="saveAndClose(ticketForm)">Save and close</button>
</form>
Assign different id to each button. Then you can obtain the id of the button which triggered submit using document.activeElement.id. like the following :
In your Html :
<form #form="ngForm" (submit)="firstSave(form,$event)">
...
<div class="form-group">
<input type="submit" id="submit-1" value="Submit 1" class="btn btn-sm btn-primary"/>
<input type="submit" id="submit-2" value="Submit 2" class="btn btn-sm btn-success"/>
</div>
</form>
Then in your typescript :
firstSave(form: NgForm, $event: Event) {
var activeButton = document.activeElement.id; // document.activeElement?.id
if (activeButton == "submit-1") {
alert("you have clicked on submit 1");
}
if (activeButton == "submit-2") {
alert("you have clicked on submit 2");
}
}
StackBlitz Here.
You can subscribe to form changes, which I think will fire form validation.
I do something like this:
this.physicalForm.valueChanges
.map((value) => {
return value;
})
.filter((value) => this.physicalForm.valid)
.subscribe((value) => {
do what you need with the values here...
});
Then in your click handler for each button, if this.physicalForm.valid you save or save&update.
i ran into the same situation. In my case i have 2 submit 'Save','Save and Allocate'
Solution
You can simply set the the type of submit button in the payload and do the action accordingly in the backend code.
Sample code
//here formData is my payload for the API call eg: formData.name,formData.email
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='save'">Save</button>
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='allocate'">Save And Allocate</button>

Coffeescript bind submit form to show div on submit

I am trying to display a loading gif when a submit button is pressed, but my coffeescript doesn't seem to be working. How can I use Coffeescript to show a div when I submit a form?
Coffeescript:
$(document).ready ->
$('form#add_product_form').submit ->
console.log("test")
$("#circularG").show()
false
HTML form:
<form accept-charset="UTF-8" action="/products/new" data-remote="true" id="add_product_form" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
<p>
<label for="link_url">Url</label><br>
<input autofocus="autofocus" id="link_url" name="link[url]" type="text">
</p>
<p>
<input class="btn btn-primary" name="commit" type="submit" value="Add Product">
</p>
</form>
My Coffeescript is being compiled into js as so:
$(document).ready(function() {
return $('form#add_product_form').submit(function() {
console.log("test");
$("#circularG").show();
return false;
});
});
Make sure to add space before the 2nd line
$(document).ready ->
$('form#add_product_form').submit -> #HERE
console.log("test")
$("#circularG").show()
false
You have to attach "submit" event to a FORM element e.g.
$('#id_for_form').submit ->
$('.div').show()

Accessing HTML form elements with same name from javascript

I am using the following solution (How to best implement Save | Save and Close | Cancel form actions in ASP.NET MVC 3 RC) of multiple submit buttons to allow cancel and save from my MVC form:
<form action="Xxxx" method="post" onsubmit="return validatePost()">
...
<input type="submit" name="actionType" value="Save" />
<input type="submit" name="actionType" value="Cancel" />
</form>
With javascript called onsubmit:
function validatePost() {
if(Blah blah){
return true;
}
}
I only want to do this javascript validation if 'Save' is clicked, but cannot tell which button was clicked from the javascript.
I tried getting the actionType value using document.forms[0].elements["actionType"].value but could not, as there is more than one item named actionType on the form.
Can anyone help?
Thanks
You can use id (http://jsfiddle.net/7p5N5/)
<form method="post">
<input id="save" type="submit" name="actionType" value="Save" />
<input type="submit" name="actionType" value="Cancel" />
</form>
function validate() {
alert('Validate');
return false; // cancel click, true will submit
}
$("#save").click(function () {
return validate();
});
If you don't want to use id, you can use $('input[name="actionType"][value="Save"]') to select the Save button
Are you able to listen to the onclick event of only the 'Save' input and have it use your validatePost function.
Then you could have a different function for the onclick of 'Cancel' to do appropriate action.

Categories

Resources