While taking pring textbox also coming in print page and its look like bad UI. how can i remove that textbox and show only the text entered value.
Please find the image. How can I resolve this issue. I want to show only the text what I have entered in the textbox. Please help me how can I resolve this issue.
jsfiddle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function PrintDiv() {
var contents = document.getElementById("dvContents").innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}
</script>
</head>
<body>
<form id="form1">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">ASPSnippets.com
Sample page</span>
<hr />
<div id="dvContents" style="border: 1px dotted black; padding: 5px; width: 300px">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #18B5F0">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
<input type="text" class="input printText" value="test">
</div>
<br />
<input type="button" onclick="PrintDiv();" value="Print" />
</form>
</body>
</html>
please add some class to wanted input .printText:
<td width="267">Policy <br/>Number: <input type="text" class="input printText" size="30"></td>
in css hide the border of input
#media print
{
#non-printable { display: none!important; }
#printable { display: block; }
.printText{border:none!important;}
}
Add a custom class to that input, let's say print-hidden and Apply css to it using #media like this
#media print {
.print-hidden {
display: none;
}
}
Related
I have just started learning Javascript & i cant figure out why this code wont work, the submit button wont display any results.
I want to try the task in my way & not in any of the ways listed online as we havent learnt how to do that yet.
I think this is a very efficient method which does not include any prompts or alerts.
<!DOCTYPE html>
<html>
<head>
<title>Basic Task 2</title>
<style>
h1 {font-family:serif; font-size:48px; color:#ff00ff; text-align:center}
h2 {font-family:sans-serif; font-size:36px; color:#0000ff; text-align:center}
h3 {font-family:sans-serif; font-size:24px; color:#00ffff; text-align: center}
</style>
</head>
<body>
<div align="center">
<h1 id="type1">Checking whether a number is odd or even</h1>
<h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="numtype" action="/action_page.php" style="font-size: 24px">
<input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number"> <br><br>
<input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">
<script>
function myFunction() {
var num=document.getElementById('ooe').value
if ( num % 2 == 0 )
document.getElementById('type2')("Entered number is even");
else
document.getElementById('type2')("Entered number is odd");
}
</script>
<h2 id="type2"></h2>
</body>
</html>
You need to use .textContent to display the results. You are not displaying any message on your submit click event.
You can read more about .textContent on JS MDN reference
Run snippet below to see in it working.
function myFunction() {
var num = document.getElementById('ooe').value
if (num % 2 == 0)
document.getElementById('type2').textContent = "Entered number is even";
else
document.getElementById('type2').textContent = "Entered number is odd";
}
h1 {
font-family: serif;
font-size: 48px;
color: #ff00ff;
text-align: center
}
h2 {
font-family: sans-serif;
font-size: 36px;
color: #0000ff;
text-align: center
}
h3 {
font-family: sans-serif;
font-size: 24px;
color: #00ffff;
text-align: center
}
<html>
<head>
<title>Basic Task 2</title>
</head>
<body>
<div align="center">
<h1 id="type1">Checking whether a number is odd or even</h1>
<h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="numtype" action="" style="font-size: 24px">
<input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number"> <br><br>
<input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">
<h2 id="type2"></h2>
Your problem is in document.getElementById('type2')("Entered number is even"); you need to use .textContent
<!DOCTYPE html>
<html>
<head>
<title>Basic Task 2</title>
<style>
h1 {font-family:serif; font-size:48px; color:#ff00ff; text-align:center}
h2 {font-family:sans-serif; font-size:36px; color:#0000ff; text-align:center}
h3 {font-family:sans-serif; font-size:24px; color:#00ffff; text-align: center}
</style>
</head>
<body>
<div align="center">
<h1 id="type1">Checking whether a number is odd or even</h1>
<h3 id="type3"></h3>
</div>
<h2>Enter number</h2>
<form id="numtype" action="/action_page.php" style="font-size: 24px">
<input id="ooe" type="number" name="num" style="font-size: 24px" placeholder="Enter number"> <br><br>
<input type="button" onclick="myFunction()" value="Submit" style="font-size: 24px">
<script>
function myFunction() {
var num = document.getElementById('ooe').value
if ( num % 2 == 0 )
document.getElementById('type2').textContent = "Entered number is even" ;
else
document.getElementById('type2').textContent = "Entered number is odd";
}
</script>
<h2 id="type2"></h2>
</body>
</html>
I want to take all the HTML from a div container, to put it in a value in hidden field and then to show it to the users with the same CSS style but without textareas tags.
Instead of textareas, I want to show the value which came from the text fields (textarea)! So far so good!
But when a change the information in textareas my javascript code do not take the new information from that field.
What is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<?php
if(isset($_POST['save'])){
$scrita = $_POST['hid'];
$scritaInsert = strip_tags($scrita, '<p><n><nz><font><bl><br><r><chh>');
echo $scritaInsert;
exit; //just for the test
}
?>
<form method="POST">
<input type="submit" name="save" class="btn-style" value="Save" id="submitContainer"/>
<input type="hidden" name="hid" id="hid"/>
</form>
<div id="container">
<p style="text-align: center;font-weight: bold;font-size: 23px;color: black;">CocaCola</p>
<p style="text-align: center; color: black; font-size:16px; text-decoration: underline;">
The address
</p>
<p style="font-weight: bold; color: black;">
To: <textarea name="do" style="width: 920px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
</p>
<p style="font-weight: bold; color: black;">
Attention: <textarea name="vnimanieto" style="width: 830px; max-width: 100%; height: 18px;">CocaCola Company</textarea>
</p>
<p style="text-align: center;font-weight: bold;font-size: 19px;color: black;">
CONTRACT<br>
<n style="text-align: center;font-size: 16px;color: black;">
For transport
</n><br>
<nz style="text-align: center;">№<textarea name="nomer" style="width: 60px; max-width: 100%; height: 18px;">1737</textarea>
Date:<textarea name="date" style="width: 90px; max-width: 100%; height: 18px;" id="date">25.05.2016</textarea>
</nz>
</p>
</div>
</body>
</html>
<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
var content = $('#container').html();
$('#hid').val(content);
});
</script>
I think your problem could be the type of html slashes:
Try:
String.prototype.stripSlashes = function(){
return this.replace(/\\(.)/mg, "$1");
}
$('#submitContainer').click(function(){
$('.picker').html('');
var content = $('#container').html();
$('#hid').val(content.stripSlashes());
});
I have changed my JavaScript to the following code and it's now working properly:
<script type="text/javascript">
$('#submitContainer').click(function(){
$('.picker').html('');
$("textarea").each(function() {
$(this).text($(this).val());
});
var content = $('#container').html();
$('#hid').val(content);
});
</script>
I think you should be using the method text() not html(), because html() will just copy all the text including the HTML tag, but text() will only copy the real text.
Check out this fiddle.
I'm trying to make a list that allows a user to submit issues. Im using knockout and i can get it to do exactly what i wanted it to do but when i try to debug in microsoft visual studios it does not work they way I want it to. When I debug, the page opens the same as in the fiddle except the "test issue" is missing from the issue list. Also you can type in the add issue text box but when you hit submit it clears and does not add to the issue list
I was told I needed to add an onready, but im still new to learning how to code and am unsure of
A.How to do it
B. Where to put it
Here is my fiddle
http://jsfiddle.net/grahamwalsh/rCB9V/
and here is my code
IssueList ( html )
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Issue List</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Issuelist.js"></script>
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" />
</head>
<body>
<div class='issuelist'>
<form data-bind="submit:addIssue">
Add Issue: <input type="text" data-bind='value:issueToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: issueToAdd().length > 0">Add</button>
</form>
<p>Your Issues:</p>
<select multiple="multiple" height="5" data-bind="options:allIssues, selectedOptions:selectedIssues"> </select>
<div>
<button data-bind="click: removeSelected, enable: selectedIssues().length > 0">Remove</button>
<button data-bind="click: sortIssues, enable: allIssues().length > 1">Sort</button>
</div>
</div>
</body>
</html>
Css
body { font-family: arial; font-size: 14px; }
.issuelist { padding: 1em; background-color: #87CEEB; border: 1px solid #CCC; max-width: 655px; }
.issuelist input { font-family: Arial; }
.issuelist b { font-weight: bold; }
.issuelist p { margin-top: 0.9em; margin-bottom: 0.9em; }
.issuelist select[multiple] { width: 100%; height: 8em; }
.issuelist h2 { margin-top: 0.4em; }
js
var Issuelist = function () {
this.issueToAdd = ko.observable("");
this.allIssues = ko.observableArray(["test"]);
this.selectedIssues = ko.observableArray(["test"]);
this.addIssue = function () {
if ((this.issueToAdd() != "") && (this.allIssues.indexOf(this.issueToAdd()) < 0))
this.allIssues.push(this.issueToAdd());
this.issueToAdd("");
};
this.removeSelected = function () {
this.allIssues.removeAll(this.selectedIssues());
this.selectedIssues([]);
};
this.sortIssues = function () {
this.allIssues.sort();
};
};
ko.applyBindings(new Issuelist());
To run a function when the page is ready using jQuery:
$(document).ready(function(){
//Code goes here
}
My codes belows works in Chrome and IE, but doesn't work in Firefox.
I'm using JQuery to open a popup div form on clicking a Bad Data? to send an email.
In Chrome and IE, it does open the popup div form, but in Firefox it don't.
Please kindly help.
Thank you very much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Process Detail</title>
<link href="baf.css" rel="stylesheet" type="text/css" />
<!-- Email CSSs and Javascripts - Start -->
<link rel="stylesheet" href="..\js\jquery-ui-1.10.4.custom\development-bundle\themes\ui-lightness\jquery-ui.css">
<style>
.font62Percent { font-size: 80%; }
label.email_label, input.email_input { display:block; }
input.text { margin-bottom:5px; width:95%; padding: .2em; }
fieldset { padding:0; border:0; margin-top:10px; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
.invisible {visibility:hidden; position:absolute; opacity: .99; z-index:2;}
.visible {visibility:visible;}
</style>
<script src="..\js\jquery-ui-1.10.4.custom\js\jquery-1.10.2.js"></script>
<script src="..\js\jquery-ui-1.10.4.custom\development-bundle\ui\jquery-ui.custom.js"></script>
<script>
$(function() {
//get a reference to the element
var myBtn = document.getElementById('email_architects');
//add event listener
myBtn.addEventListener('click', function(event) {
$( "#dialog-form" ).addClass("visible");
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
<!-- Email CSSs and Javascripts - End -->
</head>
<body>
<!-- Email Form - Start -->
<div id="dialog-form" title="Report Bad Data" class="font62Percent invisible">
<form>
<p class="validateTips">All form fields are required.</p>
<fieldset>
<label class="email_label" for="mail_title">Title</label>
<input type="text" name="mail_title" id="mail_title" class="text ui-widget-content ui-corner-all email_input">
<label class="email_label" for="mail_message">Message</label>
<textarea rows="10" cols="78" name="mail_message" id="mail_message" class="text ui-widget-content ui-corner-all email_input">Enter your message here...</textarea>
</fieldset>
</form>
</div>
<!-- Email Form - End -->
<?php echo "<br> <button id='email_architects'>Bad Data?</button>"; ?>
I have created a fiddle from your code please check.
below code working fine in both chrome and FF.
$(function() {
$("#email_architects").click(function(event) {
$( "#dialog-form" ).addClass("visible");
$( "#dialog-form" ).dialog();
});
});
HTML Code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.msg_body
{
display: none;
}
</style>
<script language="javascript" src="Scripts/jquery-1.4.1.min.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".msg_head").click(function () {
$(this).next(".msg_body").slideToggle();
})
$(".msg_headRoot").click(function () {
$(this).next(".msg_bodyRoot").slideToggle();
})
.toggle(function () {
$(this).children("span").text("[+]");
}, function () {
$(this).children("span").text("[-]");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="msg_headRoot" style="cursor: pointer;">
<p class="msg_headRoot" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
<span>[+] </span>Root
</p>
<div class="msg_bodyRoot">
<div class="msg_head" style="cursor: pointer;">
<p class="msg_head" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
<span>[+] </span>Hello
</p>
<div class="msg_body">
Div text
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Query
Right now it is keeping the div opened. I want to keep the div closed by default and user should click the plus to open it.
EDIT
Forgot to mention the root div. I have actually one nested div. I meant on click the plus of outer dive should open the inner div
CSS:
.msg_body, .msg_bodyRoot {display: none;}
Updated JS:
$(document).ready(function() {
var toggler = function(elem) {
elem.slideToggle(500, function() {
if (elem.is(':visible')) {
elem.parent().find("p:first > span").text("[-]");
} else {
elem.parent().find("p:first > span").text("[+]");
}
});
};
$('div.msg_headRoot').click(function(e) {
toggler($(this).children(".msg_bodyRoot"));
e.preventDefault();
return false;
});
$("div.msg_head").click(function(e) {
toggler($(this).children(".msg_body"));
e.preventDefault();
return false;
});
});
Working fiddle: http://jsfiddle.net/N9E9b/2/
Add some CSS to your markup:
.msg_body { display: none; }
You are missing a semi-colon, and no toggle on the inner part. I made some assumptions on my part that the root should work with its child and the inner with its child. I surely hope I have not made an oversimplification of what you want here.
EDIT: REMOVED BAD CODE THAT HAD BUGS
Just to follow up with the simpler: (and fix a minor issue with +/- text in prior version)
$(document).ready(function() {
$(".msg_head,.msg_headRoot").click(function() {
$(this).next(".msg_body").slideToggle();
var clickp = $(this).children("span:contains('+')");
var clickm = $(this).children("span:contains('-')");
clickp.text("[-]");
clickm.text("[+]");
});
});
<div>
<p class="msg_headRoot"><span>[-] </span>Root</p>
<div class="msg_body">
<p class="msg_head"><span>[+] </span>Hello</p>
<div class="msg_body">Div text</div>
</div>
</div>
.msg_headRoot,.msg_head{margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold; cursor:pointer;}
.msg_body div.msg_body{display:none;}
Example here: http://jsfiddle.net/ykRaY/3/