This query of adding extra fields by add button is working on Google chrome, but not in Internet explorer. Please help me to work it out in IE 11.
<html>
<head>
<script>
function add_field()
{
var form = document.getElementsByTagName('form')[0],
input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', 'item');
form.appendChild(input);
};
</script>
<form name="input" method="get">
<div class="ui-input-text">
<input type="text" name="item"><br>
<div data-role="navbar">
<button type="button" onclick="add_field
()">ADD</button><br>
</div>
</div>
</form>
</body>
</html>
In my experience, internet explorers (of various versions) have issues assigning the "name" attribute to elements. I found the following custom method works for anything:
Element.prototype.customAttribute=function(customname, customvalue){
var z=document.createAttribute(customname);
z.value=customvalue;
this.setAttributeNode(z);
}
The script is working fine, although you need to allow it to run scripts on the site. Internet Explorer will block the script until the user confirm that he/she wants it to run.
internet explorer prevented this webpage from running scripts or activex controls
I used Internet Explorer 11 on Windows 7 64-bit. No errors occurred and everything functioned.
Related
I have a requirement where I have 6 read only html textbox and I need to set the placeholder dynamically using JQuery . The method I have used works fine in Chrome but doesn't work on IE 11.
$(".textBox").attr("placeholder", "Please Select Items");
Above should be the default placeholder and upon selection of multiple select elements the count should be updated which I have written as below
$('.textBox').attr('placeholder',TempArray.length + " Items selected");
I have searched for the similar questions but does not seem to the relevant to my problem. Is there any alternative method in JQuery which can resolve the issue. Thanks in advance
I tried below code in IE 11. Its works fine.
<input type="text" id="add_placeholder" placeholder="please select" readonly></input>
<button id="click">Click me</button>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script>
$('#click').click(function(){
$('#add_placeholder').attr('placeholder','name is inserted');
});
</script>
https://jsfiddle.net/ev4rg8ed/
I have a piece of code like this:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/><title>t</title></head>
<body>
<form id="F1">
<script>
function doit()
{
if(!F1.checkValidity())return;
alert("ID="+FName.value); //Do some processing
}
</script>
Enter your name: <input ID="FName" pattern="[a-zA-Z]+" required ><br />
<p><button OnClick="doit()"> DO IT</button></p>
</form>
</body>
</html>
It gets some input and validates it before processing data. According to https://validator.w3.org/check it does conform with HTML5. And It works fine in Firefox and Chrome, but not in IExplorer 11. It says ERROR SCRIPT 5009 "FName is undefined". However if I remove the form tag, FName becomes defined. But then I could not check the form validity.
I wonder if this is a IExplorer bug and how could I fix it. Thanks!
The input is a child of the form rather than the document.
I was able to duplicate the problem in IE. I solved it by referencing the element as F1.FName, i.e., as a child of the form element. And this worked in IE, Chrome, and Firefox. I suppose this is the expected behavior rather than a problem, but was unable to find a supporting reference.
if(!F1.checkValidity())return;
alert("ID="+F1.FName.value); //Do some processing
I am not sure if this is a bug in Chrome but for some reason when I use a html 5 range input I cannot deselect it. Even when I move my cursor away and let go of the button on mouse the slider continues to follow mouse movement and I cannot set the slider value. Even if I tab to the next input I still have this issue
This example is from W3Schools. I tried it on my android device and I don't have this same issue. Is there any workarounds, I specifically need to ensure it works with Angularjs.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Points: 0<input type="range" name="points" min="1" max="10">10
<input type="submit">
</form>
<p><b>Note:</b> type="range" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
This Behaviour was as result of a Chrome Extension Dictionary Bubble: Instant Dictionary, Once I disabled it the Slider functioned as expected
I have an MVC3 C# .Net web app. I am firing a javaScript method of a submit button on the onclick event. It works just fine in Firefox, I see the confirm box, but not in IE 8. In IE it is always returning true and not showing the confrim box. Here is the javascript:
<script type="text/javascript">
function DoCopy() {
return confirm(($("#myField").val().contains(";" + $("#myOtherField").val() + ";")));
}
</script>
Here is the button:
<input type="submit" id="thePageSubmit" name="Command" value="Save" onclick="return DoCopy();" />
I am using jQuery but even when I use straight javaScript (document.forms[0].elements["myField"]) it works in Firefox but not IE. Any ideas?
I found the answer at this link: It's not compatible in IE
string.contains
i am trying to change an input type hidden into input type file onclick of a button. the code is working fine on mozilla firefox and internet explorer, but it is not working on Google Chrome and Safari browsers. The following is my code:
<script type="text/javascript">
function hide()
{
$(document).ready(function()
{
$('#att').hide();
$('#change').hide();
$('#change1').hide();
document.getElementById('fileatt').type='file';
})
}
<input type="text" name="att" value="<?php echo $name; ?>" id="att" disabled="disabled" size="12" style="float:left;">
<input name="fileatt" id="fileatt" type="hidden" size="12" style="float:left;">
<input type="button" name="browse" id="change" value="Browse" style="float:left;">
<input type="button" id="change1" value="Change" onclick="hide()">
The disabled text box holds a previous value taken from a database. And the button with value "Browse" is added to give it a look of input type file. on clicking the Change button, i want the text field and browse button to be hidden and the input type file to appear. Everything is working fine on Firefox and Internet Explorer. But the problem im facing is that on Chrome and Safari, the text box and browse button disappears successfully, but the input type file does not appear.
You can't change the type of an input, so this is invalid code:
document.getElementById('fileatt').type='file';
Use two elements, hide one and show the other, toggle them.
Read more here:
change type of input field with jQuery
Try something like:
function hide()
{
$(document).ready(function()
{
$('#att').hide();
$('#change').hide();
$('#change1').hide();
$('#fileatt').attr('type', 'file'); //document.getElementById('fileatt').type='file';
})
}
try this
$('#fileatt').attr('type', 'file');
in place of
document.getElementById('fileatt').type='file';