I have this javascript and its work good in asp.net,,, but I try this script in the same example in php but not work whats the wrong ?
I have lable include value ,, I try get the lable value and insert it in hidden field ,
this is my script
<script type="text/javascript">
function Calculate() {
var Txt_Percent = document.getElementById('<%= txt_Percent.ClientID %>');
var Txt_Fix = document.getElementById('<%= txt_Fix.ClientID %>');
if (document.getElementById('<%= rad_Fix.ClientID %>').checked == true) {
document.getElementById('txt_Percent').disabled = true;
var lblReadCost = document.getElementById('<%= lbl_Read_Cost.ClientID %>');
var lblReadCostValue;
var Lab_Read_Net = document.getElementById('<%= lbl_Read_Net.ClientID %>');
var hf_Read_Net = document.getElementById('<%= hf_Read_Net.ClientID %>');
if (navigator.appName == 'Netscape')
lblReadCostValue = lblReadCost.textContent;
else
lblReadCostValue = lblReadCost.innerText;
if (navigator.appName == 'Netscape')
Lab_Read_Net.textContent = (eval(lblReadCostValue) - eval(Txt_Fix.value));
else
Lab_Read_Net.innerText = (eval(lblReadCostValue) - eval(Txt_Fix.value));
hf_Read_Net.value = (eval(lblReadCostValue) - eval(Txt_Fix.value));
if (document.getElementById('<%= txt_Fix.ClientID %>').value == '') {
Lab_Read_Net.innerText = (eval(lblReadCostValue));
}
}
if (document.getElementById('<%= rad_Percent.ClientID %>').checked == false) {
Txt_Percent.value = "";
}
}
</script>
<script type="text/ecmascript">
function Calculate1() {
var Txt_Fix = document.getElementById('<%= txt_Fix.ClientID %>');
var Txt_Percent = document.getElementById('<%= txt_Percent.ClientID %>');
if (document.getElementById('<%= rad_Percent.ClientID %>').checked == true) {
document.getElementById('txt_Fix').disabled = true;
var lblReadCost1 = document.getElementById('<%= lbl_Read_Cost.ClientID %>');
var lblReadCostValue1;
var Lab_Read_Net = document.getElementById('<%= lbl_Read_Net.ClientID %>');
var hf_Read_Net = document.getElementById('<%= hf_Read_Net.ClientID %>');
if (navigator.appName == 'Netscape')
lblReadCostValue1 = lblReadCost1.textContent;
else
lblReadCostValue1 = lblReadCost1.innerText;
if (navigator.appName == 'Netscape')
Lab_Read_Net.textContent = (eval(lblReadCostValue1) - eval(Txt_Percent.value));
var x = (eval(lblReadCostValue1) * eval(Txt_Percent.value) / 100);
Lab_Read_Net.innerText = (eval(lblReadCostValue1) - parseInt(x));
hf_Read_Net.value = (eval(lblReadCostValue1) - parseInt(x));
if (document.getElementById('<%= txt_Percent.ClientID %>').value == '') {
Lab_Read_Net.innerText = (eval(lblReadCostValue1));
}
}
if (document.getElementById('<%= rad_Fix.ClientID %>').checked == false) {
Txt_Fix.value = "";
}
}
</script>
This does not work in PHP:
<%= txt_Percent.ClientID %>
Because you don't have these objects. Input fields are just static HTML in php. You have to set the ID's you set in your PHP yourself in the Javascript.
You need to change the asp response.write (<%=xxxx %>) for php echos <?php echo $xxx; ?>
Do something like
// ASP
var Txt_Percent = document.getElementById('<%= txt_Percent.ClientID %>');
Convert your objects into array then use like
// PHP
var Txt_Percent = document.getElementById("<?php echo $txt_Percent['ClientID']; ?>");
Related
I am trying to detect a keypress using the jQuery keyup function, but it does not seem to work in Firefox. Though it does work in Chrome, Edge, IE and Opera.
$(".textfield").contents().keyup(function(evnt) {
document.getElementById("btn_save").style.opacity = "1";
saved = false;
});
".textfield" is an iframe with designmode = 'on' So I'm trying to detect a keyup within a editable iframe.
Here's my iframe, nothing special:
<iframe class="textfield" name="textfield" frameBorder="0"></iframe>
EDIT: (It's one of my first websites, so don't mind the bad code)
HTML
<head>
<title>Notepad - A minimalistic, free online text editor for your notes</title>
<meta charset="utf-8"/>
<meta name="description" content="Notepad is a free, minimalistic, online text editor for quickly writing down, saving and sharing your notes."/>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="filesaver/filesaver.js"></script>
<link href="https://fonts.googleapis.com/css?family=Khula|Roboto|Open+Sans|Barrio|Cairo|Cantarell|Heebo|Lato|Open+Sans|PT+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<!-- Fonts -->
<script>
WebFont.load({
google: {
families: ['Cantarell', "Open Sans"]
}
});
</script>
</head>
<body onload="enableEdit('dark'); handlePaste(); handleDrop(); retrieveNote(); createCookie();">
<!-- Facebook & Twitter Share -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v2.9";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="social">
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" style="vertical-align:top;zoom:1;*display:inline">Share</a></div>
<a class="twitter-share-button" href="https://twitter.com/intent/tweet"></a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<!-- Page -->
<div id="page">
<!-- Textfield -->
<iframe class="textfield" name="textfield" frameBorder="0"></iframe>
<!-- Toolbar -->
<div id="toolbar">
<h1 class="button" id="btn_bold" onclick="bold();" onmouseenter="onMouseEnter('btn_bold');" onmouseleave="onMouseLeave('btn_bold');"><b>B</b></h1>
<h1 class="button" id="btn_ita" onclick="italic();" onmouseenter="onMouseEnter('btn_ita');" onmouseleave="onMouseLeave('btn_ita');"><i>I</i></h1>
<h1 class="button" id="btn_und" onclick="underline();" onmouseenter="onMouseEnter('btn_und');" onmouseleave="onMouseLeave('btn_und');"><u>U</u></h1>
<img src="img/theme_dark.png" alt="Change theme" class="button theme" id="btn_theme" onclick="changeTheme();" onmouseenter="onMouseEnter('btn_theme');" onmouseleave="onMouseLeave('btn_theme')"; alt="Change theme." title="Theme"></img>
<img src="img/save.png" type="button" id="btn_save" value="submit" onclick="post();" class="button theme" alt="Save note." onmouseenter="onMouseEnter('btn_save');" onmouseleave="onMouseLeave('btn_save')" title="Save note"/>
<img src="img/cloud.png" type="button" id="btn_down" onclick="download();" class="button theme" alt="Download note" onmouseenter="onMouseEnter('btn_down');" onmouseleave="onMouseLeave('btn_down')" title="Download note"/>
<h1 class="button" id="btn_plus" onmousedown="changeFontSize(3);" onmouseenter="onMouseEnter('btn_plus');" onmouseleave="onMouseLeave('btn_plus');">+</h1>
<h1 class="button" id="btn_minus" onmousedown="changeFontSize(-3);" onmouseenter="onMouseEnter('btn_minus');" onmouseleave="onMouseLeave('btn_minus');">-</h1>
</div>
<div id="result"></div>
</div>
<?php
require("dbconnect.php");
$id = 0;
$idvar = $_GET['id'];
if ($idvar != null) {
$sel = "SELECT text from content WHERE id = $idvar";
} else {
$sel = "SELECT text from content WHERE id = 0";
}
$result = mysqli_query($connection, $sel);
if (mysqli_num_rows($result) == 1) {
while ($r = mysqli_fetch_array($result)) {
$content = str_replace('"', '"', $r["text"]);
}
} else {
header("Location: index.html");
}
$result = mysqli_query($connection, "SELECT id FROM content ORDER BY id DESC LIMIT 1;");
if (mysqli_num_rows($result) > 0) {
$lastid = mysqli_fetch_row($result);
}
?>
<div id="hid" style="display:none;" data-info="<?php echo $content; ?>"></div>
<script type="text/javascript">
function post() {
if (!saved) {
var content = getContent();
$.post("note.php", {posttext:content}, function (data) {});
var lastid = "<?php echo $lastid[0]; ?>";
if (content != "") {
increment++;
lastid = parseInt(lastid) + increment;
alert("Note saved at:\nnotepad.com/index.html?id=" + lastid);
document.getElementById("btn_save").style.opacity = "0.3";
document.getElementById("btn_save").title = "Saved at:\nnotepad.com/index.html?id=" + lastid;
saved = true;
} else {
alert("Empty note");
}
}
}
</script>
<script type="text/javascript" src="script.js"></script>
</body>
JavaScript
var color_text;
var color_button_light;
var color_button_dark;
var color_background;
var color_hover;
var brightness;
var font_size = 32;
var saved = false;
var mouseObj;
function getContent() {
return textfield.document.body.innerHTML;
}
var increment;
function download() {
if (getContent() != "") {
var blob = new Blob([getContent()], {type: "text/plain;charset=utf-8"});
saveAs(blob, "note");
} else {
alert("Empty note");
}
}
function retrieveNote() {
var info = $("#hid").data("info");
textfield.document.body.innerHTML = info;
}
$(".textfield").contents().keyup(function(evnt) {
document.getElementById("btn_save").style.opacity = "1";
saved = false;
});
function enableEdit(theme) {
increment = 0;
// Themes
if (theme === 'dark') {
color_text = "#757575";
color_button_light = "#303030";
color_button_dark = "#646464";
color_hover = "#535353";
brightness = 125;
color_background = "#151515";
} else if (theme === 'hacker') {
color_text = "#00BB00";
color_button_light = "#202020";
color_button_dark = "#00BB00";
color_hover = "#009900";
brightness = 125;
color_background = "#000000";
} else if (theme === 'light') {
color_text = "#999";
color_button_light = "#BBBBBB";
color_button_dark = "#757575";
color_hover = "#646464";
brightness = 90;
color_background = "#EEEEEE";
}
// Background Color
document.body.style.backgroundColor = color_background;
document.getElementById("toolbar").backgroundColor = color_background;
// Textfield
textfield.document.designMode = 'on';
var tag = "<link href='https://fonts.googleapis.com/css?family=Open+Sans|Heebo|Lato' rel='stylesheet'><style>body{font-family:consolas, heebo;}</style>"
$(".textfield").contents().find("head").append(tag);
textfield.document.body.style.fontSize = font_size + "px";
textfield.document.body.style.color = color_text;
textfield.document.body.style.padding = "20px";
textfield.document.body.style.tabSize = "4";
textfield.document.body.style.whiteSpace = "pre-wrap";
textfield.document.body.style.wordWrap = "break-word";
textfield.document.body.style.lineHeight = "1.4";
textfield.focus();
// Buttons
document.getElementById("btn_bold").style.color = color_button_light;
document.getElementById("btn_ita").style.color = color_button_light;
document.getElementById("btn_und").style.color = color_button_light;
document.getElementById("btn_plus").style.color = color_button_dark;
document.getElementById("btn_minus").style.color = color_button_dark;
}
function handlePaste() {
textfield.document.addEventListener("paste", function(evnt) {
evnt.preventDefault();
var text = evnt.clipboardData.getData("text/plain");
document.getElementById("btn_save").style.opacity = "1";
saved = false;
textfield.document.execCommand("insertText", false, text);
});
}
function handleDrop() {
textfield.document.addEventListener("drop", function (evnt) {
evnt.preventDefault();
document.getElementById("btn_save").style.opacity = "1";
saved = false;
var text = evnt.dataTransfer.getData("text/plain");
textfield.document.execCommand("insertText", false, text);
});
}
var sources = ["theme_dark.png", "theme_light2.png", "theme_hacker.png"];
var sources2 = ["save_dark.png", "save.png", "save_hacker.png"];
var themes = ["dark", "light", "hacker"];
var iterator;
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function createCookie() {
if (getCookie("theme") == "") {
iterator = 0;
} else {
iterator = getCookie("theme");
}
document.getElementById('btn_theme').src = "img/" + sources[iterator];
document.getElementById('btn_save').src = "img/" + sources2[iterator];
enableEdit(themes[iterator]);
}
function changeTheme () {
createCookie();
if (iterator < sources.length-1) {
iterator++;
} else {
iterator = 0;
}
document.cookie = "theme=" + iterator + ";expires=Date.getTime() + 60 * 60 * 24 * 365 * 10;";
document.getElementById('btn_theme').src = "img/" + sources[iterator];
document.getElementById('btn_save').src = "img/" + sources2[iterator];
enableEdit(themes[iterator]);
onMouseEnter('btn_theme');
}
function bold() {
textfield.document.execCommand("bold", false, null);
}
function italic() {
textfield.document.execCommand("italic", false, null);
}
function underline() {
textfield.document.execCommand("underline", false, null);
}
function changeFontSize (amount) {
font_size += amount;
textfield.document.body.style.fontSize = font_size + "px";
}
function onMouseEnter(id) {
mouseObj = id;
if (mouseObj != 'btn_theme' && mouseObj != 'btn_save') {
document.getElementById(mouseObj).style.color = color_hover;
} else {
document.getElementById(mouseObj).style.filter = "brightness(" + brightness + "%)";
}
}
function onMouseLeave(id) {
mouseObj = null;
}
setInterval(function() {
var isBold = textfield.document.queryCommandState("Bold");
var isItalic = textfield.document.queryCommandState("Italic");
var isUnderlined = textfield.document.queryCommandState("Underline");
if (isBold == true && mouseObj == null) {
document.getElementById("btn_bold").style.color = color_button_dark;
} else if (isBold == false && mouseObj == null) {
document.getElementById("btn_bold").style.color = color_button_light;
}
if (isItalic == true && mouseObj == null) {
document.getElementById("btn_ita").style.color = color_button_dark;
} else if (isItalic == false && mouseObj == null) {
document.getElementById("btn_ita").style.color = color_button_light;
}
if (isUnderlined == true && mouseObj == null) {
document.getElementById("btn_und").style.color = color_button_dark;
} else if (isUnderlined == false && mouseObj == null) {
document.getElementById("btn_und").style.color = color_button_light;
}
if (mouseObj != 'btn_plus') {
document.getElementById("btn_plus").style.color = color_button_dark;
}
if (mouseObj != 'btn_minus') {
document.getElementById("btn_minus").style.color = color_button_dark;
}
if (mouseObj != 'btn_theme') {
document.getElementById("btn_theme").style.filter = "brightness(100%)";
}
if (mouseObj != 'btn_save') {
document.getElementById("btn_save").style.filter = "brightness(100%)";
}
},10);
PHP for saving the note
<?php
require("dbconnect.php");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL:" . mysqli_error();
}
if (isset($_POST["posttext"]) && !empty($_POST["posttext"])) {
$content = $_POST['posttext'];
$content = mysqli_real_escape_string($connection, $_POST["posttext"]);
$insert = "INSERT INTO content (text) VALUES ('$content')";
mysqli_query($connection, $insert);
$id = mysqli_insert_id($connection);
}
?>
you can use jquery ...
$(document).ready(function(){
$(".textfield").keyup(function() {
$("#btn_save").css("opacity", 1);
});
});
Okay, I fixed the problem. Apparently Firefox needs $(document).ready() to properly function for keypress events (haven't tested other events).
So your code should be:
$(document).ready(function(){
$(".textfield").contents().keyup(function(evnt) {
document.getElementById("btn_save").style.opacity = "1";
saved = false;
});
});
Instead of:
$(".textfield").contents().keyup(function(evnt) {
document.getElementById("btn_save").style.opacity = "1";
saved = false;
});
As I already said this is a problem that only occured in Firefox AFAIK.
This code works in Chrome, Firefox, Opera, Edge and Internet Explorer as of time of writing this answer.
I had a similar problem.
The mobile keyboards (in Firefox) don't emit keyup, keydown and keypress events.
So, I met the Text Composition events.
Something like this:
myInput = document.getElementById('myInput');
myInput.addEventListener('compositionupdate', (event) => {
setTimeout(() => {
applyFilter(event)
});
})
The setTimeOut was necessary to wait input value receipt the keyboard value before call my function.
I'm validating a TextBox with a CustomValidator and JavaScript, passing it some paramaters:
<asp:CustomValidator ID="CustomValidator1" runat="server" SetFocusOnError="true" Display="Dynamic" ValidateEmptyText="true" ControlToValidate="tbFirstName" ClientValidationFunction="CVH.createFunction(notEmpty, 'tbFirstName','tbFirstNameRequired')"></asp:CustomValidator>
This is my JavaScript
var CVH = {
createFunction: function (validationFunction, extParamOne, extParamTwo) {
var originalFunction = validationFunction;
var extOne = extParamOne;
var extTwo = extParamTwo;
return function (src, args) {
return originalFunction(src, args, extOne, extTwo);
}
}
}
var CustomValidatorHelper = CVH;
function notEmpty(source, args, tbID, spID)
{
var textBoxId = document.getElementById(tbID);
var spanID = document.getElementById(spID);
if (textBoxId.Value == null || textBoxId.Value == "") {
textBoxId.IsValid = false;
textBoxId.className = "form-control redBorder"
spanID.className = "redText";
alert(textBoxId.getAttribute('value'));
}
else {
textBoxId.IsValid = true;
textBoxId.className = "form-control"
spanID.className = "";
alert(textBoxId.getAttribute('value'));
}
}
So notEmpty is being called correctly and it is receiving the values for tbID and spID.
Problem is, when I do enter data in the TextBox and the code is executed, I still get not value. As in textBoxId.Value is NULL even with data in the box.
The Texbox is set to Static:
<asp:TextBox ID="tbFirstName" runat="server" class="form-control" autocomplete="name" MaxLength="20" ClientIDMode="Static" />
And it's rendering correctly:
<input name="ctl00$MainContent$tbFirstName" type="text" maxlength="20" id="tbFirstName" class="form-control" autocomplete="name" />
Any suggestions as to why it can't read the data in the TextBox?
So the error was in trying to check the value of textbox directly as opposed of using args:
function notEmpty(source, args, tbID, spID)
{
var textBoxId = document.getElementById(tbID);
var spanID = document.getElementById(spID);
if (args.Value == "")
{
args.IsValid = false;
textBoxId.IsValid = false;
textBoxId.className = "form-control redBorder"
spanID.className = "redText";
}
else
{
args.IsValid = true;
textBoxId.IsValid = true;
textBoxId.className = "form-control"
spanID.className = "";
}
}
So the code is still the same, for exception of changing textbox.value for args.value.
script for enable/disable
<script type="text/javascript" language="javascript">
function display() {
if (document.getElementById("<%=Institution.ClientID %>").value == "others") {
document.getElementById('<%= lblSpecify.ClientID %>').style.visiblity = "visible";
document.getElementById('<%= InstituteOthers.ClientID %>').style.visiblity = "visible";
}
else {
document.getElementById('<%= lblSpecify.ClientID %>').style.visiblity = "hidden";
document.getElementById('<%= InstituteOthers.ClientID %>').style.visiblity = "hidden";
}
}
</script>
If 5th listitem(AnyOther) is selected then only label(lblSpecify) and textbox(InstituteOthers) should be visible=true ,otherwise visible=false
Why did you choose our Institution:
1Doctor
2WordofMouth
3Camps
4OldPatients
5AnyOther
</td>
<td>
<asp:Label ID="lblSpecify" runat="server" Text="Specify :" Visible="false"></asp:Label>
</td>
<td>
<asp:TextBox ID="InstituteOthers" runat="server" TabIndex="18" MaxLength="20" Visible="false"></asp:TextBox>
</td>
</tr>
</table>
But it is not effecting.please help.
i am calling the script in
onchange="display" RepeatDirection="Horizontal" TabIndex="18" >
There is also OnSeletedIndexChanged event exists on radiobuttonlist you can hide and dispaly textboxes on the value selected.
For doing this in javascript try below script
var list = document.getElementById(<%=Institution.ClientID %>);
var inputs = list.getElementsByTagName("input");
var selected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
selected = inputs[i];
break;
}
}
if (selected.value == "others") {
document.getElementById('<%= lblSpecify.ClientID %>').style.visiblity = "visible";
document.getElementById('<%= InstituteOthers.ClientID %>').style.visiblity = "visible";
}
Can you give the where you are calling display method.
If there is dropdown list on your page you can do this on selectedindex change event.
This is my code:
<asp:Button ID="btnSave" runat="server" OnClick="Save" CssClass="StylizedButton" resourcekey="btnSave" />
<div id="lbltot"></div>
JavaScript code:
$(document).ready(function() {
$("#<%= btnSave.ClientID %>").click(function() {
var functionReturn = true;
var focusElement = null;
var tot = $("<%= lblTotal.ClientID %>").val();
var txt1 = $("<%= txt1.ClientID %>").val();
var txt2 = $("<%= txt2.ClientID %>").val();
var txt3 = $("<%= txt3.ClientID %>").val();
var txt4 = $("<%= txt4.ClientID %>").val();
var cal = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4);
if (cal == 100)
{ return true; }
else {
$("lbltot").html("Total must be equal to 100%");
focusElement = tot;
functionReturn = false;
}
});
});
On the client side validation, I have to check the value of the TextBox, and the total should be equal to 100. If true, I should allow it to execute. If not, I need to throw an error stating the total should be 100.
What happens is that, after triggering the submit button, it show the text message only until the postback, and then it disappears. This part:
else {
$("lbltot").html("Total must be equal to 100%");
focusElement = tot;
functionReturn = false;
}
Is there any better way to display the error that persist?
You should return that functionReturn so that the submit action won't happen
I am looking for a javascript that makes the text inside the textbox to disappear once the mouse is inside the textbox and reappears on default.. it has to be a javascript...
Newer browsers do this without JavaScript with the placeholderattribute:
http://dev.w3.org/html5/spec-author-view/common-input-element-attributes.html#the-placeholder-attribute
Maybe something like this...
<script type=text/javascript>
function clearGhost(id,text) {
var obj = document.getElementById(id);
if (obj && obj.value == text) obj.value = '';
}
function Ghost(id,text) {
var obj = document.getElementById(id);
if (obj && obj.value == '') obj.value = text;
}
</script>
<input type=text name=myText id=myText size=20 value="Ghost Text"
onfocus="clearGhost('myText','Ghost Text');" onblur="Ghost('myText','Ghost Text');">
This is untested... would definitely be easier with jQuery.
<input type="text" value="mm/dd/yyyy" id="date1"/>
<script type="text/javascript">
(function(){
function showHideDefaultText(elem){
var defaultValue = elem.defaultValue;
var showDefaultText = function(){
if(this.value.length === 0){
this.value = defaultValue;
}
}
var hideDefaultText = function(){
if(this.value===defaultValue){
this.value = "";
}
}
elem.onfocus = hideDefaultText;
elem.onblur = showDefaultText;
}
var d1 = document.getElementById("date1");
showHideDefaultText(d1);
})()
</script>