I am trying to use bootstrap's loading state change (http://getbootstrap.com/javascript/#buttons-stateful) to disable button upon clicking - to prevent multiple submits on client side (on server side, I got this covered). This is the code that I am testing it with.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<form action = "http://slowLoadingPage/">
<button type = "button">This one works well</button>
<button type = "submit">Submit me!</button>
</form>
<script type = "text/javascript">
$(function () {
$('body').on("click", "button", function(e) {
$(this).button("loading");
});
});
</script>
</body>
</html>
It works like a charm in FF and Chrome however in Safari, clicking on the button will trigger submitting the form however it will not change the state (class disabled is added however state disabled is not).
Is there any way to make this work in Safari, please?
Thank you!
EDIT 1
Decided to change the JS a bit, instead of watching for click events, I added submit event to form (to catch other ways of submitting form as well). The code now looks as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<form action = "http://localhost/test.php">
<input type = "text" />
<button class = "btn btn-default" type = "submit">Submit me!</button>
</form>
<script type = "text/javascript">
$(function () {
$("form:not([data-loading-state=disabled])").submit(function() {
setTimeout($.proxy(function () {
var inputs = $(this).find(":input");
inputs.attr("data-form-disabled", 1);
inputs.prop("disabled", true);
inputs.addClass("disabled");
$(this).find("button, input[type=submit]").each(function (i, el){
func = $(el).is('input') ? 'val' : 'html';
$(el).attr("data-loading-text", $(el)[func]());
$(el)[func]("Loading...");
});
}, this), 0);
});
});
</script>
</body>
</html>
Again, it works perfectly in FF and Chrome (inputs are disabled and button's text changes upon clicking on the button). However in Safari, it doesnt work as good - inputs are "disabled" but they do not look disabled and button's text does not change. I tried to recreate this on jsfiddle but submitting forms doesnt work well there so I created a demo on my own website = http://demo.jacon.cz/test.html. Upon clicking on the button in FF and Chrome, button's text will change to loading... and after 3 secs, the form will get submitted. In Safari, it doesn't work.
Related
how to disable a button permanently after clicking it ?it should remain disabled after refreshing the page also.But after refreshing the page the button is enabled again.how to do this??
its really easy , just change disabled property to true..
<script type="text/javascript">
function disableButton(btn){
document.getElementById(btn.id).disabled = true;
alert("Button has been disabled.");
}
</script>
with HTML it would look smth like this
<!--JavaScript - Disable Button after Click using JavaScript Function.-->
<html>
<head>
<title>JavaScript - Disable Button after Click using JavaScript Function.</title>
<script type="text/javascript">
function disableButton(btn){
document.getElementById(btn.id).disabled = true;
alert("Button has been disabled.");
}
</script>
</head>
<body style="text-align: center;">
<h1>JavaScript - Disable Button after Click using JavaScript Function.</h1>
<p><input type="button" id="btn1" value="Click to disable button." onclick="disableButton(this)"</p>
</body>
</html>
This question already has answers here:
How can I prevent refresh of page when button inside form is clicked?
(16 answers)
Closed 4 years ago.
there have been similar topics posted however none I found solved my problem.
Here's a sample html page with some javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
window.onload = function() {
var fileDlg = document.getElementById('fileDialog');
// this should detect onChange, but not working
fileDlg.onchange = (e) => {
window.alert('Changed: '+e.target.value);//
//document.getElementById('frm_img_upload').submit();
}// eo filedlg.onchange
}//eo window onload
</script>
</head>
<body>
<form id="frm_img_upload" name="frm_img_upload" method="post" enctype="multipart/form-data">
<!-- hidden ugly as hell file input element. Note onChange doesn't happen -->
<input type="file" accept="image/*" name="fileDialog" id="fileDialog" style="opacity:0;" onChange="javascript:alert('Changed');">
<!-- when this little button is clicked, the file dialog is triggered, however theres no onChange -->
<button onClick="document.getElementById('fileDialog').click();" >Pick New Image</button>
</form>
</body>
</html>
The idea was to hide the super-annoying input file type element, and create a button with an onclick, which will click the invisible input. This works fine and dandy, however, once the visitor has selected a file and the dialog closes, I want to submit the form, rather than have another annoying button to press.
The onchange is not firing.
I'm not using jquery for this, just good ol javascript.
Any ideas?
Thanks.
Your button is submitting the form as soon as the dialog closes, since the default is type="submit", so the onchange doesn't get a chance to run.
Change it to type="button" and then you'll see your alert.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
window.onload = function() {
var fileDlg = document.getElementById('fileDialog');
// this should detect onChange, but not working
fileDlg.onchange = (e) => {
window.alert('Changed: '+e.target.value);//
//document.getElementById('frm_img_upload').submit();
}// eo filedlg.onchange
}//eo window onload
</script>
</head>
<body>
<form id="frm_img_upload" name="frm_img_upload" method="post" enctype="multipart/form-data">
<!-- hidden ugly as hell file input element. Note onChange doesn't happen -->
<input type="file" accept="image/*" name="fileDialog" id="fileDialog" style="opacity:0;" onChange="javascript:alert('Changed');">
<!-- when this little button is clicked, the file dialog is triggered, however theres no onChange -->
<button type="button" onClick="document.getElementById('fileDialog').click();" >Pick New Image</button>
</form>
</body>
</html>
In my options page, in my chrome extension, I want to read the user input when the user enters their value and clicks the submit button.
options.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<h1 style="font-family:Raleway;font-weight:200;text-align:center;font-size:50px;color:white;">Themes</h1>
<input type="number" id="day" value="2" class="day">
<button id = "button1">Submit</button>
<script src="options.js"></script>
</body>
</html>
options.js
...
document.getElementById("button1").addEventListener("change", function(e) {
var day = document.getElementById("day").value; // get the current value of the input field.
alert(day);
});
You are listening for change not click.
addEventListener("click", function(){})
You're currently only running your function when the buttons value changes (and since a button has no value, this will never fire)
I'am developing a web-application that allows to select parts of an html document and put some kind of annotation on it.
To get hold of the selected text I use window.getSelection() which works pretty fine in IE9, FF, and Safari.
However I run into trouble when using the same page on my IPad 2:
If I just select a word by tapping it for a sec, window.getSelection() returns the proper selection.
If I create a text range ( as discribed here http://blog.laptopmag.com/how-to-select-copy-and-paste-text-on-the-ipad ) always return "null".
I've already examined the window, document and related event objects - but without success...
Any help would be really appreciated!
Edit: Just a small example. Select a text and press the button. On Safari (PC) the function prints the selected value...
<html>
<body>
<script>
function a()
{
alert(window.getSelection());
}
</script>
Hello World! <input type="button" onclick="a();"
</body>
</html>
Okay finally I've solved the problem: As Tim assumed the click events causes to selection to collapse. I consider this as rather strange behavior as on regular Safari this does not happen.
However, the solution is not to use the click event. Instead of I'm using "vlick" provided by the jquery mobile.
Full working example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
Hello World! <input type="button" id="button1" />
<script>
function a()
{
alert(window.getSelection());
}
$("#button1").bind("vclick",a);
</script>
</body>
</html>
I have an HTML page that opens another page via JavaScript. When a user clicks a button in the other page, I want to post a message in a DIV of the opening page via JQuery. I cannot put my finger on it, but I cannot seem to get this to work. Here is my opener page
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<input type="button" onclick="window.open('dialog.html', '_blank', 'height=200, width=300');" value="launch!" />
<div id="testDiv"></div>
</body>
</html>
When the user clicks the "launch!" button, a dialog will appear. The code for the dialog looks like this:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<input type="button" onclick="updateOpener()" value="Update Opener" />
<script type="text/javascript">
function updateOpener()
{
var testDiv = window.opener.jQuery("#testDiv");
if (testDiv != null) {
alert("here");
testDiv.html("Updated!");
}
}
</script>
</body>
</html>
Surprisingly, the alert box appears. However, I cannot seem to update the HTML of the DIV in my opening page. Does anyone know how to do this?
You're referencing "confirmDiv". Where is that DIV?
You can't do that if the parent page (the opener) resides on another domain. Otherwise, your code works perfectly.
Also, your != null check is probably not doing what you think it is doing, as the jQuery function never returns null. If you are checking for the existence of an element, you need to do it this way...
var el = $("#myElementId");
if(el.length == 0)
alert('Not found!');
Ummm, it works for me in Firefox 3.0.11, IE8 and Chrome 2... (I.e. the dialog.html button updates the HTML in the opener page to say 'Updated!'.)
Oddly, your example works fine for me in Chrome, IE 8 and FireFox. Do you have any other details?