I create ASP .NET MVC application. On button click I call JavaScript that disable same button.
After that (button has property readonly disabled) post action doesn't call. When I remove JavaScript that disable buttons everything is fine. This happens only in the Google Chrome.
When I try same example in Firefox or Internet Explorer everything is fine.
<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
Enable();
});
function Enable() {
$('#btn').removeAttr('disabled');
$('#btn').removeAttr('readonly');
}
function Disable() {
$('#btn').attr('disabled', 'true');
$('#btn').attr('readonly', 'true');
}
</script>
<h2>Example</h2>
<form>
<input id="btn" type="submit" value="StackOverflow" onclick="Disable()" />
</form>
You need to call form.submit() before disabling the button, and return false from your event handler.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<script src="//code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
Enable();
});
function Enable() {
$('#btn').removeAttr('disabled');
$('#btn').removeAttr('readonly');
}
function Disable() {
$('#myform').submit();
$('#btn').attr('disabled', 'true');
$('#btn').attr('readonly', 'true');
return false;
}
</script>
<h2>Example</h2>
<form id="myform" method="post">
<input id="btn" type="submit" value="StackOverflow" onclick="return Disable()" />
</form>
</body>
</html>
try
function Disable() {
$('#btn').attr('disabled', 'disabled');
$('#btn').attr('readonly', 'readonly');
$("form").submit();
}
edit
change the `input` type to `button`
<form>
<input id="btn" type="button" value="StackOverflow" />
</form>
$(function(e){
$("#btn").click(function(e){
e.preventDefault();
$(this).attr('disabled', 'disabled'); //if you can use latest version of jquery and use .prop("disabled",true)
$("form").submit();
});
});
Related
Suppose a function trigger on Click button
<!DOCTYPE HTML>
<html lang="en">
<!--getElementsByTagName.html-->
<head>
<title>getElementsByTagName.html</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="getElementsByTagName.css"/>
<script type="text/javascript">
//<![CDATA[
function getData(){
inputTag=document.getElementsByTagName("input");
divOutput=document.getElementById("output");
alert(inputTag.length);//length of input Tag
for(i=0;i<inputTag.length-1;i++){
if((inputTag[i].value=="") || (inputTag[i+1].value=="")){
alert("Please Enter Value");
}else{
a=inputTag[i].value;
b=inputTag[i+1].value;
}
}
$("#output").css("display","block");
divOutput.innerHTML="<strong>"+a+"<\/strong>";
divOutput.innerHTML+="<br\/>"+"<strong>"+b+"<\/strong>";
}//end function
//]]>
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>Example getElementsByTagName</legend>
<label>Name</label>
<input type="text" id="txtName"/>
<label for="txtName">Password</label>
<input type="password" id="txtPassword"/>
<button type="button" onclick="getData()">
Submit
</button>
</fieldset>
<div id="output">
</div>
</form>
</body>
</html>
Is this right?? $("#output").css("display","block");
This code not working i.e. after click on submit button it doesn't show the output div?
Add this code:
$( "#output" ).on( "click", function() {
this.css("display", "block");
});
function MyConfirm(message, callback) {
console.log("In My Confirm");
var ids = document.getElementById("mymodal");
$('#MyText').html(message);
ids.style.display = "block"
$('input[id^=cfrm_]').click(function (e) {
e.preventDefault();
console.log("In Click Event");
if (typeof callback === 'function') {
callback($(this).attr('value'));
}
ids.style.display = "none"
});
}
var as="My Test Message";
function mytest(){
var na = MyConfirm(as, function (result) {
console.log("Result: "+result)
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" onclick="mytest()" value="button" /></div>
<div id="mymodal" style="display:none">
<div id="MyText"></div>
<input id="cfrm_btnYes" type="button" value="Yes" />
<input id="cfrm_btnNo" type="button" value="No" />
</div>
</form>
</body>
</html>
I am using the above code to mimic the default confirm dialog window action. The function is working fine. But upon clicking the the button mytest() is called and it makes the div #mymodal visible with two buttons as expected. But when you click the Yes or No button it makes the div hidden but it loops through the MyConfirm function multiple times. It can be seen in console. Can any one please explain me why I am getting this weird response. My aim is to create an alternate for confirm() fn. with a return value.
The problem is that you bind a new click event to confirm buttons each time MyConfirm() function executes. click event binding doesn't override old bindings but adds a new function to that event.
You can add $('input[id^=cfrm_]').off('click'); to delete old bindings before binding new one.
function MyConfirm(message, callback) {
console.log("In My Confirm");
var ids = document.getElementById("mymodal");
$('#MyText').html(message);
ids.style.display = "block"
$('input[id^=cfrm_]').off('click');
$('input[id^=cfrm_]').click(function (e) {
e.preventDefault();
console.log("In Click Event");
if (typeof callback === 'function') {
callback($(this).attr('value'));
}
ids.style.display = "none"
});
}
var as="My Test Message";
function mytest(){
var na = MyConfirm(as, function (result) {
console.log("Result: "+result)
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" onclick="mytest()" value="button" /></div>
<div id="mymodal" style="display:none">
<div id="MyText"></div>
<input id="cfrm_btnYes" type="button" value="Yes" />
<input id="cfrm_btnNo" type="button" value="No" />
</div>
</form>
</body>
</html>
Please try with return. Maybe it will be ready.
I'm using jquery to avoid multiple form submission and basically disable the button on click. A bad consequence seems to be that the form is no longer submitted, thus the question: Is it possible to disable the button but still submit the form ? I know I can do the form submission through jQuery but currently all the requests are server side processed (e.g. after the form is submitted it returns a full html page either with the error or success response)
Here is the code I have so far
<script type="text/javascript">
jQuery(document).ready(function($) {
setTimeout(function(){alert("Hello")}, 3000);
$("#loginBtn").click(function() {
$("#loginBtn").attr("disabled", "disabled");
}); // click()
}); // ready()
</script>
<form id="myForm">
<div class="form-actions">
<input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login">
Edit
Just to make sure it's clear: The form is not submitted through AJAX
This task can be simply done by ajax function :
Try this logic:
<script>
$(document).ready(function(){
$("#loginBtn").click(function(){
$("#loginBtn").attr("disabled", "disabled");
$.post("post file path here",
{
field1:"value1", //post data that will be used by other file
field2:"value2",
.. ..
},
function(response){
if(response = "ok"){
$("#loginBtn").prop('disabled', false);
}
});
});
});
</script>
Listen to the submit event, not to the click event.
$("#form-id").on("submit", function () {
$(this).find('[type="submit"]').attr("disabled","disabled");
});
This is an example ,
<div class="form-actions" id="frm"></div>
$('#frm').bind('submit', function(e) {
$('#loginBtn').attr('disabled', 'disabled');
alert('submitted');
validForm = false;
// do stuff (validations, etc) here and return false or e.preventDefault() if you want to stop the form from submitting
if (!validForm) {
e.preventDefault();
// reactivate the button if the form was not submitted
$('#loginBtn').prop('disabled',true);
}
});
You need to return true in order to submit the form.
First write a javascript function as
function BeforeLoginSubmitted(sender) {
$(sender).prop("disabled", true);
return true;
}
Then in html button call the function as below
<input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login"
onclick="return BeforeLoginSubmitted(this);" />
Now the form will be submitted. If you return false in any case the form will not be submitted.
Edit Below is the complete sample code for the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function BeforeLoginSubmitted(sender) {
$(sender).prop("disabled", true);
return true;
}
</script>
</head>
<body>
<form action="/" method="post" runat="server">
<input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login"
onclick="return BeforeLoginSubmitted(this);" />
</form>
</body>
</html>
Edit 2 i see some issue with the above code in crome browser. The below code is working for the crome browser too.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function BeforeLoginSubmitted() {
$("#loginBtn").prop("disabled", true);
return true;
}
</script>
</head>
<body>
<form action="https://www.google.com" method="post" onsubmit="return BeforeLoginSubmitted(this);" >
<input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login" />
</form>
</body>
</html>
I am working on a clipboard functionality...
I am facing mouse-events issues... In below code, when I remove label tag and style="display:none" class="hide" , my clipboard functionality is working, but clipboard functionality is not working..
Please kindly check below code: what changes I need to make so that it works perfectly?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery</title>
<link href="_assets/css/Style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="_assets/js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript">
function myfunc2() {
var selectedobj=document.getElementById('texter');
if(selectedobj.className=='hide'){ //check if classname is hide
selectedobj.style.display = "block";
selectedobj.readOnly=true;
selectedobj.className ='show';
}else{
selectedobj.style.display = "none";
selectedobj.className ='hide';
}
}
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
var clip = new ZeroClipboard.Client();
clip.setText('');
jQuery('#copy-button').click(function(){
clip.setText(jQuery('#texter').val());
});
});
$(document).ready(function () {
var clip = new ZeroClipboard.Client();
clip.setText(''); // will be set later on mouseDown
clip.addEventListener('mouseDown', function (client) {
// set text to copy here
clip.setText(jQuery('#texter').val());
// alert("mouse down");
});
clip.glue('copy-button');
});
</script>
</head>
<body>
<label onmouseover="myfunc2()">Click here</label>
<textarea name="texter" id="texter" style="display:none" class="hide" readonly>sdfdsfsdfgdfdfg</textarea>
<input type="button" value="Copy to clipboard" id="copy-button" />
</body>
</html>
I am using the following code to make a custom checkbox with my own images.
First I included JQuery and added the JQuery code for the required functionality:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#moreinfo").change(function() {
if(this.checked) {
$(this).prev().attr("src", "checkbox_unchecked.gif");
} else {
$(this).prev().attr("src", "checkbox_checked.gif");
}
});
});
</script>
Next...here's the HTML:
<label for="moreinfo">
<img src="checkbox_unchecked.gif"/>
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>
The unchecked image is there but when I click on it, it doesn't change/toggle.
I'm I missing something?
UPDATE:
Testing this full code locally and it's not working...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#moreinfo").change(function() {
if(this.checked) {
$(this).prev().attr("src", "http://icdn.pro/images/en/v/e/verify-correct-icone-9268-48.png");
} else {
$(this).prev().attr("src", "http://www.theology.edu/Remata/Android/Help/wrongx_icon.png");
}
});
});
</script>
</title>
</head>
<body>
<label for="moreinfo">
<img src="http://www.theology.edu/Remata/Android/Help/wrongx_icon.png"/>
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>
</body>
</html>
It's working, you can check it here.
$("#moreinfo").click(function() {
var $img = $(this).prev();
$img.attr("src", ($(this).checked)?"checkbox_checked.gif":"checkbox_unchecked.gif");
});