When I'm trying to submit form, then I accidentally hit enter twice on submit button. In that case my form is submitted twice. Can any one advice me how I can handle this.
Here is the output which I needed:-
form values must be submitted once
even if user hit enter twice..
You can achieve this by jquery. Below is the same code.
In this example it will disable submit button for 2 seconds. After 2 seconds button will enable again. You can modify this according to your requirement.
$('form').submit(function(){
$(this).find(':submit').attr( 'disabled','disabled' );
//the rest of your code
setTimeout(() => {
$(this).find(':submit').attr( 'disabled',false );
}, 2000)
});
Try this and let me know if you have any concern.
You can add unique property on a certain column on your database or validate it through Laravel Request
You can also do it with disable the submit button for multiple clicks.
$(function() {
$('button').click(function() {
$($(this)).prop('disabled', true);
});
});
You can achieve this by jquery
In this example, it will disable submit button for 2 seconds. After 2 seconds button will enable again. You can modify this according to your requirement.
$('form').submit(function(){
$(this).find(':submit').attr( 'disabled','disabled' );
//the rest of your code
setTimeout(() => {
$(this).find(':submit').attr( 'disabled',false );
}, 2000)
});
Let me know if it works.
Related
If in a kendoForm after domReady with setOptions the formData is set, so submit fires twice with one click.
form.setOptions({
formData : { ID: 2, Name: "Tom", Address: "Berlin" }
});
My example code: kendoForm example
First press submit Button => submit fires ones.
Second press add FormData Button, then press submit => submit fires twice.
What is my mistake that fires twice after setOptions submit?
The described behavior is related to a known issue in the Form that is logged here:
https://github.com/telerik/kendo-ui-core/issues/5854
As a temporary workaround until the issue is resolved with an official fix, you can use override the _setEvents function as follows:
<script>
kendo.ui.Form.fn._setEvents = function() {
var that = this,
validator = that.validator;
validator
.bind("validateInput", $.proxy(that._validateField, that))
.bind("validate", $.proxy(that._validate, that));
that.wrapper
.on("submit.kendoForm", $.proxy(that._submit, that))
.on("clear.kendoForm", $.proxy(that._clear, that))
.on("click.kendoForm", ".k-form-clear", $.proxy(that._clear, that));
that._model.bind("change", $.proxy(that._change, that));
}
</script>
Here is a working Dojo example for your convenience.
I have a form that needs to be submitted on all button presses or whenever a user leaves the page, is that possible if so how?
Using jquery to detect if a user leaves the page.
https://api.jquery.com/unload/
$( window ).unload(function() {
//call your function here that executes the form
return "Handler for .unload() called.";
});
using jquery to detect button presses.
$(document).on('click', '.buttonCLass', function(){
//code here
})
I am able to run the test code and i am able to submit the form. I need the url of next page when submit button is click. I need to get url of next page when submit button is clicked. But i am getting curenturl of first page.
My code:
describe('Pmts app 5.0',function(){
var LoginPage = require("./LoginPO");
it('login test', function(){
LoginPage.setUserName('xyz#test.com');
LoginPage.setPassWord('test');
LoginPage.clickButton();
expect(browser.getCurrentUrl()).toEqual('https://localhost:1234/#/timesheet');
});
});
After submit button is clicked browser get closed immediately and it is not waiting for next page to load. Once the button is submitted it should wait until next page load and I need url of next page...
Put it in the following way:
LoginPage.clickButton().then(function(){ expect(browser.getCurrentUrl()).toEqual('https://localhost:1234/#/timesheet');
})
or you can put a explicit hard sleep:
browser.sleep(time in ms)
or you can put a browser.wait() to wait for certain element that appears on the next page:
browser.wait(function(){
return elem.isPresent()
},time in ms).then(function(){
expect(browser.getCurrentUrl())
.toEqual('https://localhost:1234/#/timesheet');
})
Please refrain from using browser.sleep(number), instead go for browser.waitForAngular() if your application is Angular.js based.
Using hard coded dependency is never a good idea.
I have noticed, that the time Protractor needs to load the whole page varies. Therefore, either use browser.waitForAngular() or set a high number in browser.sleep()
Try this :
describe('Pmts app 5.0',function(){
ptor = protractor.getInstance();
var LoginPage = require("./LoginPO");
it('login test', function(){
LoginPage.setUserName('xyz#test.com');
LoginPage.setPassWord('test');
LoginPage.clickButton();
ptor.sleep(1000);
expect(browser.getCurrentUrl()).toEqual('https://localhost:1234/#/timesheet');
});
});
I am looking for a solution, Codeigniter based, to where I can load a page from a MySQL table with check-boxes containing endorsements for the back of an ID card. I am already able to load the page with a 5 columns by 10 rows of check-boxes which works fine.
What I am not able to do is limit the selection to 9 out of 50 and post the check-box values to another page.
If I use jquery to disable the rest of the unchecked boxes by using this statement:
"$inputs.not(this).prop('disabled',true);"
It will only posts the last option that was chosen. On the other hand, if I don't disable the check-boxes or submit before the limit then the post works fine with an array on the following page containing the endorsements I had chose. I have been trying many ways to accomplish this in Codeigniter and searching for a solution but to no avail. If anyone can help me with this, it will be very appreciated. I am getting close to completing this project and have been struggling with this for a while.
Below is the script that I was using that I had found online:
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(":checkbox").filter(':checked').length==9){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
You can do this like when any check box is checked add the class checked and when limit reaches the 9 then disable all checkboxes then remove the disabled attribute from the checkboxes which has the class checked
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
$(this).addClass("checked");
var $inputs = $('input:checkbox')
if($(":checkbox").filter(':checked').length==9){
$("input[type=checkbox]").prop('disabled',true);
$(".checked").removeAttr("disabled");
// submit the form
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
i would like to ask how i can intercept the ajax delete functionality of a grid using ajax binding? specifically, up to the point wherein, after i click on delete, as the confirm prompt pops up, i would like to do something based on the user's choice,
basically, if OK, do this, if CANCEL do that..
You need to use the OnRowDataBound and attach a click handler to the delete button. Then you can display custom confirmation and decide what to do. If you want' to prevent the grid deletion code - call e.stopPropagation(). Here is a quick sample:
<%: Html.Telerik().Grid(Model)
// Prevent the grid from displaying the default delete confirmation
.Editable(editing => editing.DisplayDeleteConfirmation(false))
// Subscribe to the OnRowDataBound event
.ClientEvents(e => e.OnRowDataBound("onRowDataBound"))
%>
<script>
function onRowDataBound(e) {
$(e.row) // get the current table row (TR) as a jQuery object
.find(".t-grid-delete") // find the delete button in that row
.click(function(e) { // handle its "click" event
if (confirm("Do you want to delete this record?")) {
// User clicked "OK"
} else {
// User clicked "Cancel"
e.stopPropagation(); // prevent the grid deletion code from executing.
}
});
}
</script>
The demo page seems to contain an example of what you are looking for.