JavaScript - Add Smiley To Textbox

OK, my javascript is not that good. So I need your help!

I need to create a text box that will only work if a certain code is entered. So if 1234 is in the text box and submit is clicked, then it will take you to the site. IF not then it will print "Please enter correct code" next to the submit button.

Here is what I have so far:


<input name="txtBox" type="text"/>

<input name="btnButton" type="button" value="Submit" onclick="return checkValue()" />




<script type="text/JavaScript">
function checkValue()
{
var secretcode = document.getElementById("txtBox");


if (secretcode == "1234")
{
document.location.href = 'secret.html';
}
}
</script>

Thank you for your help!

hi,

I am tring to display some texts in a textbox using \n to create a new line but it does not work.

PHP Code:
<script>
document.getElementById("txtbox1").value=" this is my firstline \n This is my second line \n this is my third line"
</script>




<input type="text" id="txtbox1"> 


thanks

Hi,

I have a text-box where you enter the phone nos. On key-press, i have written a validation code to enter only nos and "-". I have disabled Ctrl+v, but my customer want to enable ctrl+v for that text-box only. My requirement is after pasting the value it should automatically check for validation.. How to do it?

Thanks...

I would like to type something into my textbox and then press ENTER, it will execute a function.

I tried onFocus, onChange and onBlur but it doesn't do what I want it to.

Here's an example I use for onChange.

Code:

Application: <input type="text" onchange="execProg(0);">

Any comments or suggestions is greatly

Hi there,
I have two textboxes and I want some images to be displayed in my textboxes randomly
if randomNumber==1 let textbox1/textbox2 backgroundimage change and if randomnumber==2
let textbox1 backgroundimage change again.
I think I need some fixing in the following lines:
document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';");

Thanks for any help..


PHP Code:




<script>
 setInterval("showimages()",500);
function showimages()
{
var rno=Math.floor(Math.random()*2)+1;
document.getElementById("box1").value=rno;
if(rno==1){

document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';");
document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(2.jpg)';");
}
if(rno==2){

document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(3.jpg)';");
document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(4.jpg)';");
}

}
</script>
<input type="text" id="txtbox1" style="position:absolute;top:200px;left:200px;height:150px">
<input type="text" id="txtbox2" style="position:absolute;top:200px;left:500px;height:150px">
<input type="text" id="box1" style="position:absolute;top:100px;left:100px;width:40px;">
<input type="button" onclick='location.reload()' style="position:absolute;top:20px;left:100px;"> 

Hey guys, I recently found a small code in internet which use option value in select tag to insert value in text box, so text box has the exact same value as selected option:

Code:

<form name="theform" onsubmit="CheckForm()">

<select name="myOptions" onchange="document.theform.showValue.value=this.value">


<option name="(some dynamic text)" id="(some dynamic text)" value="I am the first option">I am the first option</option>
<option name="(some dynamic text)" id="(some dynamic text)" value="I am the second option">I am the second option</option>
<option name="(some dynamic text)" id="(some dynamic text)" value="I am the third option">I am the third option</option>
<option name="(some dynamic text)" id=""(some dynamic text)" value="I am the third option">I am the fourth third option</option>

</select>
<input type="text" name="showValue"><br>
</form>

Now what I want is simple and a little different from this one, I want the text box value to be as exact as selected option name or id (doesn't matter which one) which means if an option selected, text box value has to follow that option name or id.

Thanks folks.

how can i pass the var to textboxes

Code:

var win = 0;
var loss = 0;
var draw = 0;

if (c == u) {
draw++;
return "It's a draw";
}

else if ((c == "Fire") && (u == "Air")) {
loss++;
return "You Lose, Fire beats Air!";

}
else if ((c == "Fire") && (u == "Earth")) {
draw++;
return "It's a draw!";

}
else if ((c == "Fire") && (u == "Water")) {
win++;
return "You Win, Fire is beaten by Water!";
}

<tr><td><input type=text size=5 name=w ></td><td>win</td></tr>
<tr><td><input type=text size=5 name=l></td><td>loss</td></tr>
<tr><td><input type=text size=5 name=d></td><td>draw</td></tr>

My code is not validating the textboxes..if someone could help me figure this out.
Thank you

<script type="text/javascript">
function validate() {
with (document.form1) {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var alertMessage = "The following fields\nare REQUIRED:\n\n";
if (realname.value == "") {
alertMessage += "Name\n" }
if(reg.test(email.value) == "") {
alertMessage += "Email\n" }
if (phone.value == "") {
alertMessage += "Phone\n" }
if (security_code.value == "") {
alertMessage += "Security Code\n" }
if (alertMessage != "The following fields\nare REQUIRED:\n\n") {
alert(alertMessage);
return (false);}
return (true)
}
}
</script>


<form action="formmail.php" method="post" enctype="multipart/form-data" name="form1" id="form1" onsubmit="return validate()" >





Reply With Quote




01-31-2015, 09:12 AM #2
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

Have you tried using your error console (F12 key)?

if(reg.test(email.value) == "") { should be
if(!reg.test(email.value) {

as test returns true or false.


But form validation of the pattern if (document.formname.formfield.value == "") - that is blank or empty- is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe.
Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses (as you have done). This topic has been covered many times before in this forum.


The use of with is strongly deprecated and is forbidden in strict mode, and alerts are long obsolete as a way of displaying a message to your users. And so is assigning a name to a form - it is allowed only for the sake of backwards compatibility.

In short - you should rewrite your code to modern standards.

how would you make a function that cheks if any text is in a text box.

hi, I would to validate a textbox, and limit it to 3alphabets and 3 numbers.
That is after the user have input 3 alphabets, he can only enter 3 numbers and nothing more. Can someone help me out?

Hi,

I am having a very difficult time trying to get my text box to validate. I successfully validated my first program using prompts but now when I am using a HTML form I cannot get it to work. I have spent hours upon hours trying to get this working, any help would be greatly appreciated.

Code:

<html>
	<head>
	<title></title>
		<script type="text/javascript">
		function validateform()
			{
				var temp = document.forms["inputform"]["temperature"].value
				while ((isNaN(temp)) || (temp == ""))
					{
					alert("Please enter a number");
					return false;
					}
				if (parseFloat(temp) > 35)
						{
						alert("Wow, it's really hot!");
						}
						
					else if (parseFloat(temp) <= 35) && (parseFloat(temp) >= 18))
							{
							alert("It's a comfortable temperature right now");
							}
										
					else if (parseFloat(temp) < 18)
								{
								alert("Brrr, it's a little bit cold for my liking");
								}
					else
						{
						alert("Goodbye, and thanks for using TempReader");
						}		
			}
		</script>
	</head>
	<body> 
	<form name="inputform" method="post" action="">
			<table>
				<tr><td>What Is The Temperature?</td><td><input   type="text" name="temperature"></td></tr>
				<!-- Below is submit button that when pressed validates the form -->
				<tr><td></td><td><input type="submit" value="Submit Details" onclick = validateform()></td></tr>
			</table>
		</form>	
	</body>
</html>

Dear Experts

I have following codes

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Numeric Textbox Sample</title>

<style type="text/css">
#box1	{width:200px;height:170px;border:1px solid green;background:#e3eeff;padding-top:20px;}

.button	{width:100px;margin-top:0px;}

body {
    margin:0;
margin-top:100px;
	 }
</style>

<script language="javascript">

function NumericDotOnly()
{
var key = window.event.keyCode; 

if (((key >47) && (key <58)) || (key==46))
window.event.returnValue = true;
else 
window.event.returnValue = false;
}

function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + num + '.' + cents);
}


</script>

</head>

<body onload="form2.text1.focus()" >
<center>
<p>I need following format<br>
99,999,999.99<br>
</p>
<div id="box1">
		<form name=form2>
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
		<tr><td>Amount</td> 

<td><input type=text name=text1 size=15 value="" onkeypress="NumericDotOnly

()";onblur="formatCurrency(this.value)"> </td></tr>	

	<tr><td>Tax</td> <td><input type=text name=text2 size=15 value="" 

onkeypress="NumericDotOnly()";onblur="formatCurrency(this.value)"></td></tr>		
<tr><td>Result</td><td><input type=text name=text3 size=15 value="" disabled></td></tr>

		</table>
		<hr>
		<input class="button" type=button name=command1 value="Plus" 

onclick="form2.text3.value=parseFloat(form2.text1.value)+parseFloat(form2.text2.value)"><br>

		<input class="button" type=button name=command8 value="Focus" 

onclick="form2.text1.select()";"form2.text1.focus()"><br>
		<input class="button" type=reset name=command9 value="Reset">
	
</form>
</div>

</center>
</body>
</html>

Please help me to apply following format

99,999,999.99

Thanks in advance

I have 2 text boxes on my page. When the user clicks in one text box, I would like whatever is in there to be copied to the other text box.

Is this possible? I have looked into it and onClick seems like it might do it but I can't get it to work.

Thanks.

What I want is when the button 'Total' is pressed, the total frame the pictures and frames appears in the textbox.


Here is the code (sorry, it's long):

<!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" />
<script language="javascript" src="jquery-1.3.2.js"></script>
<title>Ivis's Picture Gallery</title>
<script language="javascript">
var price1, price2, price3, price4, price5, price6, price7, price8, price9, price10;
function price()
{
price1 = document.getElementById("price1").innerHTML=price1;
price2 = document.getElementById("price2").innerHTML=price2;
price3 = document.getElementById("price3").innerHTML=price3;
price4 = document.getElementById("price4").innerHTML=price4;
price5 = document.getElementById("price5").innerHTML=price5;
price6 = document.getElementById("price6").innerHTML=price6;
price7 = document.getElementById("price7").innerHTML=price7;
price8 = document.getElementById("price8").innerHTML=price8;
price9 = document.getElementById("price9").innerHTML=price9;
price10 = document.getElementById("price10").innerHTML=price10;
}

function total()
{
var text = document.getElementById("txt1").value;
text = bigImage + bigFrame;
}


function changeImageZebra()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "ZooZebra.gif");
$("#bigImage").fadeIn(3000);

}

function changeImageTiger()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "tiger.jpg");
$("#bigImage").fadeIn(3000);
}

function changeImageGraff()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "graff.jpg");
$("#bigImage").fadeIn(3000);
}

function changeImageBDog()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "boys with dog.jpg");
$("#bigImage").fadeIn(3000);
}

function changeImageSeal()
{
$("#bigImage").hide();
$("#bigImage").attr("src", "seal.jpg");
$("#bigImage").fadeIn(3000);
}

$(document).ready(function(){
$("#zebPic").mouseover(changeImageZebra);
$("#tigPic").mouseover(changeImageTiger);
$("#graffPic").mouseover(changeImageGraff);
$("#bdogPic").mouseover(changeImageBDog);
$("#sealPic").mouseover(changeImageSeal);

});


function changeFrame1()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square.png");
$("#bigFrame").fadeIn(3000);

}

function changeFrame2()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square2.png");
$("#bigFrame").fadeIn(3000);
}

function changeFrame3()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square3.png");
$("#bigFrame").fadeIn(3000);
}

function changeFrame4()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square4.png");
$("#bigFrame").fadeIn(3000);
}

function changeFrame5()
{
$("#bigFrame").hide();
$("#bigFrame").attr("src", "square5.png");
$("#bigFrame").fadeIn(3000);
}

$(document).ready(function(){
$("#frame1").mouseover(changeFrame1);
$("#frame2").mouseover(changeFrame2);
$("#frame3").mouseover(changeFrame3);
$("#frame4").mouseover(changeFrame4);
$("#frame5").mouseover(changeFrame5);

});
</script>
</head>

<body><h1>Frames</h1>
<p>&nbsp;</p>
<p><img src="ZooZebra.gif" id="zebPic" alt="" width="50" height="50" /><div id="price1">$100</div></p>
<p><img src="tiger.jpg" id="tigPic" alt="" width="50" height="50" /><div id="price2">$110</div></p>
<p><img src="graff.jpg" id="graffPic" alt="" width="50" height="50" /><div id="price3">$120</div></p>
<p><img src="boys with dog.jpg" id="bdogPic" alt="" width="50" height="50" /><div id="price4">$130</div></p>
<p><img src="seal.jpg" id="sealPic" alt="" width="50" height="50" /><div id="price5">$140</div></p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
<div id="sq1"><img src="square.png" id="frame1" width="100" height="100" /> Frame1</div><div id="price6">$50</div>
<div id="sq2"><img src="square2.png" id="frame2" width="100" height="100" /> Frame2</div><div id="price7">$60</div>
<div id="sq3"><img src="square3.png" id="frame3" width="100" height="100" /> Frame3</div><div id="price8">$70</div>
<div id="sq4"><img src="square4.png" id="frame4" width="100" height="100" /> Frame4</div><div id="price9">$80</div>
<div id="sq5"><img src="square5.png" id="frame5" width="100" height="100" /> Frame5</div><div id="price10">$90</div><hr />
<p>&nbsp;</p>
<p><img src="ZooZebra.gif" name="bigImage" align="top" id="bigImage" /><img src="square.png" name="bigFrame" id="bigFrame" /></p>
<p>
<label>
<input type="button" name="btn1" id="btn1" value="Total" onclick="total()" />
</label>
<label>
<input type="text" name="txt1" id="txt1" />
</label>
</p>
<p>
<input type="button" name="btn2" id="btn2" value="To Checkout" />
</p>
<p>&nbsp;</p>
[<a href="galleryindex.htm">Back</a>]
</body>
</html>

Hello ! I am trying to create an auto suggest drop down.

I have some ASP and Javascript code that I am using as an Autosuggest. Trouble is, the result displays on the main page, not under the text box like a drop down menu. I need help in getting the results to display correctly underneath the textbox. I have trawlled the internet and have loads and loads of code samples but I cant see the wood for the trees and I am really struggling with editing this code so that it displays correctly.



clienthint.asp

Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<%
'this displays the value of the textbox after the form is submitted
If trim(Request("txt1")) <> "" Then
	Response.Write "You entered:"
	Response.Write "<b>" & Request("txt1") & "</b><br /><br />"
End If
%>
<form name="form1" action="clienthint.asp" method="post">
Enter Word:
<input type="text" name="txt1" id="txt1" onKeyUp="showHint(this.value,'txt1','form1',true)">
<input type="submit" name="submit" value="submit">
</form>
<p>Suggestions: <span id="txtHint"></span></p> 
</body>
</html>

clienthint.js

Code:

var xmlHttp

function showHint(str, box, thisForm, autoSubmit)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="gethint.asp";
url=url+"?q="+str;
url=url+"&b="+box;
url=url+"&f="+thisForm;
url=url+"&a="+autoSubmit;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

//this function allows for Clickable suggestions
function setTextBox(thisText,thisBox,thisForm,autoSubmit){
	document.getElementById(thisBox).value = thisText
	//this autoSubmits the form after a suggestion is clicked - it is not working :(
	//if(autoSubmit=='true'){
	//	alert(thisForm);
	//	document.getElementById(thisForm).submit();
	//}
}

gethint.asp

Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
response.expires=-1
Dim rsWords
Dim rsWords_numRows
Dim q
Dim b
Dim hint
q=ucase(request.querystring("q"))
b=(request.querystring("b"))
f=(request.querystring("f"))
a=(request.querystring("a"))
hint=""
Set rsWords = Server.CreateObject("ADODB.Recordset")
rsWords.ActiveConnection = "Provider=SQLOLEDB; Data Source=JAGUAR\SQLEXPRESS; Initial Catalog=67625252; User ID=SFSDFSDF; Password=KJHSDHFJHDF"
rsWords.Source = "SELECT * FROM Rmatable WHERE (RMA_ID LIKE'" + q + "%') ORDER BY RMA_ID"
rsWords.CursorType = 2
rsWords.CursorLocation = 2
rsWords.LockType = 3
rsWords.Open()
rsWords_numRows = 0

If Not rsWords.EOF Then
	Do While Not rsWords.EOF
		If trim(hint) = "" Then
			hint = "<a href=""javascript:setTextBox('" & rsWords("RMA_ID") & "','" & b & "','" & f & "','" & a & "');"">" & rsWords("RMA_ID") & "</a>"
		Else
			hint = hint & " , <a href=""javascript:setTextBox('" & rsWords("RMA_ID") & "','" & b & "','" & f & "','" & a & "');"">" & rsWords("RMA_ID") & "</a>"
		End If
		rsWords.MoveNext()
	Loop
End If
if trim(hint)="" then 
  response.write("no suggestion")
else
  response.write(hint)
end if

rsWords.Close()
Set rsWords = Nothing
%>