|
JavaScript - Using The Selected Value To Define A Variable!
Hi everyone!
I am building a simple web application in which the user inputs some html code in a <textarea> and the corresponding result (output of the code) is shown! The problem I am facing is that suppose the user enters some code and wishes to wrap it inside specific tags (e.g. <script></script>) then she just selects the corresponding code and clicks a predefined button and the selected code gets wrapped inside those tags! Now, what I am thinking right now is that when the user selects some code and clicks the button the selected text goes inside a variable (e.g. old_variable) and a new variable (new_variable = "<script>" + old_variable + "</script>") is returned! But I was just wondering how to send the selected code in the variable i.e. old_variable using JavaScript? Any help/hint/suggestion/advice would be highly valuable for me! Thanks! Similar TutorialsHi, I have a programing problem that have been around for ages. I have search on google using several expressions and words and after hours of digging i'm still unable to do it. I would like to get a value from a HTML page hosted remotely with an inconstant value. Then define this value and name as a javascript variable and apply or show in my page. Thanks for all the help P.S. Is there any way to make a domain lookup in javascript? I mean a user enters a domain and the script converts to an ip and shows to the user. If not thanks, probably it can only be done in the server side... Hi, Here's a sample form: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
function displayResult() {
alert(document.myForm.myInput.value);
}
function getFocus() {
if (document.myForm.myInput.value == document.myForm.myInput.defaultValue) {
document.myForm.myInput.value = "";
}
}
function loseFocus() {
if (document.myForm.myInput.value == "") {
document.myForm.myInput.value = document.myForm.myInput.defaultValue;
}
}
</script>
</head>
<body>
<form name="myForm" method="get" onsubmit="return false;" action="">
<input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
<input type="button" onclick="displayResult();" value="Display input value">
</form>
</body>
</html>
It works with no problem, but the following doesn't: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample form</title>
<script type="text/javascript">
var x = document.myForm.myInput;
function displayResult() {
alert(x.value);
}
function getFocus() {
if (x.value == x.defaultValue) {
x.value = "";
}
}
function loseFocus() {
if (x.value == "") {
x.value = x.defaultValue;
}
}
</script>
</head>
<body>
<form name="myForm" method="get" onsubmit="return false;" action="">
<input name="myInput" value="Hello world!" onfocus="getFocus();" onblur="loseFocus();"><br>
<input type="button" onclick="displayResult();" value="Display input value">
</form>
</body>
</html>
What's wrong with it and how can I define a global variable to be used by all the functions? Many thanks in advance! Mike I am trying to get the variable extraCharge to increment by $1 for every topping over the 3 included toppings. How can this be done? For statements confuse me Code: <!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>Checkbox Toppings</title>
<script type="text/javascript">
function validate(form)
{
var toppingsArray = document.form1.scripts.length;
var extraCharge = 0;
// Checking if at least one period button is selected. Or not.
if (!document.form1.orderType[0].checked && !document.form1.orderType[1].checked)
{
alert("Please Select orderType");
return false;
}
var total=""
for(var i=0; i < document.form1.scripts.length; i++)
{
if(extraCharge >= 3)
alert("You can only select 2");
else if(document.form1.scripts[i].checked)
total +=document.form1.scripts[i].value + "\n"
}
for(var i=3; i >= document.form1.scripts.length; i++)
{
var extraCharge = extraCharge + 1;
}
if(total=="")
alert("select Toppings")
else
document.form2.checklist.value=(total);
document.form2.toppingCharge.value=(extraCharge);
return false;
}
</script>
</head>
<body>
<h2>3 Toppings included, $1 for each additional topping</h2>
<table width="333" border="0">
<tr>
<td width="179"><form name="form1" method="post" action="" onchange="return validate(this)">
Select Order Type First:<br />
<input name="orderType" value="delivery" type="radio">delivery </font>
<br />
<input name="orderType" value="takeOut" type="radio"><font face="verdana" size="2">takeOut</order></b>
<br />
<br />
<br />
<input name="scripts" value="extracheese" type="checkbox">Extra Cheese
<br />
<input name="scripts" value="sausage" type="checkbox">Sausage
<br />
<input name="scripts" value="peperoni" type="checkbox">Peperoni </font>
<br />
<input name="scripts" value="bacon" type="checkbox">Bacon
<br />
<input name="scripts" value="canadianBacon" type="checkbox">Canadian Bacon
<br />
<input name="scripts" value="mushroom" type="checkbox">Mushroom </font>
<br />
<input name="scripts" value="pineapple" type="checkbox">Pineapple </font>
<br />
<input name="scripts" value="onion" type="checkbox">Onion
<br />
<input name="scripts" value="olive" type="checkbox">Olive
<br />
<input name="scripts" value="greenPepper" type="checkbox">Green Pepper </font>
</form>
</td>
<td width="144">Selected Toppings:
<br />
<form name="form2"><textarea name="checklist" cols="20" rows="15" value="total"></textarea>
Extra Topping Charge:
<input name="toppingCharge" type="text" />
</form></td>
</tr>
</table>
</body>
</html>
like for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" I currently have a navigation bar with CSS. It sits by itself in a frame so it doesn't change with the other page turns. So I'm trying to figure out how to set each link class="active" since it always stays on the same page. I'm thinking javascript will be my friend. Is there an onclick function that can be defined? I'm not new to webpages but new to learning javascript, instead of borrow someone's code. I didn't know how to approach this code because I think I need it to say: If Onclick, then set to class="active", otherwise (then), set class="nothing" or anything to this regard. I was not sure how I could approach that code and how to fit into the UL/LI html code I currently have setup as well as the head code. Example code: (I have 3 frames called head, form, and body. Head is the nav bar where this code sits.) Code: <ul class="menu"> <li><a href="choose.htm" class="active"><span>Home</span></a></li> <li><a href="search.htm" target="form" onClick="top.body.location='http://www.google.com';"><Span> Google</span></a></li></ul> With my CSS code, the "menu" defines some colors/setup, as so does Span and class="active". As a bonus, if you could teach me instead of just help me, it would help me help others. I hope you will forgive the ineptitude of this question, but I'm starting from a severely beginner's level! In my website, I want each button clicked on the home page to define a variable URL that determines which 'default' page is navigated to first when people visit the Gallery section. i.e. If the "About Racing" link is clicked, then when the Gallery section fires up, the first page/picture seen is the Racing Car pic page. I am sure this is possible, but haven't managed to work out quite how to do it.... Any help will be very gratefully received! Hi, I'm using ColdFusion to handle the login function for users (see login_form.cfm below). Have to click in the username box to be able to start typing. What's the best way to define the focus to be on the username when the page initially loads? Thanks <form method="post"> Username: <input type="Text" name="username"><br> Password: <input type="Password" name="password"><br> <input type="Submit" value="Login" name="login"> </form> Hi all, I am working with the following code: Code: window.onload = (window.onload) ? window.onload : function () {
for (var i = 0; i < onload_functions.length; i++) {
eval(onload_functions[i]);
}
}
...and it's used like this: onload_functions.push('runSomeJS()'); The idea is that IF the "window.onload" function doesn't exist, I supply my own. My problem is that this code also uses an array: var onload_functions = new Array(); Now this array will not be present if the "window.onload" function is not present. So I need to also define it conditionally. I tried this: onload_functions = (onload_functions) ? onload_functions : new Array(); ...but it doesn't work. I also tried: onload_functions = (onload_functions) ? onload_functions : onload_functions = new Array(); ...doesn't work either. I'm sure the solution is simple, but I'm just not seeing it. Any ideas? Thanks! -- Roger Hey, I was wondering if there was something in javascript that could tell if the text is selected. Selected as in when you click and hold your mouse down and go over text. Is there something in javascript to tell if you've selected any text? Thanks. Hi! I have a javascript in the head of the document which has a variable named "ref2" ... ref2 is already working as I can see its value working in another function. I need to send this variable as the value of a hidden field in the form which is in the body of the document. This is my JavaScript Code: Code: function WriteContactFormStatement1 () {
var ContactFormValue = ref2;
document.write('<input type="hidden" name="UReferrersName" value="' + ContactFormValue + '" />');
}
var WriteContactFormStatement = WriteContactFormStatement1 ();
And at the end of my form, before the submit button, I have the following code: Code: <!-- START -- Javascript to print the statement for UReferrersName --> <script language="JavaScript" type="text/JavaScript"> //WriteContactFormStatement(); document.write (WriteContactFormStatement); </script> <!-- End -- Javascript to print the statement for UReferrersName --> When I execute the form, it doesn't work the way it should, plus, gives me a word "undefined" next to the "Submit" button ..... Please help !... - Xeirus. I don't know how I should do ? Quote: <html> <head> <script type="text/javascript"> function add(a,b){ y=a+b return y } var aaa = add(one,two) //one needs to get somehow get the value of yil, in this case 10 var one = function reas(){i=10;if(i<10){yil = 15}; else{yil = 10; yil = one;}; var two = 20; document.write(y) </script> </head> </html> also why doesn't this work? Quote: <html> <head> <script type="text/javascript"> function adder(a,b){ var k=a+b; return k } var hes=adder(5,kol); kol=40; alert(hes); </script> </head> </html> you cannot have variables in callback functions? Hello I have a php page in which I declared a js variable... right at the top of the page... <script type="text/javascript"> var tester = 0; </script> Later in the page I test this variable... <script type="text/javascript"> if (tester==1){ do some stuff!! } </script> But I keep getting an error variable _tester undefined Am I missing something obvious... I am new to js... but this seems really straightforward I'm trying to make a comment script with show/hide divs and are so far OK, but... I want to hide one div when another is activated... Here is what I have so far: Code: <?
for ($q = 1; $q <= 5; $q++) {
echo '<div id="jdivStart'.$q.'" style="padding:0px 0px 0px 0px;width:100%x;">';
echo '<textarea style="color:#999999;" rows=2 cols="66" onfocus="jchange'.$q.'(\'jdiv'.$q.'\');">Write comment</textarea>';
echo '</div>';
echo '<div id="jdiv'.$q.'" style="display:none;">';
echo '<textarea style="color:#999999;" rows=6 cols="66"></textarea>';
echo '</div>';
?>
<script language="javascript" type="text/javascript">
function jchange<? echo $q; ?>(divname) {
var currentShowingDivQ = document.getElementById('jdivStart<? echo $q; ?>');
var objDivQ = document.getElementById(divname);
if (currentShowingDivQ && currentShowingDivQ != objDivQ) {
currentShowingDivQ.style.display = 'none';
}
if(objDivQ.style.display == 'none'){
objDivQ.style.display = 'block';
} else {
objDivQ.style.display = 'none';
}
}
</script>
<?
}
?>
So if I activate the first textbox, then when I activates the second I want to be able to hide the first again... Any help i appreciated :-) Hi i can't seem to get a drop downs selected index. This is my drop down box: Code: <select name="queba" id="queeba"> <option value="ban1">Bank1 <option value="ban2">Bank2 <option value="ban3">Bank3 <option value="ban4">Bank4 </select> thanks Hi All, I am using this code to populate a drop down list from mysql database. I need to pass id and name through this code.but the problem is the value is lost when the page gets refreshed.and it works fine if i pass only name through it. my code is as follows: PHP Code: <?PHP $query=mysql_query("SELECT * FROM client_master WHERE client_status=1");?> <select name='name' onChange='javascript:form_submit();' style='width:80px'> <option value="">-SELECT-</option> <?php while($row=mysql_fetch_array($query)) { $name=$row['client_name']; ?> <option value="<?php echo $row['client_id'] ?>" <?php echo($row['client_name']==$_POST['name'])?'selected':''?>> <?php echo $row[client_name];?> </option> <?php } ?> </select> <script language="javascript"> function form_submit(){ document.gr.submit(); } </script> Hope I can explain this... I have a page with a couple dropdowns - dropdown-1 is for shape, and dropdown-2 is for color. Images appear to match what the user selects. The shape image has a transparent center, so that I can make a color image appear underneath, when they choose that. But to do so, I have to set a default color picture (pic4) appear, so that the shape(pic1) can be seen. The color dropdown works just fine. But if they go back and change the shape, it defaults to the original (pic4) What's a way to script this so it knows not to change pic4 if it's been selected. In other words, as a user I pick "round". It shows me a round circle. I select "orange", to change the circle's color. But I change my mind, I want a square, so I go back and change it, but my square is green again, even though I chose orange. Here's some of what I got. Code:
<script>
function change1(picName,imgName)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}
<!-- this following is the variable from the form that I want to check. If it's been set, then I want the color image to be left alone -->
function passit2(str)
{document.formsearch1.s2.value=str}
</script>
<!-- this next little bit is what I'm wanting to work on. I want it to know if pic4 has bee selected, and to leave it alone if that has happened. --><a href="javascript:passit('auriculate')" onMouseover="change1('pic1','image2')" onClick="ShowContent('uniqueleaf'); change4('pic2','_auriculate'); ShowContent('uniquename'); change1('pic4','image28'); add_content('auriculate');" onMouseout="change1('pic1','image41');">Auriculate</a></li>
<!-- Here's the bit related directly to pic4. If they have selected this, I don't want it to change when -->
<li id="green"><a href="javascript:passit2('green')" onMouseover="change1('pic3','image28')" onClick="ShowContent('uniquename'); change1('pic4','image28'); add_content2('green');" onMouseout="change1('pic3','image_off');">green</a></li>
<li id="orange"><a href="javascript:passit2('orange')" onMouseover="change1('pic3','image29')" onClick="ShowContent('uniquename'); change1('pic4','image29'); add_content2('orange');" onMouseout="change1('pic3','image_off');">orange</a></li>
<li id="red"><a href="javascript:passit2('red')" onMouseover="change1('pic3','image30')" onClick="ShowContent('uniquename'); change1('pic4','image30'); add_content2('red');" onMouseout="change1('pic3','image_off');">red</a></li>
<li id="blue"><a href="javascript:passit2('blue')" onMouseover="change1('pic3','image31')" onClick="ShowContent('uniquename'); change1('pic4','image31'); add_content2('blue');" onMouseout="change1('pic3','image_off');">blue</a></li>
<li id="purple"><a href="javascript:passit2('purple')" onMouseover="change1('pic3','image32')" onClick="ShowContent('uniquename'); change1('pic4','image32'); add_content2('purple');" onMouseout="change1('pic3','image_off');">purple</a></li>
<li id="purpleblack"><a href="javascript:passit2('purple-black')" onMouseover="change1('pic3','image32')" onClick="ShowContent('uniquename'); change1('pic4','image33'); add_content2('purple black');" onMouseout="change1('pic3','image_off');">purple-black</a></li>
<!-- here's the image that is being changed. Maybe if it's a script that just checks to see if it's transparent.gif to change it, and if it's not, to leave it alone? -->
<IMG SRC="images/leaf_shapes/entire/transparent1.gif" name="pic4" width="250" height="350" border="0">
I'm struggling to make a js alert when none of the 3 checkboxes on my form are selected. Can anyone help me out? Code: function checkform ( form )
{
if (form.contact_name.value == "contact name") {
alert( "Please enter a contact name" );
form.contact_name.focus();
return false ;
}
if (form.last_name.value == "agency/company name") {
alert( "Please enter agency/company name" );
form.last_name.focus();
return false ;
}
if (form.email.value == "email address") {
alert( "Please enter contact email address" );
form.email.focus();
return false ;
}
if (form.telephone.value == "dates required") {
alert( "Please enter dates required" );
form.telephone.focus();
return false ;
}
if (form.comments.value == "any other info") {
alert( "Please enter more information" );
form.comments.focus();
return false ;
}
if (form.contact_name.value == "") {
alert( "Please enter a contact name" );
form.contact_name.focus();
return false ;
}
if (form.last_name.value == "") {
alert( "Please enter agency/company name" );
form.last_name.focus();
return false ;
}
if (form.email.value == "") {
alert( "Please enter contact email address" );
form.email.focus();
return false ;
}
if (form.telephone.value == "") {
alert( "Please enter dates required" );
form.telephone.focus();
return false ;
}
if (form.comments.value == "") {
alert( "Please enter more information" );
form.comments.focus();
return false ;
}
return true ;
}
//-->
</script>
Code: <form name="contactform" method="post" action="send_form_email.php" onsubmit="return checkform(this);">
<table width="450px">
</tr>
<tr>
<td valign="top">
<input class="formbox" type="text" STYLE="text-align:right" value="contact name" name="contact_name" maxlength="50" size="30" onblur="if (this.value == '') {this.value = 'contact name';}" onfocus="if (this.value == 'contact name') {this.value = '';}">
</td>
</tr>
<tr>
<td valign="top">
<input class="formbox" type="text" STYLE="text-align:right" value="agency/company name" name="last_name" maxlength="50" size="30" onblur="if (this.value == '') {this.value = 'agency/company name';}" onfocus="if (this.value == 'agency/company name') {this.value = '';}">
</td>
</tr>
<tr>
<td valign="top">
<input class="formbox" type="text" STYLE="text-align:right" value="email address" name="email" maxlength="80" size="30" onblur="if (this.value == '') {this.value = 'email address';}" onfocus="if (this.value == 'email address') {this.value = '';}">
</td>
</tr>
<tr>
<td valign="top">
<input class="formbox" type="text" STYLE="text-align:right" value="dates required" name="telephone" maxlength="30" size="30" onblur="if (this.value == '') {this.value = 'dates required';}" onfocus="if (this.value == 'dates required') {this.value = '';}">
</td>
</tr>
<tr>
<td>
<div id="checksdiv">
Full Day<input class="formcheck" type="checkbox" name="check[]" value="Full_Day">
Half Day<input class="formcheck" type="checkbox" name="check[]" value="Half Day">
Hourly <input class="formcheck" type="checkbox" name="check[]" value="Hourly">
</div>
</td>
</tr>
<tr>
<td valign="top">
<textarea class="formbox" name="comments" value="any other info" STYLE="text-align:right" maxlength="1000" cols="25" rows="6" onblur="if (this.value == '') {this.value = 'any other info';}" onfocus="if (this.value == 'any other info') {this.value = '';}"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right">
<input type="image" value="Submit" src="images/submit.png" />
</td>
</tr>
</table>
</form>
OK so say I have something like this: <TD> <p>Item A</p> <p>Item B</p> <p>Item C</p> <p>Item D</p> </TD> So TD would be the parent and all of the <P>'s would be childNodes. I want to be able to click on each child and have it alert me its index # relative to the parent node. So 'Item A' should alert "0", 'Item B' - "1", 'Item C' - "2", etc. Thanks in advance. When first loading the page, I want the default select box value to be showing, and change when they select a different value. It works perfect when I select any value, but it's blank on load. I've attached screenshots showing. How can I get it default selected to show "Please Select a Character Class to view more information." Code: <script type = "text/javascript">
function showDetails(which) {
var d = document.getElementById("classDescription");
var s = which.value;
if (s == "Enchantress") {d.innerHTML = "<b>Enchantress</b><br />This character is a magic user. You are weak with attacks, but powerful with magic."}
if (s == "Knight") {d.innerHTML = "<b>Knight</b><br />This character is a physical user. You are powerful with attacks, but weak against magic."}
if (s == "Archer") {d.innerHTML = "<b>Archer</b><br />This character is a unique user. You can attack twice, but can't equip shields."}
if (s == "Thief") {d.innerHTML = "<b>Thief</b><br />This character lurks in the shadows. He is crafty, weak attacks, decent magic."}
if (s == "") {d.innerHTML = "Please Select a Character Class to view more information."}
}
</script>
Code: <select name="Character_Class" id="CharClass" onchange="showDetails(this)">
<option value="" selected="selected">Choose a Class</option>
<option value="Enchantress">Enchantress</option>
<option value="Knight">Knight</option>
<option value="Archer">Archer</option>
<option value="Thief">Thief</option>
</select>
Code: <li><div id="classDescription"></div></li> |
|||||||