|
JavaScript - Help With Copying Text With A Selection Tag Value
I have 2 textareas, 1 which will be vissible, another that will be hidden. I have a function that mirrors (not in reversed lettering) the first textarea's input to the second.
Code: function copy_data(val){
var messageText = document.getElementById(val.id).value
document.getElementById('message').innerHTML = messageText;
}
So that copies from : <textarea name="text_message" rows="4" id="text_message" style="direction:ltr;" onkeyup="copy_data(this)"></textarea><br/> To: <textarea name="message" rows="4" id="message" style="direction:ltr;"></textarea> Then I have another function which when I select text in the "text_message" textarea will apply a tag to it, however I don't want this tag to be vissible in the "text_message" textarea but rather in the "message" textarea. Code: function formatText(el,tag){
var selectedText = document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
if(selectedText!=''){
var newText=''+tag+''+selectedText+''+tag+'';
el.value=el.value.replace(selectedText,newText)
}
}
This effects from this checkbox: <input type="checkbox" id="bold1" name="bold1" onclick="formatText(message,'#28D')" checked="checked" > Could anyone please help me, I think I may have missed something somewhere, because it works if I point it back to "text_message" Similar TutorialsHi, Here's a sample form: Code: <form action="#" method="post"> Name:<br /> <input type="text" name="name" value="your name" /><br /> E-mail:<br /> <input type="text" name="mail" value="your email" /><br /> <input type="submit" value="Send"> </form> When you tab to a text input, the value gets highlighted. How can it be disabled? Any help is appreciated! Mike Hello, I have 2 things I'm trying to figure out. 1. First form on the page has questions with radio buttons. Each radio's value is a number so a score is assessed at the end. 2. Second form on the page is an email the admin form, which duplicates the score in one field. Question: I would like to know how to write the form results to a text area in second form. However, I can't do this for one, and secondly, the value is a number, can I use labels? Here's the code I've 'made up' so far... JS (i know it's wrong) Code: <script LANGUAGE="JavaScript" type="text/javascript">
function display() {
message = "<ul><li><b>Question 1: </b>" + document.quizform.Q1.label;
message = "<li><b>Question 2: </b>" + document.quizform.Q2.label;
message = "<li><b>Question 3: </b>" + document.quizform.Q3.label;
message = "<li><b>Question 4: </b>" + document.quizform.Q4.label;
message = "<li><b>Question 5: </b>" + document.quizform.Q5.label;
message = "<li><b>Question 6: </b>" + document.quizform.Q6.label + "</ul>";
document.write(message);
}
</script>
Form field example: Code: Question 1:<BR> <label for="Yes"><input type="radio" name="Q1" value="0" checked></label>Yes<br> <label for="No"><input type="radio" name="Q1" value="10"></label>No<br> <label for="I don't know"><input type="radio" name="Q1" value="10"></label>I don't know<br> I am trying to change text in one cell of a table when a user selects an item from a select menu. The data for the select menu is being pulled from a database (which works fine). The select menu is displayed as expected; however the text in the div tag always comes up as "undefined" The code below is part of a PHP script (thus \" instead of ") I would like to employ a method that does not require extra Javascript in the <head> section as in this instance the code is being output from an include that is called long after the <head> area of the document is processed. Here is what I have Code: <tr><td><select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">
<option selected=\"selected\" value=\"\">Select Race</option>\n";
$sql = mysql_query("SELECT * FROM races");$i=1;
while ($row = mysql_fetch_array($sql)){
$output .= "<option value=\"$i\" ExtraInfo=\"{$row['des']}\">{$row['race']}</option>\n";
$i++;
}
$output .= "</select></td>
<td><div id=\"ExtraInfo\">Select Race</div></td></tr>
Any help will be greatly appreciated. I found a solution to my problem: by replacing: Code: <select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">
with this: Code: <select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')\">
Hi all, I am working on code to wrap BBCodes around a user selection, then leave the selection selected for possibly adding more BBCodes around the same selection. My problem is that there seems to be several different ways to do it and I can't figure out which one is "the best". Now, I can't use the "standard" way of doing this because I am working with TinyMCE. I know there are countless examples on how to do this with textareas... that is NOT what I need. TinyMCE can give me a selection RANGE, a selection NODE or a selection OBJECT. Note that if I use TinyMCE's range, it internally "normalizes" the range to be a standard W3C range, regardless of browser. I've created a new range, extracted the selection from the user's range, created elements for the open and close BBCode, inserted the elements into the range and finally set the user's selection to the new range. Works fine. I also tried taking the selection node (which is an element), then simply used "innerHTML" to add the opening and closing tags, then set the node to the modified node. Works fine. I've also used the editor's built in "selection.getContent()" and "selection.setContent()" calls and THIS also works. I've even tried using the DOM "surroundContents()" function, then used a regex to change the < and > into [ and ]. Freaky... but that works too. So, my dilemma is... which method should I use??? To recap, here's what I want (blue represents selected text): This is a test sentence. (user selected some text) This [bbcode] is a test [/bbcode] sentence. (text is wrapped and remains selected). This [bbcode][newcode] is a test [/newcode][/bbcode] sentence. (user clicked another bbcode button). If no text is selected, then simply the open and close tags are inserted, with the cursor blinking in between them.... [bbcode] | [/bbcode] (pipe symbol represents the cursor) Any guidance will be greatly appreciated! -- Roger Hi all, I made up a little test program to grab the mouse X and Y coordinates and plan to use it to allow users to resize a window. Anyway, the problem I'm having is that in MSIE-8, the mouse down and movement causes text to be selected (which I don't want). Here's is a screenshot from MSIE: And here is the test program live online: http://three-dog.homelinux.com/mouse/index.htm Notice that the text in the box is selected ... I don't want that to happen. Of course, it works just fine in Firefox, but not MSIE. I would appreciate if someone can tell me how to fix this (and if possible look at my code and see if I'm doing it right - I'm not very skilled at events yet). Thank you. -- Roger Is there anything out there that allows for a diagonal and vertical text capture in javascript or jQuery? I was not successful in finding anything. I have a game similar to word find that I've developed, but I need to be able to capture text vertically and diagonally. Otherwise, the only solution will be for me to do a by-click basis to capture items on the screen. I found the script below which handles horizontal capturing: Code: <script type="text/javascript">
document.body.style.cursor="url(3DArrow.cur), crosshair" ;
if (!window.Kolich){
Kolich = {};
}
Kolich.Selector = {};
Kolich.Selector.getSelected = function(){
var t = '';
if (window.getSelection){
t = window.getSelection();
}
else if(document.getSelection){
t = document.getSelection();
}
else if(document.selection){
t = document.selection.createRange().text;
}
return t;
}
Kolich.Selector.mouseup = function(){
var st = Kolich.Selector.getSelected();
sel_text=st.replace(/\s/gi,"");
if(st!=''){
alert("You selected:\n"+sel_text);
}
}
$(document).ready(function(){ $(document).bind("mouseup", Kolich.Selector.mouseup);});
</script>
I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get: Code: Foo bar frog becomes: Code: Foo <b>bar</b> frog I found some code that works for firefox, but I need it to work in explorer as well. Do you have any ideas or examples how to do this? Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. ) Usage: Code: <a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>
insert function: Code: <script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
var caretPos = textarea.caretPos, temp_length = caretPos.text.length;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;
if (temp_length == 0)
{
caretPos.moveStart("character", -text2.length);
caretPos.moveEnd("character", -text2.length);
caretPos.select();
}
else
textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
var begin = textarea.value.substr(0, textarea.selectionStart);
var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var newCursorPos = textarea.selectionStart;
var scrollPos = textarea.scrollTop;
textarea.value = begin + text1 + selection + text2 + end;
if (textarea.setSelectionRange)
{
if (selection.length == 0)
textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
else
textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
textarea.focus();
}
textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
textarea.value += text1 + text2;
textarea.focus(textarea.value.length - 1);
}
}
</script>
Hi all, Could someone please tell me how to properly add some text content before and after a user's selection? I am working with the TinyMCE editor, and I can get the following from it: * User's selection as a W3C compatible range * User's selection as a browser selection object * User's selection as a node (element) that encompasses the user's selection I also need the user's selection to remain selected after being wrapped. I've looked all over the web and could find nothing (except running into my OWN previous questions about this). Here's an example of what I'm trying to do: First line is original text, second line a part is selected, third line the selection is wrapped and the selection remains selected. I will greatly appreciate some help here. I've been asking everywhere and nobody seems to know (or they don't bother to answer). Thanks! -- Roger hello im attempting to display the output of the radio selection into the textbox. For example, if the user selects 0-15 then display "Your age group is 0-15 years" in the text area. i get the basic logic. i just dont understand how to display the value in the textbox. heres what i have so far if it will clarify my issue. Code: <html>
<head>
<title>lab 8</title>
<script language="javascript">
function textbox()
{
var i;
for(i = 0; i < form1.agegroup.length; i++)
{
if (form1.agegroup[i].checked)
alert("you picked " + form1.agegroup[i].value);
}
}
</script>
</head>
<body>
What is your age group?<br>
<form name="form1">
<input type="radio" name="agegroup" value="0-15" checked>0-15<br>
<input type="radio" name="agegroup" value="16 to 20">16 to 20<br>
<input type="radio" name="agegroup" value="21 to 25">21 to 25<br>
<input type="radio" name="agegroup" value="26 to 35">26 to 3<br>
<input type="radio" name="agegroup" value="36 and up">36 and up<br>
<input type="button" value="submit" onclick="textbox();">
<form name="form2"><textarea rows ="2">
</textarea>
</body>
</html>
btw i know the alert part is wrong. its there because im taking the code i previously had and changing it to display in a textbox instead of an alert. thanks Hi all, I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County). I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database. This piece of code is working well . . . . Code: <?php
$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');
if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}
if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}
?>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}
</script>
<form name="theForm" method="get">
<!-- County SELECTION BASED ON city VALUE -->
<?php
?>
<select name="County" onChange="autoSubmit();">
<option value=''</option>
<?php
//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city
$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);
while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}
?>
</select>
<?php
?>
<br><br>
<?php
if($County!= null && is_numeric($County))
{
?>
<select name="Region" onChange="autoSubmit();">
<?php
//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County
$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);
while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}
?>
</select>
<?php
}
?>
What follows is my form where the javascript is not working - edited quite a bit to save on space! Code:
<head>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit();
}
</script>
</head>
<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />
<label for="Business_name">Business Name</label>
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />
<label for="StreetAddress">Address</label>
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />
<label for="Town">Town</label> <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br />
<?php
$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');
if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}
if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}
?>
<form name = "subform" method="get">
<select name="County" onChange="autoSubmit();">
<option value=''</option>
<?php
$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);
while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}
?>
</select>
<?php
?>
<br><br>
<?php
if($County!= null && is_numeric($County))
{
?>
<select name="Region" onChange="autoSubmit();">
<?php
$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);
while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}
?>
</select>
<?php
}
?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />
<br/>
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>
</form>
</body>
</html>
It's probably obvious to you guys!! Thanks in advance for your help. G'day, How would I go about copying all the prototype functions AND the constructor from one object into another object, and then call them? Code: function myOriginal() {
alert('Hello');
}
myOriginal.prototype.example = function() {
alert('In example '+this.test);
}
function myNewThing() {
// Copy myOriginal into this object here
this.oldconstructor(); // Should now display "Hello"
this.test = 'from myNewThing';
this.example(); // Should now display "In example myNewThing"
}
I know I can use this.example.call(this), but that's not an acceptable solution. I want to deploy this style over dozens, potentially hundreds of objects. Thanks muchly, Your friend from server-side... Either I'm having a moment of stupidity, or have completely failed to understand a fundamental aspect of javascript. The code below is jquery, and uses jquery's extend() function, but I don't think that the issue has anything to do with that... does it? Code: $(document).ready(function(){
var obj1 = {
"name": "spud"
,"age": 32
}
var obj2 = obj1;
$.extend(obj2, {"location": "UK"});
console.log(obj1);
});
By my reasoning, obj1 shouldn't have location set. But it does. If this is something peculiar to jquery, then my apologies and I'll go off to the right forum - but is it? Is the line var obj2 = obj1; not making a copy of the original and leaving the original intact? Is it instead making some sort of reference to it? Why is changing the copy having an effect on the original?? 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. Hi everyone, Is there a shorter and cleaner way of performing the following: The objective is to get the value/input from the first set of textboxes in the form and copy them to other set of textboxes. Outline of the form is as follows: First set of textboxes Company Address City State Zip Country Select number of users -->1 2 3 User 1 Company Address City State Zip Country User 2 Company Div Address1 Address2 City State Zip Country User 3 Company Address City State Zip Country ============================================= At the moment the code looks like this where (comp,div, addra,addrb,city,state,zip and country) are the name attributes of the first set of text boxes and (comp1.....country1,comp2.....country2, comp3....country3) are the name attributes for the textboxes for user 1,2 and 3 respectively. Code: function compAddress(){
document.form.comp1.value = document.form.comp.value;
document.form.div1.value = document.form.div.value;
document.form.addra1.value = document.form.addra.value;
document.form.addrb1.value = document.form.addrb.value;
document.form.city1.value = document.form.city.value;
document.form.state1.value = document.form.state.value;
document.form.zip1.value = document.form.zip.value;
document.form.country1.value = document.form.country.value;
document.form.comp2.value = document.form.comp.value;
document.form.div2.value = document.form.div.value;
document.form.addra2.value = document.form.addra.value;
document.form.addrb2.value = document.form.addrb.value;
document.form.city2.value = document.form.city.value;
document.form.state2.value = document.form.state.value;
document.form.zip2.value = document.form.zip.value;
document.form.country2.value = document.form.country.value;
document.form.comp3.value = document.form.comp.value;
document.form.div3.value = document.form.div.value;
document.form.addra3.value = document.form.addra.value;
document.form.addrb3.value = document.form.addrb.value;
document.form.city3.value = document.form.city.value;
document.form.state3.value = document.form.state.value;
document.form.zip3.value = document.form.zip.value;
document.form.country3.value = document.form.country.value;
Thanks, Essentially, I have an ASP.net page where I load a record set server side and upload it into a listbox. I'm trying to do all the movement functionalities of the listbox items client side. Specifically, I'm trying to figure out how to copy selected listbox items from one listbox to another -- on button click. I've searched for a while, but every example that I found moves the actual item into another listbox, I just want to copy the selected item to another listbox. I'm very new to JavaScript, so ff someone can provide an example or pseudo code, I would greatly appreciate it. Hi guys! i would like to ask for your assistance.. i am creating two template for my work.. and i would like to know what is the javascript that in one click i can copy and paste all the details from template #1 to template #2. considering that each field in template 1 will fall into the correct field in template #2.. http://img130.imageshack.us/i/25157983.jpg/ hope to hear from you soon. thanks! you may also email me at janshawn_54@yahoo.com Hi, I have a requirement where, on a link, when the user clicks, the app should copy all browser favorites and write to a db (table that has two columns, one with fav name and one col for the website link). Thoughts on how to get this done ? How can I read the the browser favorites from a javascript ? Thanks, Deepna Hello all, I am trying to copy the billing information to be the same as the shipping information when they select the checkbox. Everything seems to work except for the State field which is a drop down. Depending on what country they select, the state field will automatically populate. Does anyone know how I can copy the billing state to be the same as shipping as well? Text file attached. Thanks in advance. Hello, Is there anyway to prevent images, words, divisions, etc from being selected? Also if something is selected is there a way to deselect? Thanks! ok i have to selection boxes and they need to read each other and input either a yes or a no into a text form i would really appreciate some help thanks heres what i have if it helps Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>Galvanic Corrosion Chart</title> </head> <body> <br /> <form name="gcc"> <div align="center"><a href="website.html"><img style="border: 0px solid ; width: 278px; height: 50px;" alt="" src="pics/LOGO.png" border="0" height="50" width="278" /></a><br /> </div> <p style="text-align: center;" align="center"><font size="+2"><span style="font-family: Century Gothic;"><font style="text-decoration: underline;" size="+3"> <font face="Futura Bk BT">Galvanic Corrosion Chart<span style="text-decoration: underline;"><span style="text-decoration: underline;"><span style="text-decoration: underline;"><span style="text-decoration: underline;"><span style="text-decoration: underline;" /></span></span></span></span></font></font></span></font><font face="Futura Bk BT"><br /> </font> </p> <br /> <table style="text-align: left; margin-left: auto; margin-right: auto;" height="119" width="610"> <tbody> <tr> <td style="vertical-align: top; text-align: center;" align="center" valign="middle"><font face="Futura Bk BT"><font size="+1"> <font size="+1"> Material 1</font></font><br /> <select name="mat1"> <option>Zinc Plating</option> <option>Zinc Die Casting</option> <option>Galvanize</option> <option>Tin-Zinc</option> <option>Cadmium-Zinc Solder</option> <option>Aluminum(Clad.1100.3003.5052.6160)</option> <option>Cadmium Plate</option> <option>Aluminum Castings</option> <option>Carbon & Alloy Steel, Cast Iron</option> <option>Aluminum(2024.2017.7075)</option> <option>Lead</option> <option>Lead-Silver Solder</option> <option>Tin-Lead Solder</option> <option>Tin Plating</option> <option>Chromium Plate</option> <option>Stainless 18/2</option> <option>Copper & Alloys</option> <option>Stainless 18/8</option> <option>Silver Solder</option> <option>Monel</option> <option>Nickel Plate</option> <option>Titanium</option> <option>Silver Plate</option> </select> <br /> </font></td> <td colspan="1" rowspan="1" style="vertical-align: top; text-align: center;" valign="middle"><font face="Futura Bk BT"><font size="+1"> Material 2</font><br /> </font> <select name="mat2"> <option>Zinc Plating</option> <option>Zinc Die Casting</option> <option>Galvanize</option> <option>Tin-Zinc</option> <option>Cadmium-Zinc Solder</option> <option>Aluminum(Clad.1100.3003.5052.6160)</option> <option>Cadmium Plate</option> <option>Aluminum Castings</option> <option>Carbon & Alloy Steel, Cast Iron</option> <option>Aluminum(2024.2017.7075)</option> <option>Lead</option> <option>Lead-Silver Solder</option> <option>Tin-Lead Solder</option> <option>Tin Plating</option> <option>Chromium Plate</option> <option>Stainless 18/2</option> <option>Copper & Alloys</option> <option>Stainless 18/8</option> <option>Silver Solder</option> <option>Monel</option> <option>Nickel Plate</option> <option>Titanium</option> <option>Silver Plate</option> </select> </td> </tr> <tr> <td colspan="2" rowspan="1" align="center" valign="top"><font face="Futura Bk BT" size="+1">Acceptable</font><br /> <font face="Futura Bk BT"><input name="AR" readonly="readonly" /></font></td> </tr> </tbody> </table> </form> </body> </html> |
|||||||