Firstly, I am sorry to anyone that finds this post more than a little trivial, but I am currently sratching my hair out on, at first sight, is a form posting matter.
I am developing an ASP.NET MVC 6 application which is running perfectly in Chrome and Edge, but recently, I was informed that it would also need to be able to run on IE11.
My issue is when a submit the form.
$("#js-form").on("submit", function (e) {
document.getElementById("DefinitionID-error").style.visibility = "hidden";
document.getElementById("DefinitionID-error").textContent = "<some text>";
document.getElementById("DefinitionID-error").style.visibility = "visible";
}
The code appears to execute in the IE11 debugger, with no error messages, but on screen the original text held in #DefinitionID-error does not change.
The version of IE11 I am using, is the super special version that ships with Windows 10.
Other code I have tried include:
$("#js-form").on("submit", function (e) {
$("#DefinitionID-error").hide();
$("#DefinitionID-error").text("<some text>");
$("#DefinitionID-error").show();
}
$("#js-form").on("submit", function (e) {
$("#DefinitionID-error").html("<span id='DefinitionID-error'>Some text</span>");
}
$("#js-form").on("submit", function (e) {
document.querySelector("#DefinitionID-error").textContent = "<some text>";
}
$("#js-form").on("submit", function (e) {
document.querySelector("#DefinitionID-error").innerHTML = "<span id='DefinitionID-error'>some text</span>";
}
All of these work in Chrome and funnily enough Edge, but not in IE11.
NEW Example that also does not work
$("#js-form").on("submit", function (e) {
$("#DefinitionID-error").hide();
$("#DefinitionID-error").text("Some text");
$("#DefinitionID-error").show();
}
UPDATE
If I take the jQuery code, or the javascript code and run it in the debugger in IE11. it works, so it must have something to do with the submission, maybe.
I made a test with code below on windows 10, Internet Explorer 11. It is working fine on Ie 11.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#clk").click(function(){
$("#js-form").submit();
console.log(222);
});
$("#js-form").on("submit", function (e) {
console.log("start");
$("#DefinitionID-error").hide();
$("#DefinitionID-error").val("Some text");
$("#DefinitionID-error").show();
alert("Form submitted");
});
});
</script>
</head>
<body>
<button id="clk">Click me to submit form</button>
<form id="js-form">
First name:<br>
<input type="text" id="DefinitionID-error" name="DefinitionID-error" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output in IE 11:
Related
I wrote a very quick javascript function to validate a very small form on an internal form used in our office. However, someoner today told me that it doesnt work in Edge, the code does not ever enable the submit button.
I console.log out the var values every time the function runs, and in edge, the vars are forever undefined. It seems like Edge does not respect "document.forms["abc"]["xyz"].value", but I cannot find any documentation or notes to support that.
I should clarify, I am not a javascript pro, I uyse it very sparingly, and in simple ways to get smal tasks done like this, so please dont judge my code too hard, haha.
Console Log:
q1=undefined
q2=undefined
q3=undefined
q4=undefined
My code is below, its pretty simple, nothing fancy..
function fieldcheck(){
var q1=document.forms["datacollect1"]["q1overall"].value;
var q2=document.forms["datacollect1"]["q2understand"].value;
var q3=document.forms["datacollect1"]["q3time"].value;
var q4=document.forms["datacollect1"]["q4recommend"].value;
console.log("q1="+q1+"\n"+"q2="+q2+"\n"+"q3="+q3+"\n"+"q4="+q4);
document.getElementById("datacollectsubmit1").disabled = true;
if (q1 && q2 && q3 && q4){
console.log("q1234 set");
document.getElementById("datacollectsubmit1").disabled = false;
}
}
I call the above on every click with:
document.onclick = function(){
fieldcheck();
}
Anyone have any clue as to why Edge is playing games? Or what I can substiture for document.forms.value that will work across other browsers and Edge too? Thanks.
Your above code is working in MS Edge. Possible that some other code caused this issue. I suggest you to take the code below and run it in MS Edge.
Code:
<!doctype html>
<head>
<script>
function fieldcheck(){
var q1=document.forms["datacollect1"]["q1overall"].value;
var q2=document.forms["datacollect1"]["q2understand"].value;
var q3=document.forms["datacollect1"]["q3time"].value;
var q4=document.forms["datacollect1"]["q4recommend"].value;
console.log("q1="+q1+"\n"+"q2="+q2+"\n"+"q3="+q3+"\n"+"q4="+q4);
document.getElementById("datacollectsubmit1").disabled = true;
if (q1 && q2 && q3 && q4){
console.log("q1234 set");
document.getElementById("datacollectsubmit1").disabled = false;
}
}
document.onclick = function(){
fieldcheck();
}
</script>
</head>
<body>
<form name="datacollect1" onsubmit="return fieldcheck()" method="post">
Name: <input type="text" name="q1overall"><br>
Name1: <input type="text" name="q2understand"><br>
Name2: <input type="text" name="q3time"><br>
Name3: <input type="text" name="q4recommend"><br><br>
<input type="submit" id="datacollectsubmit1" value="Submit">
</form>
</body>
</html>
Output in MS Edge browser:
This code works in Internet Explorer and other browsers but does not work in Mozilla Firefox.
The code prompts the user to enter a password and if the correct password is entered the password protected page should open.
In Mozilla it displays a URL error or blank tab.
I have looked everywhere for an answer to this and tried using clickable links as opposed to a pop up window and that still does not work in Mozilla.
Pop up blocker is disabled, and I have tried safe mode in Mozilla with the same results.
I am also prompted by IE that scripts and ActiveX are restricted and have to enable before it can run.
Thanks in advance.
Code:
<!DOCTYPE html>
<head>
<title>PasswordProtectedPage</title>
</head>
<body>
<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Please enter the password:',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "love") {
window.open('/Users/Madeleine/Documents/moandmaddieindex.html');
break;
}
testV += 1;
var pass1 =
prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<!--Password prompt-->
<CENTER>
<FORM>
<input type="button" value="Enter Protected Area" onClick="passWord()">
</FORM>
</CENTER>
</body>
</html>
Here is how the page runs in IE:
Screenshot
For a few hours I've been trying to understand what's wrong. My purpose is to enable a button after textfields are filled. Code seems fine according to my test at JSFiddle but it's still not working on my server. Am'I missing something or is this a server problem (which is hard to believe since javascript is client-side)?
PS: I'm not expert at HTML, so I don't know how to identate it's syntax; if it's not that readable I'm sorry and would appreciate an edit-help. thanks.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var $input = $('input:text'),
$apply = $('#apply');
$apply.attr('disabled', true);
$input.keyup(function() {
var trigger = false;
$input.each(function() {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
});
</script>
</head>
<body>
<section class="container">
<div class="OpenKore">
<div id="absolute">
<form method="GET" action="generate.php">
<fieldset>
<legend><h1>OpenKore Automatic Config:</h1></legend>
LOGIN:
<p><input type="text" id="id_login" name="login_value" value="" placeholder="Login"></p>
SENHA:
<p><input type="text" id= "id_senha" name="senha_value" value="" placeholder="Senha"></p>
PIN:
<p><input type="text" id="id_pin" name="pin_value" value="" placeholder="PIN"></p>
<input id="apply" type="submit" name="commit" disabled value="Gerar Configurações">
</fieldset>
</form>
</div>
</div>
</section>
</body>
</html>
When the browsers reads your HTML page, it reads top to bottom. When it gets to your <script> tags it runs them. Now it us doing this before it has got to the rest of the page, i.e. before it even knows about any body or form or input:text tags, so even though you code will run, it will simply not do anything because none of the elements on the page exist yet.
JavaScript 101, make the code run after the page has loaded, if you need to access elements on the page. How do you do that? either put the code at the bottom of the page (move your <script> tags to just before the </body> tag), or wrap your code in a function that is executed after the browser has finished loading the page. Now jQuery has a very helpful way of doing this for you, pass a function to jQuery and it will be executed after the page is loaded.
jsFiddle does this automatically for you, hence the drop down in the top left corner saying 'onLoad'
i.e. your code
$(); //this is the jQuery function
//This is your code wrapped in a function called 'yourCode'
function yourCode() {
var $input = $('input:text'),
$apply = $('#apply');
$apply.attr('disabled', true);
$input.keyup(function () {
var trigger = false;
$input.each(function () {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
});
}
$(yourCode); //this is passing the jQuery function a function,
//this will now be execute once the page is loaded
//or what most people do, pass in as an anonymous function
//which eliminates a step
$(function () {
var $input = $('input:text'),
$apply = $('#apply');
$apply.attr('disabled', true);
$input.keyup(function () {
var trigger = false;
$input.each(function () {
if (!$(this).val()) {
trigger = true;
}
});
trigger ? $apply.attr('disabled', true) : $apply.removeAttr('disabled');
});
});
as suggested by #j08691 I would suggest reading about the document ready in jQuery here
I am following a JavaScript tutorial on the W3Schools website and I have the following code:
<html>
<head>
<title>Hello!</title>
</head>
<body>
<script type="text/javascript">
function confirmShow
{
var r = confirm("Press one...")
if (r == true)
{
alert("Button pressed == OK")
}
if (r == false)
{
alert("Button pressed == Cancel")
}
}
</script>
<input type="button" onclick="confirmShow()" value="Show Confirm Box" />
</body>
</html>
and whenever I preview it in Coda or in Safari the alert never shows up.
Thanks in advance!
"function confirmShow" => "function confirmShow()"
Firebug is good for js debugging, try it. Safari has options too, AFAIK.
function confirmShow
{
function confirmShow()
{
?
I don't know if this is your problem, but your button is outside the <body> tag. That might cause you some trouble...
Also one would usually put a script like this in the <head> element. Just FYI.
1) w3schools is filled with errors and omissions. Better tutorials can be found at howtocreate.co.uk
2) You have no DOCTYPE declaration, and you're using XHTML syntax.
2.1) IE doesn't support true, see webdevout.net/articles/beware-of-xhtml for more information
3) You need to encapsulate the within a element as well as another block-level element as per the specification
See below for a proper HTML5 document. Notice the location and syntax
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<script>
function confirmBox() {
var ret = confirm('Some Text');
/*
Note the 3 equal signs. This is a strict comparison operator, to check both the 'value' as well as the type. see https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators for more
*/
if(ret === true) {
alert('Alert box for "Okay" value');
}
else if(ret === false) {
alert('Alert box for "Cancel" value');
}
}
window.onload = function() {
// Execute the confirmBox function once the 'button' is pressed.
document.getElementById('confirmBox').onclick = confirmBox;
}
</script>
</head>
<body>
<form>
<p>
<input type="button" id='confirmBox' value="Show Confirm Box">
</p>
</form>
</body>
</html>
I'm trying to subscribe to change events on an input tag for an ajax auto complete form. These change events are not firing when the user clicks an autocomplete suggestion from FireFox.
I've seen fixes for IE, but not FireFox. You can view this behavior here
Steps to recreate:
type any input in one of the boxes and click submit.
Start typing the value again in the same box.
You should see the autocomplete suggestion box appear below the input box. Notice that clicking the suggestion does not fire the change event (it also doesn't fire the click event)
Currently my only option is to disable autocomplete on this field, but I do not want to do that.
Firefox 4+ fire 'oninput' event when autocomplete is used.
Here's some jQuery to make this more actionable:
$('#password').bind('input', function(){ /* your code */});
I've had the same problem.
Apparently, there is password manager debugging available
https://wiki.mozilla.org/Firefox:Password_Manager_Debugging
So I've found that for me DOMAutoComplete event got triggered and
I've managed to attach it sucessfuly to a field via jQuery's bind like
$('#email').bind('DOMAutoComplete',function() { ...
If it makes you feel better, it is a known bug
Proposed workaround: (Not mine, from here
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mozilla Firefox Problem</title>
<script type="text/javascript">
function fOnChange()
{
alert('OnChange Fired');
}
var val_textBox;
function fOnFocus()
{
val_textBox = document.getElementById('textBox').value;
}
function fOnBlur()
{
if (val_textBox != document.getElementById('textBox').value) {
fOnChange();
}
}
</script>
</head>
<body>
<form name="frm">
<table>
<tr>
<td><input type="text" id="textBox" name="textBox" onFocus="fOnFocus()" onBlur="fOnBlur()"></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</form>
</body>
</html>
Another Suggested work around. This time using polling, you can work it in exactly
the same way, checking for "changes" to your field. Tweak the poll value (default to
375ms for your own taste).
I've used jQuery and a jquery plugin someone wrote:
https://github.com/cowboy/jquery-dotimeout/
Git Hub Src: https://raw.github.com/cowboy/jquery-dotimeout/master/jquery.ba-dotimeout.js
<html>
<head>
<meta charset="utf-8">
<title>onChange() for Firefox / IE autofil get-around</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/~dsloan/js/ba-dotimeout.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var val;
var count=0; // used to illustrate the "poll count"
// when focusing on the element and typing
// (vs not focused)
// set a focus function to poll the input
$("#myname").focus(function() {
// start polling
$.doTimeout('checkname', 375, function() {
++count;
// no changes, just exit this poll
if($("#myname").val() == val) {
return true;
// store the value
} else {
val = $("#myname").val();
}
var str;
// do stuff here with your field....
if($(document.activeElement) &&
($(document.activeElement).attr('id') ==
$("#myname").attr('id'))) {
var len = $("#myname").val().length;
if(len == 0) {
str = 'Timer called, length 0...';
} else if(len < 2) {
str = 'Timer called, length < 2...';
} else {
str = 'Timer called, valid!';
}
}
// show some debugging...
$("#foo span").html(str+' (count: '+count+'): '+
$(document.activeElement).attr('id')+
', val: '+$("#myname").val());
return true;
});
});
// set a blur function to remove the poll
$("#myname").blur(function() {
$.doTimeout('checkname');
});
});
</script>
</head>
<body>
<form action="#" method=post>
Name: <input type="text" name="name" value="" id="myname" />
Scooby: <input name="scooby" value="" id="scooby" />
<input type="submit" value="Press Me!" />
</form>
<div id="foo"><span></span></div>
</body>
</html>
A possibly alternative: could you simply use a timer to tell when the value of the text box changes?
You're going to have to blur the input field and reset the focus to it. That's going to require a little trickeration though.