I happened to notice that my multiple select dropdowns are getting reset when I call the window.print() function on the click of a button to print the current page.
This seems to have been working on Chrome v80 but it seems the issue is part of v81.
I am using a workaround for this by displaying values in an input box (rather than the multiple select tag) on the print button click. I was wondering if there is a better solution to the issue.
A sample code is given below: Selected option values are retained in Chrome v80 but not on v81 when the print button is clicked.
<html>
<head>
<script>
function printPage(){
window.print();
}
</script>
</head>
<body>
<select id="test" name="test" multiple>
<option value="1">My val 1</option>
<option value="2" selected>My val 2</option>
<option value="3">My val 3</option>
<option value="4" selected>My val 4</option>
<option value="5">My val 5</option>
</select>
<input type="button" value="print" onclick="printPage()"/>
</body>
</html>
Is your issue that the elements do not appear selected in the printout, or that after pressing print, the page forgets what was selected and the user must select them again? If it is just about appearing in the printout, it is possible you have "background graphics" unchecked in the "more options" section of the print dialog
Related
I have a html form page(page 1) from where I go to page 2 html page. In page 1 I have fields such as Resolution, on selecting particular resolution populates fields such as frame-width and height(with value) which is loaded using Jquery and is disabled (just to show) Similarly I have cascaded drop-downs. On submission of this form I get the results on the same page. Also I have given option to display the output on new page. But when I get back to the previous page from new page. Jquery Elements are not loaded. Only static elements in form are loaded. Resolution stays but frame width and frame-height is not loaded. Also output on same page is also gone. How can I get to previous page as per my submission made. I am using Django in Back-end.
Index.html
<p><label>Resolution:</label>
<select id="resol" name="resol" class="ip" autocomplete="off">
<option disabled selected value> -- select an option -- </option>
<option value="2K">2K</option>
<option value="4KDCI">4KDCI</option>
<option value="4KUHD">4KUHD</option>
<option value="480p">480p</option>
<option value="576p">576p</option>
<option value="720p">720p</option>
<option value="1080p">1080p</option>
<option value="CIF">CIF</option>
<option value="FWVGA">FWVGA</option>
<option value="HVGA">HVGA</option>
<option value="QCIF">QCIF</option>
<option value="QVGA">QVGA</option>
<option value="VGA">VGA</option>
<option value="WVGA">WVGA</option>
<option value="other">other</option>
<option value="all">All</option>
</select>
</p>
<p><label>Frame-width:</label>
<input type="text" id="fw" name="fw" class="ip" style='visibility:hidden;' autocomplete="off">
</p>
<p><label>Frame-height:</label>
<input type="text" id="fh" name="fh" class="ip" style='visibility:hidden;' autocomplete="off">
</p>
Jquery to display
$('#resol').change(function () {
var value = $(this).val();
//history.pushState(null,null,"#resolution");
if(value=='2K'){
$('#fw').css('visibility','visible').attr("disabled", "disabled").val(2048);
$('#fh').css('visibility','visible').attr("disabled", "disabled").val(1080);
}
else if(value=='4KDCI'){
$('#fw').css('visibility','visible').attr("disabled", "disabled").val(4096);
$('#fh').css('visibility','visible').attr("disabled", "disabled").val(2160);
}
else if(value=='4KUHD'){
$('#fw').css('visibility','visible').attr("disabled", "disabled").val(3840);
$('#fh').css('visibility','visible').attr("disabled", "disabled").val(2160);
}
and so on..
new_page.html
//Displays the videos with these resolution in new page..
returning from new-page to Index.html loads the resolution selected but textBox displaying frame-width and frame-height is gone. How to store/display those values.. I am using Django in Backend.
I have a website and I want to include 2 drop down boxes. The values in the second drop down box depend on the first.
For instance if option A in drop down 1 is chosen then the available choices in dropdown box 2 would be 1,2,3
And if option 2 is chosen then drop down box 2 will show 5,6,7.
I've tried using JavaScript to receive the result of the first box as an argument and then use an 'if statement' to select what array of answers should be used by drop box 2 however this has been to no avail
''' I don't have any reasonable code to show '''
From what I've tried I can receive the index of the first drop down box choice however I cannot get the second box to show my array for that choice
<html>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<select id="ddl1">
<option selected value="1">A</option>
<option value="2">B</option>
</select>
<select id="ddl2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
<script>
$("#ddl1").change(function(){
$('#ddl2 option').remove();
if($("#ddl1 option:selected").val()==1){
$('#ddl2').append('<option value="1">1</option>');
$('#ddl2').append('<option value="2">2</option>');
$('#ddl2').append('<option value="3">3</option>');
}
else if($("#ddl1 option:selected").val()==2){
$('#ddl2').append('<option value="5">5</option>');
$('#ddl2').append('<option value="6">6</option>');
$('#ddl2').append('<option value="7">7</option>');
}
});
</script>
</html>
i have a select field and use onclick event to call a JS function.
<select size="6" name="Network" id ="Network" style="width: 255px;" onclick="javascript: Ajax_Show_Info();" onselect="javascript: Ajax_Show_WiFiInfo();" />
<option value="1"> Option 1</option>
<option value="1"> Option 2</option>
<option value="1"> Option 3</option>
</select>
On PC everything works fine. On my mobile phone Ajax_Show_Info() is called when I select the next option. For example wehn I click option 1, nothing happens, when I click on option 2 the function Ajax_Show_Info() is called but for option 2 etc.
Is there an event which would work on mobile device? Onselect doens't also works.
Did you try onchange event? It will call the function each time the option value gets changed. Also notice that you have kept values for all options same.
<select size="6" name="Network" id ="Network" style="width: 255px;" onchange="Ajax_Show_Info();">
<option value="1"> Option 1</option>
<option value="2"> Option 2</option>
<option value="3"> Option 3</option>
</select>
Did you try to use other events?
For example: oninput?
Here is the complete events list for select object:
http://www.w3schools.com/tags/ref_eventattributes.asp
I have a simple drop-down box and I am successfully using Javascript to automatically fill a textbox when a drop-down item is selected.
Once I edit any of the textbox's automatically filled text, or use a "Clear" button to erase textbox, the drop-down list no longer replaces fills the textbox.
How can I continue to use the drop-down box once the user has altered the textbox?
JSFiddle Version
HTML code:
<select id="dropdown" onchange="preset();">
<option value="">Select a person:</option>
<option value="Abe" >Abe</option>
<option value="Bob" >Bob</option>
<option value="Cal" >Cal</option>
<option value="Dan" >Dan</option>
</select>
<input type=Submit value="Clear" onclick="document.getElementById('mytext').value='';">
<textarea id="mytext"></textarea>
Javascript code:
function preset() {
document.getElementById("mytext").innerHTML=document.getElementById("dropdown").value
}
You use innerHTML in one place, and value in another. Using value in both fixes it.
Demo
Update the submit button to this:
<input type=Submit value="Clear" onclick="document.getElementById('mytext').innerHTML='';">
Imagine this HTML code
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function clear_form() {
$("select#block_id").find("option").removeAttr("selected");
}
</script>
</head>
<body>
<form>
<select id="block_id" name="block_id">
<option value=""></option>
<option value="1">1 Peach Road</option>
<option value="2" selected="selected">Bethnal Green Estate</option>
<option value="3">Ley Street</option>
<option value="4">Ogilby Street</option>
</select>
<input type="reset" onclick="clear_form()" value="Clear"/>
<input type="submit"/>
</form>
</html>
When you open this page in Firefox pressing a Clear button will reset selected option.
But this doesn't work in IE, browser will not raise any errors but do nothing selected option still shown.
Problem is because we have 'option value="2" selected="selected"' html code and looks like IE won't clear this selection it always appear on page.
It will be great to get native javascript or jQuery 1.5.2 solution.
Any suggestions?
You could use JavaScript to reset the select to point to its first option element.
With jQuery...
$('#block_id').prop('selectedIndex', 0);
Without...
document.getElementById('block_id').selectedIndex = 0;
Seems like Reset button is reason why it is restoring the value in IE.
A reset button resets all form fields to their initial values
In your case option 2 was initially selected and so the value is retained.
Change the button type to button instead of reset
Change the clear function as in Alex post.
document.getElementById('block_id').selectedIndex = 0;