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>
Related
So I have an HTML document with jQuery Mobile and a form element like so:
<head>
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="lib/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script type="text/javascript" src="lib/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<form onsubmit="myFunction()" id="myForm">
<input type="text">
</form>
<button type="submit" form="myForm">Submit</button>
<script>
function myFunction() {
//does somethign with form values
}
</script>
</body>
When the form is submitted, I want JavaScript to handle to field values (through a function called by onsubmit. I don't want to send it over to another document. That is why I have left out the action attribute. However, when I hit submit, jQuery Mobile gives me the following message: "error loading page" (see the picture). What can I do? I need the form to be submitted because I need the form to validate the fields when the button is clicked. That's why I can't just make a button that onclick calls a function that grabs the values of the fields.
Any help is much appreciated!!
Thanks in advance!
You could try preventing the event generated by submitting the form and returning false from js so that the js function gets called but the form does not get submitted
<form onsubmit="myFunction(event)" id="myForm">
<!-- ^^^^^ -> pass the event -->
<input type="text">
</form>
<button type="submit" form="myForm">Submit</button>
<script>
function myFunction(e) {
//^ get the event so we can prevent
e.preventDefault();
//does somethign with form values
return false;
}
</script>
I have a situation where I need to open a new tab to an external site when the user clicks "submit" on a form, and at the same time I need to redirect the original tab to a different page to prevent the user making multiple duplicate requests to the external site.
NOTE: I have protected against this behaviour in the back-end, I just want to use JavaScript to improve the UX where possible, removing the rendering of the option in the first place.
NOTE2: This works in Firefox, but not in Chrome or Safari.
Some example code which illustrates my issue is shown below:
<script type="text/javascript">
function testFunction(){
alert("Executing testFunction()!");
window.location.replace("http://www.google.com");
}
// uncomment this line to show that testFunction() does work when called directly
//testFunction();
</script>
<html>
<head>
<title>JS Redirect Then Post Test</title>
</head>
<body>
<form action="" method="POST" target="_blank">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br><br>
<input type="submit" value="Submit" onclick="testFunction()">
</form>
</body>
</html>
When I click submit, I observe the alert popping up, but the redirect does not execute.
If I uncomment the line which calls testFunction() directly, it works as expected.
How can I get the behaviour I'm looking for?
This is what I managed to come up with after a bit of tinkering around. You can pass the click event from onclick into your handler function. If you let the event happen, it will just submit the form and prevent all following execution, that is why I stopped the original click event with preventDefault and triggered form.submit() programmatically.
Also notice how I wrapped the redirect inside a setTimeout to give time to the submit() to actually happen before the redirect.
<html>
<head>
<script type="text/javascript">
function testFunction(e) {
e.preventDefault();
e.target.parentNode.submit();
alert("Executing testFunction()!");
setTimeout(function() {
document.location.href = "http://www.google.com";
}, 0);
}
// uncomment this line to show that testFunction() does work when called directly
// testFunction();
</script>
<title>JS Redirect Then Post Test</title>
</head>
<body>
<form action="" method="POST" target="_blank">
First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"><br><br>
<input type="submit" value="Submit" onclick="testFunction(event)">
</form>
</body>
</html>
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.
I'm having trouble in displaying my title input only "onclick" event.
When we mouseouver the input box, it will display the title, but i just want this to happen when I click on the input box.
My idea is displaying a title saying "value copied", cause I have a function on "onclick" event that copy the input (read only) value to the clipboard, and when it's done I want to let the user know that this happen displaying that information.
Is that even possible?
(this is for a windows gadget)
Thank you to everyone.
Try .focus()
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>
<script>
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
</script>
</body>
</html>
http://api.jquery.com/focus/
Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.