jquery to disable buttons on submit/click in forms and links - javascript

In my rails app I have buttons that submit information to the server. Some buttons are part of a form and some are not. I'm looking for a way to apply my jquery, which disables the buttons after click, to both.
Here is my current jquery:
$('.btn-disabler').on('click', function() {
$(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
$(this).find('.btn-label').addClass('invisible');
});
This code adds an icon disables the button and makes the text invisible. I've extended the disable function to work on anchor tags as explained here https://stackoverflow.com/a/16788240/4584963
An example link:
<a class="btn btn-success btn-disabler" rel="nofollow" data-method="post" href="/approve?id=10">
<span class="btn-label">Approve</span>
</a>
An example form:
<form class="simple_form well" novalidate="novalidate" id="new_user" action="/" accept-charset="UTF-8" method="post">
<div class="form-group">
<input class="string optional form-control" placeholder="First name" type="text" name="user[first_name]" id="user_first_name">
</div>
<div class="form-group">
<input class="string optional form-control" placeholder="Last name" type="text" name="user[last_name]" id="user_last_name">
</div>
<div class="form-group">
<input class="string email optional form-control" placeholder="Email" type="email" name="user[email]" id="user_email">
</div>
<div class="form-group">
<input class="password optional form-control" placeholder="Password" type="password" name="user[password]" id="user_password">
</div>
<div class="form-groups">
<input class="password optional form-control" placeholder="Retype password" type="password" name="user[password_confirmation]" id="user_password_confirmation">
</div>
<button name="button" type="submit" class="btn btn btn-primary btn-disabler">
<span class="btn-label">Submit</span>
</button>
</form>
My jquery above does not work for the form. In the form on click, the button changes but there is no submission. To get the jquery to work for the form I need to change it to this:
$('.signup-form').on('submit', function() {
$(this).find('.btn-disabler').append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
$(this).find('.btn-label').addClass('invisible');
});
How can I consolidate this to apply to both links and form submit buttons? Seems like my problem stems from links need the click event and the form needs the submit event.

You can use jQuery is() to check parent of current button object is form or not in order to submit the form:
$('.btn-disabler').on('click', function() {
$(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
$(this).find('.btn-label').addClass('invisible');
if ($(this).parent().is("form")) $(this).parent().submit();
});

do you try this using the id of the form like
$('#new_user').on('submit' ...
or with the form element
$('form').on('submit' ...

Think of the submit button as an extension of a form submit event. If you disable the form submit button, the form submit event is disabled. What you can do is add the class to the form, and then in your jQuery code you can assign specific rules. something like this..
So, using this HTML:
<form class="disabler">
<button type="submit"><span>Label</span></button>
</form>
<span>Label</span>
<button class="disabler"><span>Label</span></button>
Use this javascript:
$('.disabler').each(function(e){
if(this.nodeName == "A"){
// this is a hyperlink...
// apply css class
$(this).on('click', function(){
//some action
});
} else if (this.nodeName == "BUTTON") {
//this is a button outside of a form
// disable and add css class
$(this).on('click', function(){
//some action
});
} else if (this.nodeName == "FORM") {
$(this).on('submit', function(){
$(this).find('button[type="submit"]')
.append("<i>Loading</i>")
.disable();
});
}
});
You can probably refactor this down more, but i think you should pay attention to nodeName when you're trying to apply different rules to each of these components.
I hope this answers your question.

Related

Catch HTML Form "Enter" Press to execute AJAX, not Post

i am currently working on a HTML Form (building it with the pug view engine), that I try to work with in an ajax request after fill-out.
When pressing Enter after editing my input-element, it seems to submit the form (post request i suppose?). I would like to the enter-press event to (just like my button) fire a jquery function instead.
The form is build as following:
form(class="form" action="")
div(class="form-group")
label(for="testid") Tickersymbol
input(name="symbol", type="text", class="form-control", id="testid", placeholder="Please enter the symbol")
div(class = "form-group")
button(class="btn btn-primary" id="getdata" type="button") Get Info
Current JQuery Code:
// This does not work
$("#inputStocksymbol").trigger('click', function (){
console.log("Enter event should have happened.")
})
// This does work
$("#getquote").click( function () {
console.log("Button has been pressed")
})
Are there any suggestions on how this would be possible?
Thanks!
The Return keypress within an input of a form will, by default, submit that form. Therefore, if you want to run some logic when this occurs hook to the submit event:
$("form.form").on('submit', function(e) {
e.preventDefault()
// run your code here
console.log("Button has been pressed");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" action="">
<div class="form-group">
<label for="testid">Tickersymbol</label>
<input name="symbol" type="text" class="form-control" id="testid" placeholder="Please enter the symbol" />
<div class="form-group">
<button class="btn btn-primary" id="getdata" type="button">Get data</button>
</div>
</div>
</form>
Alternatively, if you just want to run some code when Return is pressed within the input, but do not allow the keypress to submit the form, you can hook a keypress event handler directly to the input, making sure to call stopPropagation():
$("#testid").on('keypress', e => {
if (e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
// run your code here
console.log("Return has been pressed");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" action="">
<div class="form-group">
<label for="testid">Tickersymbol</label>
<input name="symbol" type="text" class="form-control" id="testid" placeholder="Please enter the symbol" />
<div class="form-group">
<button class="btn btn-primary" id="getdata" type="button">Get data</button>
</div>
</div>
</form>

html validation on button or hidden filed

wondering if anyone can help. As part of a form, i'm using a selection of buttons to capture satisfaction, rather than radio or dropdown. I'm using a jquery to capture the value of the button and adding it to a hidden field - the field the form is using to submit the information.
All works fine, however, i want to put validation, to make sure an answer is captured - but HTLM5 validation does not support buttons or hidden fields. Is there a was i can use JS to check if a button has been pressed on submit, and if not, toggle the html validator for that field?
Here the code i have so far;
<div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities: <span class="required ">*</span></label>
<input required="required" type="hidden" name="feedbackQuestions[56]" id="feedbackQuestions_56">
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][0]" value="Excellent">Excellent</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][1]" value="Good">Good</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][2]" value="Satisfactory">Satisfactory</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][3]" value="Poor">Poor</button></div>
</div>
<script>
$('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
e.preventDefault();
$('#feedbackQuestions_56_group .satisfactionBtn').each(function( index ) {
$( this ).removeClass('active');
});
var thisval = $(this).val();
$('#feedbackQuestions_56').val(thisval);
$(this).addClass('active');
});
</script>
</div>
I know i need to add a trigger to the submit button futher down the page, so i can do a jquery .click() and then prevent the event until i've checked, but not sure how to actually check or how to trigger the validation.
I would actually store it as a global JS variable rather than a hidden field. you can reparse this value to the hidden field through jQuery if you want, but I don't see a use in that. Also divs are selectable in JS as well, so you do not need them to be just one or the other.
var isSelected = false;
$('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
e.preventDefault();
$('#feedbackQuestions_56_group .satisfactionBtn').each(function (index) {
$(this).removeClass('active');
});
var thisval = this.id;
console.log("thisval: " + thisval);
$('#feedbackQuestions_56').val(thisval);
$(this).addClass('active');
isSelected = true
});
$('#onSubmit').click(function () {
console.log(isSelected);
//
// Look into ajax post command
//
if (isSelected == true) {
// ajax call here
}
else {
alert("Please select a rating")
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities:
<span class="required ">*</span>
</label>
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][0]" id="Excellent">Excellent
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][1]" id="Good">Good
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][2]" id="Satisfactory">Satisfactory
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][3]" id="Poor">Poor
</div>
<div class=" btn btn-primary btn-lg btn-block" id="onSubmit">Submit</div>
</div>
Since that hidden field value is filled by code not user, code should validate the value(or no need to validate).
It sounds really strange that the hidden field need to be validated.
Edited
If you really need to validate hidden field, the original way is not working, but you can do it tricky by just add opacity:0 style.
Add such style make it invisible but not hidden, so the validate should work fine as usual.
But just remember you must change the type="hidden" to type="text"

How to submit form data in ajax using enter in the keyboard

I am creating a comment functionality and below are my code so far.
html
<form action="http://website.com/transaction_items/add_comment" class="" id="form-comment" role="form" method="post" accept-charset="utf-8">
<input type="hidden" name="checklists_item_id" value="6" style="display:none;">
<input type="hidden" name="user_id" value="1" style="display:none;">
<div class="input-group col-xs-12">
<input type="text" name="comment" value="" class="form-control" id="comment-input" placeholder="Enter your comments..">
<span class="input-group-btn">
<button class="btn btn-default" id="doc-comment" type="button">Post</button>
</span>
</div>
</form>
jQuery
This function is called when document is ready.
function comment () {
$('#doc-comment').click(function (e) {
var form_id = '#' + $(this).parents('form').attr('id');
// submit data from the form
submit.send(form_id);
});
}
The problem:
Using the button <button class="btn btn-default" id="doc-comment" type="button">Post</button> to submit data work fine, but
if I use enter in the keyboard, submit.send(form_id); will not do its function, instead the default form submission will execute.
How can I use ajax if use enter in the keyboard to submit form data?
nutshell
$("#form-comment").on('submit', function(evt) {
evt.preventDefault();
// do your ajax stuff here
});
you can then toss the onclick button listener.. as this will handle the button submit as well
There are more ways to submit a form then simply pressing the submit button.
You need to:
Use the forms submit method
Keep the form from doing the full submit.
-
// This will catch the *enter* as well as the submit button
$("#form-comment").on('submit', function(evt) {
evt.preventDefault();
// You can then submit the form via ajax and update things as needed.
});
IF you are going to use a button you should at least do a
<button type="button">...</button>
which behaves differently.
$("#form-comment").keyup(function (e) { // On pressing enter
if (e.keyCode == 13) {
// put your ajax code here
}
});
You may have to disable the default Enter event for the form submit button as well depending on your browser.
So in the Jquery Button click function make sure you have something like
event.preventDefault();

disable upload page after submit

I have button(in future many), and form. What i want, that after submit of the page that call form became not available.
But after submit page is upload. How to avoid this?
<script type="text/javascript">
$(function() {
var btn = $('#btn1');
var form = $('#myform');
var formbtn = $('#submit');
btn.on ('mouseup', function(){
form.toggle(200);
});
formbtn.on('mouseup', function(){
btn.html('bought!');
btn.attr('disable', true);
return false;
});
});
<div id = "myform">
<form id = "my">
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button id="submit" class="btn btn-default">Submit</button>
</form>
</div>
And how in future choice button to disable from the plurality of buttons, it will be some array?
To answer the first part of your question, you will want to change
btn.attr('disable', true);
to
btn.attr('disabled', 'disabled');
For the second part of your question, if I understand correctly, you could use a class or element selector for multiple buttons
$('button')
$('.buttonClass')
To add, depending on the version of jQuery, you may want to use .prop instead of .attr for 1.6+.
See this answer for more information - https://stackoverflow.com/a/6048113/1927071

Hide form on submit with Angular JS

Trying to wrap my head around some Angular items and working thru a tutorial to edit and learn.
Clicking the below button shows the below form. How do I reverse this once the form is submitted? Meaning hiding the form on submit until the button is clicked once more.
<button ng-click="addNewClicked=!addNewClicked;" class="btn btn-sm btn-primary">
<i class="fa fa-plus"></i>Add Task
</button>
Basically, the form appears, I enter something and submit, but would like the form to dissapear upon submit? Thinking something to do with ng-hide, but can I do this using only Angular? Or do I need to do something with javascript/css?
<div id="addForm" class="margin-full-5">
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" id="newTaskForm" class="add-task">
<div class="form-actions">
<div class="input-group">
<input type="text" class="form-control" name="comment" ng-model="taskInput" placeholder="Add New Task" ng-focus="addNewClicked">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="addTask(taskInput)">
<i class="fa fa-plus"></i> Add Task
</button>
</div>
</div>
</div>
</form>
You can also achieve this using a combination of Angular form's attribute $submitted, ng-hide and ng-submit
<form name="myForm" ng-hide="myForm.$submitted" ng-submit="submit()">
<button>Submit</button>
</form>
Read about it here: https://docs.angularjs.org/api/ng/type/form.FormController
Somewhere in your view.
<button ng-click="showTheForm = !showTheForm">Add a Task</button>
<form ng-show="showTheForm" ng-submit="processForm()">
<button>Submit</button>
<button type="button" ng-click="showTheForm = false">Cancel</button>
</form>
Somewhere in your controller
$scope.processForm = function() {
// execute something
$scope.showTheForm = false;
}
Your form is displaying IF the addNewClicked value evaluates to true, which occurs when you click the add task button. If you want the form to disappear on submit, you just need to make the onClick to that button change your addNewClicked to false.
AngularJS Docs for Ng-If
You can do that by using ng-show/ng-hide as per example below :
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" ng-hide="hideform" id="newTaskForm" class="add-task">
and modify the submit method to make the hideform = true;
$scope.addTask = function(input){
... your things
$scope.hideform = true;
}
You can also do the same using jQuery :
$("#newTaskForm").hide();
This should do the trick:
$scope.addTask = function(taskInput) {
...
$scope.addNewClicked = false;
}
You could use ng-show as you can see in this jsfiddle
This will show and hide the div element based on clicking the button. When the button is clicked it will toggle the boolean, hence acting as an on/off switch for ng-show

Categories

Resources