How to make href will work on button in IE8 - html

I want href will work on type="button"in IE8.
<input type="button" value="Submit" class="button" />
Other browser working fine but on IE8 the code above not working. How to fix it?
Update
<form action="submit.php" method="post"">
<input type="submit" value="Submit" class="button" />
</form>
I know this way can be done. But I want to know other ways how to make it work on IE8 without to have the <form></form>


onclick="window.location=this.parentNode.href;"/>
this.parentNode can refer to a tag so... it should work or test getAttribute even


why not use
<form action="submit.php" method="get">
<input type="button" value="Submit" class="button" />
</form>
?


I used to be all happy that IE8 was not IE6. But seriously.
I'm using jQuery to patch up any button tag within an <a> link tag, inside conditional tags so it's just for old IEs.
<!--[if lt IE 9]>
<script type="text/javascript">
// IE8 is the new IE6. Patch up http://stackoverflow.com/questions/2949910/how-to-make-href-will-work-on-button-in-ie8
$('button').click(function(){
document.location = $(this).parents('a').first().prop('href');
});
</script>
<![endif]-->

Related

why does the accept attribute not filter the types specified in this example in chrome and firefox?

I have a web form where i have a file input with accept attribute but the filebrowser doesn't filter the files by the mimetype specified.
I tested on chrome and firefox browser on windows 10.
Here you can see a code example:
<html>
<body>
<form>
<!-- Pdf works fine -->
<input type="file" name="pdf" accept="application/pdf">
<!-- Zip doen't work -->
<input type="file" name="zip" accept="application/zip">
<input type="submit">
</form>
</body>
</html>

Regarding img src

I 'd like to understand how the following piece of code works
<!DOCTYPE html>
<head>
<title>Title</Title>
</head>
<body>
<form method="POST" action="/link" >
<div id="form1" >
<input type="file" class = "btn btn-danger">
<img id="pic" src="#" alt="HTML5 Icon" >
</div>
<input type="submit" name="submit" value="Submit" class = "btn btn-info">
</form>
</body>
</html>
I am trying to render images when using a file upload handler and apparently at this point the code breaks. It seems to have the effect of reloading the page again and again.

The question is similar to one already asked in stackoverflow.
[<img src="#"> Means in HTML?
I think that the "#" attribute was calling the url again and set up a sort of infinte loop that was resulting in the multiple post requests to the server.
Anyways, got the code to work by using a default image filename instead of the "#"

Date picker html5 tag is not working on Mozilla, IE browsers. But its working only on Chrome

I am trying to use HTML 5 Date picker tag in my website. But this tag is not supporting on Mozilla & IE. Can you please share me any hack to work this code in IE and Mozilla.
I want to use only HTML5. i don't want to go for JavaScript.

Date is only supported in Chrome, Opera, Safari and Android Browser 4.4+
http://beta.caniuse.com/#search=date

You can user jQuery date picker in case of Mozilla: Check the browser using $.browser.mozilla but it will not work in jQuery>1.9, so you have to use jQuery Migration as shown below:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>//jQuery migration
<script>
if ($.browser.mozilla)
{
if ($('.datepicker')[0].type != 'date') $('.datepicker').datepicker();
$(function () {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "1900:2015",
dateFormat: "yy-mm-dd",
defaultDate: '1900-01-01'
});
});
}
</script>

Yes DatePicker tag of HTML5 is not supported by Mozilla Firefox. But you can use DatePicker in your website by adding few .js files.
Below is my fiddle using some .js files. this code work properly on Chrome as well as Mozilla.
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Your Selected date Is : <input type="text" id="datepicker"></p>
http://jsfiddle.net/Vq65z/504/

1st, to answer the OP, what the asker is asking to do is impossible. Javascript is required. 2nd, although webshim looks great, it works horribly with bootstrap. For that you'll want to use http://eonasdan.github.io/bootstrap-datetimepicker/

Dont forget doctype like this:
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
Firefox and mozilla does not not supporting Date-HTML5 ! It will support soon.
But it will work smoothly on Google-Chrome, Opera and Safari

Simply use a datepicker polyfill. here is a demo.
<script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//webshim.setOptions('basePath', '/js-webshim/minified/shims/');
//request the features you need:
webshim.polyfill('es5 mediaelement forms');
$(function(){
// use all implemented API-features on DOM-ready
});
</script>
<input type="date" />

How to get iframe images to print as part of full document in IE

I have two IFRAMEs. Each IFRAME is loaded dynamically as the result of submitting a FORM. The result of each FORM submit is a dynamically generated jpeg image (Content-type: image/jpeg). The following page displays correctly (you can see both images). If you try to print this page in IE however, you just get an outline of the images, but not the actual images. It prints correctly in Safari and Chrome. How can you get the IFRAME images to print along with the rest of the document in IE?
I am using IE 9.0.8112.16421.
<HTML>
<HEAD>
<TITLE>View Image</TITLE>
</HEAD>
<BODY onLoad="top.document.Form1.submit();top.docment.Form2.submit();">
<FORM NAME=Form1 ACTION="URL" METHOD=POST Target=Img1>
<INPUT TYPE=HIDDEN NAME=ID VALUE=123>
<INPUT TYPE=HIDDEN NAME=Cmd VALUE=DispImage1>
</FORM>
<FORM NAME=Form2 ACTION="URL" METHOD=POST Target=Img2>
<INPUT TYPE=HIDDEN NAME=ID VALUE=345>
<INPUT TYPE=HIDDEN NAME=Cmd VALUE=DispImage2>
</FORM>
<IFRAME NAME=Img1 SRC=Javascript:'' WIDTH=500 HEIGHT=250 FRAMEBORDER=0 SCROLLING=no>
</IFRAME><BR>
<IFRAME NAME=Img2 SRC=Javascript:'' WIDTH=500 HEIGHT=250 FRAMEBORDER=0 SCROLLING=no>
</IFRAME>
</BODY>
</HTML>

IE9 form= attribute not working

I have multiple forms on a complex page with fields separated by considerable intervening HTML. In firefox and chrome, I can declare a form and close it, then put a form="xxx" attribute in the fields to be associated with the form. This does not appear to work in IE9.
Here is a simplified example:
<?php
if (isset($_POST["field1"])) echo "Field1: " . $_POST["field1"] . "<br>";
if (isset($_POST["Btn1"])) echo "Btn1: " . $_POST["Btn1"] . "<br>";
if (isset($_POST["Btn2"])) echo "Btn2: " . $_POST["Btn2"] . "<br>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link rel="stylesheet" href="css/normalize.css" media="all">
<!--[if lt IE 9]>
<script src="js/html5shiv-printshiv.js" media="all"></script>
<![endif]-->
</head>
<body>
<form id="form1" action="Test.php" method="POST"></form>
<input type="text" form="form1" id="field1" name="field1" value="text input">
<button type="submit" form="form1" id="Btn1" name="Btn1" value="Btn1" title="Btn1">
Btn1</button>
<input type="submit" form="form1" id="Btn2" name="Btn2" value="Btn2" title="Btn2">
</body>
</html>
I have tried adding
< meta http-equiv="X-UA-Compatible" content="IE=9" >
... no change.
... anybody else run across this "feature" and how do I fix it?

There does not seem to be any information about support to the form attribute in Microsoft’s info on support to HTML5 forms. A quick test suggests that even IE 10 does not support it.
So consider simplifying the structure. Intervening HTML should not be a problem, as long as your are not trying to overlap or nest forms.

The form attribute is an HTML5 addition. It won't work in browsers too old to support HTML5.

You need to close the form tag after the fields, it should look like this:
<form id="form1" action="Test.php" method="POST">
<input type="text" form="form1" id="field1" name="field1" value="text input">
<button type="submit" form="form1" id="Btn1" name="Btn1" value="Btn1" title="Btn1">
Btn1</button>
<input type="submit" form="form1" id="Btn2" name="Btn2" value="Btn2" title="Btn2">
</form>
Add also labels to each field to make the form accessible.