We Keep Coding

Changing type on element is not possible twice?

I'm relying on another plugins javascript that has code for a specific submit event that submits the form after some validation.
I'm not able to change that validation without hacking into that code.
Therefore I've came up with a hack without hacking into that plugin's code.
I'm changing the input type from submit to button type so I can do my own validation without having to take in account for action that is triggered upon submit.
There are two radiobuttons with class .give-gateway. Basically I'm doing this.
HTML (element in form):
<input type="submit" class="give-submit give-btn" id="give-purchase-button"
name="give-purchase" value="Donate Now" data-before-validation-label="Donate
Now">
jQuery:
$('body').on('click', '.give-gateway', check_gateway);
function check_gateway(id) {
//Value from which radiobutton is selected
if (current_gateway == 'swish') {
alert('changing button from ORIGINAL to new. NOW IT SHOULD BE
TYPE BUTTON!!!');
$('#give-purchase-button').prop('id', 'give-purchase-button-
new').prop('type','button');
$('body').on('click touchend', '#give-purchase-button-new', function
(e) {
alert('NEW give purchase button clicked');
//some code...
});
}
else {
alert('changing button from NEW to original. NOW IT SHOULD BE TYPE
SUBMIT!!!');
$('#give-purchase-button-new').attr('id', 'give-purchase-
button').prop('type','submit');
}
}
This works the first time:
From Submit to button
From Button to Submit
From Submit to Button
Step 3 (NOT WORKING (first click on swish gateway work but second time it does not change from submit to button)!? **Why?) **
I've also tried to programmatically add onsubmit to form but the issue there is that other plugins jquery code has a listener for click event on the actual submit - button which means that that code are executed first anyway. I don't want that to happen.
I've figured it out why now. When I click on another gateway the form is loaded with other content. When I go from swish to paypal. It loads content that is dependent of paypal stuff and creates a new submit - button. If I just change from type submit to button it does not affect anything because that change is made before the actual content is loaded (through ajax) and therefore creates a new submit button.

Add Enter as Hot Key for Multiple Forms in a single Application

I have an application that already in use.
I need to add few hotkeys to it like Enter should trigger some already existing Button.Click events.
It has multiple forms.
1st form has
<button name="Search" type="button" class="abc" disabled>Search</button>
2nd on has
<button type="button" class="xyz" id="show" ">Show</button>
3rd ....
The button click events are in a .js file
$('body').on('click', '#search-form button[name=Search]', function () {
//implementaion
});
$('body').on('click', '#Show-Change', function () {
//implementaion
});
Now when I am using the Search form , its has multiple drop-downs to be selected.
When I press enter the Search.Click should be triggered (should behave same as when I click on the SEARCH button), when I am using the 2nd form the show, the click event should trigger.
The first form is like a menu form on the left side of the form. The second one is a popup form. I am new to .js and need help. I need to implement these on couple of similar forms in the application.
$(document).keypress(function (e) {
if (e.which == 13) {
$('#search-form button[name=Search]').click();
}
});
But this works only for the search.click button, and is triggered whenever Enter is pressed, irrespective of the form I am on.
Not sure how to make it generic enough to handle this on every form that needs enter as a Hotkey.

Disabling a submit button when clicking on it , will prevent the form from being submitted on Google Chrome [duplicate]

This question already has answers here:
Disable submit button on form submit
(15 answers)
Closed 2 years ago.
I have added the following script to my layout view, inside my asp.net mvc :-
$(document).ready(function () {
$('.btn.btn-primary').click(function () {
$(this).prop("disabled", true);
if (!$('form').valid()) {
$(this).prop("disabled", false);
return false;
}
});
$('form').change(function () {
$('.btn.btn-primary').prop("disabled", false);
});
The aim of my script is to disable the submit buttons , and re-enable them if the model is not valid or if the user change a form value. The above script will work well on IE & Firefox, but on Chrome I am unable to submit the form , as when the user clicks on the submit button , the button will be disable but the form will not be submitted. Any idea how I can solve this issue on Chrome?

Instead disabling button in button's click event - disable it in form's submit event (you can check form for validity there as well).
This way it will work universally in all browsers.
<form action="http://www.microsoft.com">
<input class="btn-primary" type="submit" value="submit"/>
</form>
$('form').submit(function() {
$('input.btn-primary').prop("disabled", "disabled");
})

I just had the same issue that the Google Chrome was not fireing my submit event when the button got disabled via jQuery.
Background info: I have a form with a button that shall be disabled whenever clicked. So the PHP submit code is not called multiple times. That submit is running on a Drupal Backend, in my case as a custom submit_hook. But for sure working in any other CMS.
But that's not the issue. The real issue is that the Javascript code is disabling the button and Google Chrome thinks that the button is totally dead and not just disabled. So it does not fire any code anymore.
But that issue is pretty easy to fix.
So this code is working on Firefox/IE:
(function($) {
Drupal.behaviors.somebehaviour = {
attach: function(context, settings) {
$('#edit-submit').click(function (e) {
$('#edit-submit').val('Is saved...');
$('#edit-submit').prop('disabled', 'disabled');
});
}
};
})(jQuery);
and getting it running on Chrome as well, you need to add the line:
$(this).parents('form').submit();
so for this example it would finally be:
(function($) {
Drupal.behaviors.somebehaviour = {
attach: function(context, settings) {
$('#edit-submit').click(function (e) {
$('#edit-submit').val('Is saved...');
$('#edit-submit').prop('disabled', 'disabled');
$(this).parents('form').submit();
});
}
};
})(jQuery);

jQuery change focus on tab or focusout

(sorry for my english)
Hi!, i'm using jquery in an app where i have a dinamycally created table with text inputs inside like this:
<td><input type="text" id="code"></td>
<td><select id="type"><option value="0">Normal</option><option value="1">Other</option></select></td>
<td><input type="text" id="price" class="price"></td>
<td><input type="text" id="total"></td>
and in other part i have a button, when this button is clicked, create another line in the table.
The container of this table and button exists inside a template.. this templates is rendered using underscore.js
Now the problem: I need to iterate over the inputs in order: code, type, price. When i fill the input price i calculate the total and shows up in the input, and then i need to change focus to the button (#more_button) to let the user click or press enter to create another line in table.
I use this:
$('.price').blur(function(e){
_this.setTotal($(e.currentTarget).val());
$('#more_button').removeClass('inactive').focus();
e.preventDefault();
e.stopPropagation();
});
When the #more_button is focused the css background change.
When i execute this piece of code, the button change the background but the focus inmediatly change to url bar. This happend in firefox and Chrome.
I try to use this to set the focus:
$('.price').blur(function(e){
_this.setTotal($(e.currentTarget).val());
$('#more_button').removeClass('inactive').;
setTiemout(function(){
$('#more_button').focus();
},100);
e.preventDefault();
e.stopPropagation();
});
But don't work either.....
Can you give some guideline to acomplish this?
The user can change the focus of input.price when press Tab or click in other part of the page.. in this moment i need to trigget seTotal and focus on the button.

I don't know what the simple method
$('your_selector').focusout(function(){
$('#more_button').focus();
});
doesn't work with tab key (only with the mouse to change the focus).. so i solve using a mix between keydown event and focusout. like this:
$('.price').bind('keydown',function(e){
if(e.keyCode === 9){//Tab key
tab = true;
check(e);
return false;
}
}).bind('focusout',function(e){
if(!tab){
check(e);
}else{
tab = false;
}
e.preventDefault();
return false;
});
where check() is a function to validate the value and tab is a flag to check if the tab key was pressed.

$('your_selector').focusout(function(){
$('#more_button').focus();
});
works in FF and chrome here at least.
here a fiddle: http://jsfiddle.net/Zabn4/

The most modern solution (jQuery 1.7+) is to use the following code:
$('#your-input').on('focusout', function(e){
$('#submit-btn').focus();
});

jQuery form submit: Any way to know what element triggered the submit?

I'm using asp.net MVC and when I submit a form, a previous developer had embedded some jQuery validation.
$('form').submit(function() {
...code done here to validate form fields
});
The problem is that both the "Save" and "Cancel" buttons on the form fire this submit jQuery function. I don't want the validation logic to fire if the "Cancel" input button was fired (id="cancel" name="cancel" value="cancel").
Is there a way that, within this submit function, I can retrieve the ID, name or value of which input button was pressed to submit the form?

I asked this same question: How can I get the button that caused the submit from the form submit event?
The only cross-browser solution I could come up with was this:
$(document).ready(function() {
$("form").submit(function() {
var val = $("input[type=submit][clicked=true]").val()
// DO WORK
});
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
Not sure if its the answer you're looking for but you should change the "Cancel" button to an anchor tag. There's no need to submit a cancel unless you're doing work on the form values.

well this will only fire if the type of the input button is like so:
<input type='submit' ...
so make sure the cancel button does not have type='submit' and it should work

EDIT
This only works in FF and not in Chrome (and I so, I imagine, not in other WebKit based browsers either) so I'm just leaving this here as a browser specific workaround, an interesting note but not as the answer.
#Neal's suggestion of NOT making the cancel button of type submit is probably the cleanest way. However, if you MUST do it the way you are doing it now:
$('form').submit(function(e){
if(e.originalEvent.explicitOriginalTarget.id === 'cancel'){
//don't validate
}
else{
//validate
}
});

var myForm = $('form');
$('input[type="submit"]',myForm).click(function(e) {
var whoClickedsubmit = $(e.target); //further, you can use .attr('id')
//do other things here
});
EDIT
.submit(function(event){
var target = event.originalEvent.explicitOriginalTarget.value;
//But IE does not have the "explicitOriginalTarget" property
});