I have problem with inputs validation and ajax post. I use http://1000hz.github.io/bootstrap-validator/
here is my code of form:
<form id="order-form" class="form" action="" method="post" novalidate="true" role="form" data-toggle="validator">
<fieldset>
<div id="callback-type" class="btn-group">
<button class="btn btn-default private-callback btn-primary" type="button" data-type="private">
Private
</button>
<button class="btn btn-default public-callback" type="button" data-type="public">
Public
</button>
<input class="callback-type" type="hidden" id="callback-type-data" name="callback[type]" value="private">
</div>
</fieldset>
<fieldset style="border: none">
<section class="callback-time-select form-group">
<label class="input"> <i class="icon-prepend fa fa-user"></i>
<input class="callback-datetime" placeholder="<?=date('Y/m/d H:i');?>" type="text" name="callback[time]" id="callback-time" required/>
<div class="time-clear">
<i class="fa fa-times-circle"></i>
</div>
</label>
<div class="help-block with-errors"></div>
</section>
<section class="second callback-agent-section form-group">
<select class="callback-agent" name="callback[user]" style="width:100%" class="select2" id="select-callback-agent" required>
<option></option>
<option value="1">Name</option>
</select>
<div class="help-block with-errors"></div>
</section>
</fieldset>
<div class="tab-actions">
<button type="submit" class="btn btn-primary btn-sm submit-button callback-btn-create">Set Callback</button>
<button type="submit" class="btn btn-primary btn-sm submit-button callback-btn-update" style="display: none;">Update Callback</button>
<button type="button" class="btn btn-default btn-sm submit-button callback-btn-remove" style="display: none;">Remove</button>
</div>
</form>
And here is my javascript code:
$(document).on('click', '#dealing-modal #callback-tab .tab-actions .callback-btn-create', function(){
$(this).closest('form').validator().submit(function(e){
e.preventDefault();
if (!$('.has-error').length) {
self.create();
}
});
});
And self.create method:
create: function()
{
Application.Debug("Calllback.create");
var self = this;
var form = $(":input", this.window).serialize();
form = form + '&call_id=' + this.call.id;
$.post(Application.url+'callbacks/create', form, function(data){
if(data.status === true) {
self.callback = data.callback;
$(".callback-btn-create",self.window).css('display','none');
$(".callback-btn-update",self.window).css('display','inline');
$(".callback-btn-remove",self.window).css('display','inline');
} else {
Application.Debug("Calllback.create - ERROR");
}
});
}
I need to validate form inputs and send ajax post on click button. It initiate form submit, and when send post after form is valid.
And my problem is:
When inputs are empty and i push the button create, form validate it and i see the error text. Its fine! But when i clicked button 1 or 2 times and ect., and after i complete all inputs, method self.create(); doing ajax post as much as times i clicked button.
Where is the problem?
You just need to disable or display none below button after click and before ajax call and vice versa after successful response.
<button type="button" class="btn btn-primary btn-sm submit-button callback- btn-create">Set Callback</button>
var $submitBtn; // Lets say this is the jQuery object that contains the form button element.
$submitBtn.attr('disabled', true);
$.post().always(function () {
$submitBtn.attr('disabled', false);
});
And, have some disabled styling for your button like:
input[type="submit"][disabled] {
opacity: .4;
pointer-events: none;
}
Another approach:
var $form; // Lets say this is the jQuery object that contains the form element.
if ($form.data('posting')) {
return false; // We are already posting data, don't do anything.
}
$form.data('posting', true);
$.post().always(function () {
$form.data('posting', false);
});
Related
I've got a Submit button that's used to insert item:
<div class="col-md-12">
<div class="form-body">
<div class="form-group pull-right">
<label for="exampleInputEmail1"> </label> `
<button type="button" id="subbtn" class="btn btn-success margin-t12" ng-click="Submit();">Submit</button> //button
<button type="button" class="btn btn-default margin-t12" ng-click="back();">Cancel</button> </div>
</div>
</div>
Now when I press the Submit button I noticed sometime the item inserted twice with same details. I applied below solution already but the issue not resolved yet.
$('#subbtn').attr("disabled", 'disabled'); //button disable
setTimeout(function () {
$('#subbtn').removeAttr("disabled")
}, 10000);
I'm just wondering what I've overlooked...
I am trying to use bootstrap spinner to load upon button click while flask is processing the request but it's not working.
When I click the button, the request is sent to flask and it never gets to the javascript part for some reason.
To confirm that, I tried the same HTML code below on a separate HTML page and it worked.
So my question is: how to make the javascript code work in conjunction with the request being sent to flask as well.
the HTML and Javascript part goes this way:
<div class="container-fluid mt-3">
<p class="font-weight-bold">Deactivate User</p>
<br>
<form action="{{ url_for('deactivate_user')}}" method='POST'>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Username" id="username" name="username" required>
</div>
<button type="submit" id="submit" class="btn btn-info btn-primary">Submit</button>
</form>
</div>
<script>
$('#submit').click(function () {
this.form.submit();
this.disabled = true;
this.html = '<button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span></button>'
});
</script>
Am I doing something wrong? I am pretty new to HTML so excuse my ignorance in advance.
You can use ajax
<div class="container-fluid mt-3">
<p class="font-weight-bold">Deactivate User</p>
<br />
<div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input
type="text"
class="form-control"
placeholder="Username"
id="username"
name="username"
required
/>
</div>
<button id="submit" class="btn btn-info btn-primary">
Submit
</button>
</div>
</div>
Then
<script>
$('#submit').click(function (d) {
let username = $('#username').val();
$.post(
"url_for_deactivate_user",
{
username: username,
},
function (data, status) {
// if (data) { // validate response data here
this.disabled = true;
this.html = `<button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span></button>
`;
// }
}
);
});
</script>
NOTE: Make sure you replace url_for_deactivate_user properly and also that your server gives a response.
I have a simple form with multiple submit buttons. How do I change the java script to see, which button is clicked. Thanks
<form class="contact" role="form" data-toggle="validator" id="testform">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" name="inputName" placeholder="Cina Saffary" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button class="btn btn-success" type="submit" id="save1" value="save1">save1</button>
<button class="btn btn-success" type="submit" id="save2" value="save2">save2</button>
</div>
</form>
$('#testform').validator().on('submit', function (e) { (e.isDefaultPrevented()) {
alert("failure!");
} else {
// if save1 clicked, alert("save1 was clicked");
// if save2 clicked, alert("save2 was clicked");
}
});
You can get button value like this:
var val = $("button[type=submit][clicked=true]").val();
And you need to add one more event for button also
$("form button[type=submit]").click(function() {
$("button[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
DEMO
Reference: How can I get the button that caused the submit from the form submit event?
So I have this code:
$(document).ready(function(){
if($('#proofAttach-filemanager').val().length !=0){
$('#download_now').attr('disabled', false);
}
else
{
$('#download_now').attr('disabled', true);
}
});
The field with id proofAttach-filemanager is filled up dynamically using elFinder every time I upload a file.
Since the code above is only running every time the page loads, I don't know how to update the download_now button to enable dynamically every time the field is filled (and without keyUp)
HTML Segment:
<div class="form-group col-md-12">
<label>Attachment</label>
<input type="text" id="proofAttach-filemanager" name="proofAttach" value="" class="form-control" readonly="">
<div class="btn-group" role="group" aria-label="..." style="margin-top: 3px;">
<button type="button" data-inputid="proofAttach-filemanager" class="btn btn-default popup_selector">
<i class="fa fa-cloud-upload"></i> Browse uploads</button>
<button type="button" data-inputid="proofAttach-filemanager" id="download_now" class="btn btn-default download_now">
<i class="fa fa-cloud-download"></i> Download</button>
<button type="button" data-inputid="proofAttach-filemanager" class="btn btn-default clear_elfinder_picker">
<i class="fa fa-eraser"></i> Clear</button>
</div>
Writing your logic inside the change event of that text box should work.
$(document).ready(function(){
toggleDownloadButtonAccess();
$('#proofAttach-filemanager').change(toggleDownloadButtonAccess);
function toggleDownloadButtonAccess(){
var $btnDownload = $('#download_now');
if($('#proofAttach-filemanager').val().length !=0){
$btnDownload.attr('disabled', false);
}
else
{
$btnDownload.attr('disabled', true);
}
}
});
CaseI create a new registration form and save it into database.The save process was succeed but I want to add some user interaction like when the data is successfully saved, the system notify user by toastr.I have create the code but it is not working.Please help.Below is the code.
Javascript and HTML
//toast a message upon successful registration
$(document).on('click', '.submit_button', function(e) {
console.log("submit button clicked");
e.preventDefault();
$.ajax({
type: "POST",
url: $("#regtenantform").attr('action'),
data: $("#regtenantform").serialize(),
success: function(response) {
if (response === "Success") {
$.toast({
heading: 'Welcome to my Elite admin',
text: 'Use the predefined ones, or specify a custom position object.',
position: 'top-right',
loaderBg:'#ff6849',
icon: 'success',
hideAfter: 3500,
stack: 6
});
window.reload;
} else {
alert("invalid username/password. Please try again");
}
}
});
});
<form id="regtenantform" name="regtenantform" class="form-material form-horizontal" method="post" action="../controllers/tenantcontroller.php" onsubmit="return ray.ajax()">
<div class="form-group">
<label class="col-md-12">Fullname <span class="help"> e.g. "Azizul"</span></label>
<div class="col-md-12">
<input type="text" class="form-control form-control-line" placeholder="Fullname" id="name" name="name" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-12" for="example-email">Identification Number <span class="help"> e.g. "860102075555" (without "-" or space)</span></label>
<div class="col-md-12">
<input type="text" class="form-control form-control-line" placeholder="Id Number" id="ic" name="ic" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-12">Phone Number <span class="help"> e.g. "0123456789"</span></label>
<div class="col-md-12">
<input type="text" class="form-control form-control-line" placeholder="No." id="contact" name="contact" required="">
</div>
</div>
<div class="form-group m-b-0">
<div class="col-sm-offset-3 col-sm-9 text-right">
<button type="button" class="btn btn-inverse waves-effect waves-light m-r-10" id="reset" name="reset">Reset</button>
<button type="submit" class="btn btn-info waves-effect waves-light" id="submit_button" name="submit_button">Save</button>
</div>
</div>
</form>
Here:
$(document).on('click', '.submit_button', function(e) {
^---CSS class
<button type="submit" class="btn btn-info waves-effect waves-light" id="submit_button" name="submit_button">Save</button>
^^----nowhere do you have a "submit_button" class
You have an ID of submit_button, so your click handler should be looking for #submit_button, not .submit_button