JavaScript - Dynamically Change The Text Between <> Inside Textarea.
Hi Guys,
I am new to this forum,based on the combobox value,I am creating a textboxes dynamically in jsp .Based on the count of textboxe's the textarea content comes with <value1> like this... Here i tried like this, <html> <head> <script> function copy_data(val,id,textareaValue){ var enteredText = val; alert("enteredText -----------"+enteredText); var boxId= id; alert("boxId-----------"+boxId); var textValue= textareaValue; alert("textValue-----------"+textValue); var beforeBrac = textValue.substring(0,textValue.indexOf("<")); alert("beforeBrac -----------"+beforeBrac ); var inbracket = textValue.substring(beforeBrac.length+1,textValue.indexOf(">")); alert("inbracket -----------"+inbracket); if(boxId = "1"){ inbracket = val; } alert("inbracket -----------"+inbracket); var afterBrac = textValue.substring(textValue.indexOf(">"),textValue.length); alert("afterBrac -----------"+afterBrac ); var fstr = beforeBrac +"<"+inbracket +afterBrac ; if(boxId == "1"){ document.getElementById('txtArea').value = fstr; alert("final str value is"+fstr); } } </script> </head> <body> <input type="text" name ="a" id="1" onkeyup="copy_data(this.value,this.id,document.getElementById('txtArea').value)"/> <input type="text" name ="a" id="2" onkeyup="copy_data(this.value,this.id, document.getElementById('txtArea').value)"/> <textarea rows="2" cols="20" id="txtArea"> At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced <XML>, SQL, ASP, and PHP. </textarea> </body> </html> three text boxes with some value [ value1 ] [value2] [value3 ] this is the text area content:- At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced XML, SQL, ASP, and PHP. the output should be :- At W3Schools you <value1> find all <value2> Web-building tutorials <value3 > need, from basic HTML to advanced XML, SQL, ASP, and PHP... But i can't get it exactly..When i enter or delete the value it should replaced in the proper <> correctly.. If i enter the value in 1st textbox it should replace the value 1st <>.same for others also...Any Idea's ?Plz suggest me ... Similar Tutorialsi presently have a text area which is generated using two arrays.It is loaded at the screen load. It is as following. var channelsGroups = new Array(); var channelsChildren = new Array(); channelsGroups[0]= new Array('Mars Public', 'MARS-PUB'); channelsChildren[0]=new Array(); channelsGroups[1]= new Array('Mars Private', 'MARS-PRIVA'); channelsChildren[1]=new Array(); channelsGroups[2]= new Array('Internet Booking Engine', 'IBE'); channelsChildren[2]=new Array(); channelsGroups[3]= new Array('mars Private Agent Specific', 'M-P-AGENT'); channelsChildren[3]=new Array(); channelsChildren[3][0]=new Array('AGT_002',' AGT_002 '); channelsChildren[3][1]=new Array('CARLSON WAGONLIT AUSTRALIA PTY',' 235830 '); channelsChildren[3][2]=new Array('Travel Zone',' TRAVELZONE '); channelsChildren[3][3]=new Array('Worldlink Travels',' WORLDLINK '); channelsChildren[3][4]=new Array('AAAAAAARFDS',' ADM2 '); channelsChildren[3][5]=new Array('AAASSRet',' DMM3 '); channelsChildren[3][6]=new Array('Adrian Travels',' DMM1 '); channelsChildren[3][7]=new Array('Buraha Travels',' DMM2 '); and more Output in the textArea is as following i presently have a text area which is generated using two arrays.It is loaded at the screen load. It is as following. i presently have a text area which is generated using two arrays.It is loaded at the screen load. It is as following. Mars Public Mars Private Internet Booking Engine mars Private Agent Specific -AGT_002 -CARLS... I hope you inderstand the pattern. I want first to display only the groups(Mars Public, Mars Private) and when someone clicks on mars private Agent specific, the list of agents appear. There are other groups below agents and those groups also may have children.Those groups also should have the same on click functioanlity? Any Idea? Thank you in advance... Hi all, I have a set or icons that which over time I replace with a different icon and and add a onclick event to them. This is my code Code: function updateStatusIcons(retText) { updatingStatuses = true; var updates = retText.split("|"); for (z=0; z<updates.length; z++) { var sysId = trim(updates[z].split(":")[0]); var projectId = trim(updates[z].split(":")[1]); if (projectId != "") { var statusImg = getSysidsImg(sysId); statusImg.src = "images/tick.gif"; statusImg.className = "hand"; statusImg.title = "Project "+ projectId +" created, Click here to find in project search"; statusImg.onclick = function () { document.location = "projectSearch-FTTC.jsp?initAction=loadproject&projectId="+ projectId; }; // Remove sysid from csv removeSysidfFromCSL(sysId); } } if (pollingOn) { pollingupdate = setTimeout("checkForProjectComplete()", 5000); } updatingStatuses = false; if (runErrorFunction) { markErrors(); } } Everything works fine except for the onclick event. In the hover message of the icon, the correct project ID is displayed in the message, hoever in the function, the onclick funtion always loads the page with the last set project id. How can I pass the project id into the onclick function and make it stay fixed and not be the value of that it was last set to? TIA, Dale Forgive me, I come from a ColdFusion background and DOM manipulation is not one of my strongest assets. I am trying to dynamically create (and also delete) a row inside a table, which contains three cells that each have three form elements (a input box, a select drop-down box that is populated by a query to a database, and a textarea). Now all the JavaScript/jQuery examples I've seen for dynamically creating elements are very basic, nothing this complex. Could I get some help?! This is what I'm trying to dynamically create so that the user can add more options but also delete them. Would the jQuery clone() function be a good choice for this? Code: <tr> <td> <input type="text" id="rejectName" /> </td> <td> <select id="divSelectReason"> <option value="" selected="true">Enter Rejection Reason</option> <cfoutput query="queryReasonReturn"> <option>#codeAndReason#</option> </cfoutput> </select> </td> <td> <textarea id="editReason" cols="30"></textarea> </td> </tr> Now when a row is dynamically created I also have to access those values as well, so I would assume using a variable that counts each row created, and appends that iteration to the name of that particular element. Hey there everyone. I've got a form which has a couple of inputs. The 1st is just a text input and the 2nd a textarea. I have it so that when someone types into the 1st input some javascript causes a div elsewhere on the page to update with whatever's being typed. html: Code: <div class="input text required"> <label for="CampaignTitle">Title</label> <input name="data[Campaign][title]" type="text" maxlength="76" id="CampaignTitle" /> </div> Javascript: Code: $('#CampaignTitle').bind("onpropertychange input", function() { $('#titleBar').text(this.value); }); That works fine. But using the above I tried to create a similar effect for the textarea but it doesn't work: html: Code: <div class="input textarea"> <label for="CampaignStory">Story</label> <textarea name="data[Campaign][story]" class="ckeditor" cols="30" rows="6" id="CampaignStory" ></textarea> </div> javascript: Code: $('#CampaignStory').bind("onpropertychange input", function() { $('#story').text(this.value); }); How can I make it work thanks Below is the code. My function: Code: function swap_content(id1,id2) { var tmp = document.getElementById(id1).name; var theval = document.getElementsByName('primary_propertyp_id')[0].value; document.getElementById(id1).name = document.getElementsByName('primary_propertyp_id')[0].name; document.getElementsByName('primary_propertyp_id')[0].name = tmp; document.getElementById(id2).id = document.getElementById('primary').id; document.getElementById('primary').id = 'addressid_'+theval+'_div'; } Applicable Code for primary info: Code: <div id="primary"> <label>primary to secondary:</label><input name="primary_propertyp_id" type="text" id="addressid_<? echo $row['primary_property_id']; ?>" value="<? echo $row['primary_property_id']; ?>"/> </div> Applicable Code for secondary info/link to change: Code: echo "<div id=\"addressid_" . $properties_row['id'] . "_div\">"; echo "<a href=\"#\" onclick=\"swap_content('addressid_" . $properties_row['id'] . "','addressid_" . $properties_row['id'] . "_div'); return false\">Make Primary</a>"; echo "<input id=\"addressid_" . $properties_row['id'] . "\" name=\"addressids[]\" value=\"" . $properties_row['id'] . "\" type=\"text\">"; echo "</div>"; This is running through a PHP loop so it's making multiple divs and links for the secondaries. I am wanting to be able to swap out any of them to make them 'primary'....this works for the first click, but after the first click it makes every div id and input name the same as the first that was clicked. It's also not working AT all if i click on the bottom link first, then a link above it. Top-down works, bottom-up doesn't...Please help Thanks in advance, Jeremy Hi, I try to change script source dynamically. When I use the following code, it works fine, and the script is executed Code: <script type="text/javascript"> document.write('<script src="http://gamestoenjoy.com/site/test.php"'); </script> However when I use the following code, it doesn't work, the script isn't executed Code: <script type="text/javascript"> var url = "http://gamestoenjoy.com/site/test.php"; document.write('<script src=url>'); </script> The only difference between the codes is that in the first code I use constant sting, and in the second code I use variable, in order to make the source dynamic. Please help me to solve this problem. Hello, I have been looking for this all day - Change currencies throughout the page when choosing between countries or currencies from dropdown menu. What I basically need is a dropdown menu which shows countries or currencies. When you select anyone of it like USD all the prices throughout the page are changed to USD. Now if you change it AUD/CAD/PKR etc they will be changed accordingly. A very good example of this is: http://creativeon.com. When you change currency from right top dropdown menu - it changes the currencies of all the packages in the main content. I am a HTML developer and do not know much about javascripting. Please help me. P.S. I have searched codingforums.com too and found only two links which are not of my use because they are currency converter: http://www.codingforums.com/showthread.php?t=196577 http://www.codingforums.com/showthread.php?t=196373 Best Regards and Thanks in Advance. I'm developing a site for my wife's acupuncture practice (http://www.acupunctuurfengyun.be. Since I have two monitors (one wide screen, one square) attached to my computer I can verify how it will look in different resolutions. While doing so I came across a nasty thing: in some resolutions the content div is very small and not using all of the full browser window (left after the header section). Is it possible to make a change to the CSS min-height and max-height while the page is being loaded? I've looked into lots of samples but all depend on a click or mouse over event and didn't want to work with onload in the body tag. I've also thought about putting the stuff in the PHP part of my code but I am lost at this moment on how to do this. Could someone help me out here? I am trying to figure out how to change certain text's font color, in the text area. I have been looking everywhere, but I haven't found a solution. Any help would be great, thanks, mazzzzz Hi , I am new to javascript and have coded an invoice page through help from some available content on web. here is my requirement My form contains inputs "item ,rate quantity,price" in a tabular form where one can dynamically add or delete rows.And the requirement is that when Quantity is entered the Price should change to Price=Quantity*Rate on tab out So I have used a Javascript onchange() and this works fine for the first displayed row. but for dynamically added rows this does not happen, I am not able change the price value for dynamically added rows. Code is as below direct_invoice.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <script type="text/javascript" src="js/direct_invoice_table.js"> </script> <html> <head> <title>Direct Invoice</title> </head> <body leftmargin="0" topmargin="0"> <p align = "center" font='30'><input type="text" name="company_name" size="20" maxsize="20" /> <b> Invoice</b></p> <table id="Client_Details"> <tr> <th>Client Name:</th> <td><input type="text" name="client_name" size="20" maxsize="20" /></td> </tr> <tr> <th>Client Address:</th> <td><input type="text" name="address_line1" size="20" maxsize="40" /></td> </tr> <tr> <td></td> <td><input type="text" name="address_line2" size="20" maxsize="40" /></td> </tr> <tr> <th>Pin Code:</th> <td><input type="text" name="client_pin" size="7" maxsize="7" /></td> </tr> <tr> <th>City/State/Country:</th> <td><input type="text" id="client_city" size="10" maxsize="30" /></td><td>/</td> <td><input type="text" id="client_state" size="10" maxsize="20" /></td><td>/</td> <td><input type="text" id="client_country" size="10" maxsize="20" /></td> </tr> <tr> <th>Email Address:</th> <td><input type="text" name="client_city" size="10" maxsize="30" /></td> </tr> <tr> <th>TIN/PAN:</th> <td><input type="text" name="tin_or_pan" size="10" maxsize="20 " /></td> </tr> </table> <table align="center" width = "75%"> <tr> <td align = "center"> <!--- very imporant to give the table an id ---> <!--- otherwise it won't know where to edit ---> <table border="1" id="mySampleTable"> <tr> <th>Item No</th> <th>Item Name</th> <th>Description</th> <th>Unit Cost</th> <th>Quantity</th> <th>Price</th> <th> <font color="RED">Delete</font></th> </tr> <tr> <td>1</td> <td><input type="text" name="itemname[]" size="40" "maxsize="100"/></td> <td><input type="text" name="description[]" size="20" " maxsize="100" /></td> <td><input type="text" id = "unitcost[]" name="unitcost[]" size="10" maxsize="100" /></td> <td><input type="text" id = "quantity[]" name="quantity[]" onchange="dynamic_onc();" size="4" maxsize="100" /></td> <td><input type="text" id = "price[]" name="price[]" size="10" maxsize="100" /></td> </tr> </table> <table id="totaltbl" align="right"> <tr> <td></td> </tr> <tr> <th>Vat %</th> <td><input type="text" name="total" size="3" maxsize="3" /></td> </tr> <tr> <th>Total</th> <td><input type="text" id = "total" name="total" size="20" maxsize="100" /></td> </tr> </table> </td> </tr> </table> <form action="save_entry.php" name="eval_edit" method="post" format="html"> <p> <input type="button" value="Add Row" onclick="addRow();" /> <input type="button" value="Calculate Total Amount" onclick="Totalcal();" /> <input type="button" value="Print" /> </p> </form> <p align = "left" font='100'> <b>Company Name: </b> <input type="text" name="company_address_line1" size="20" maxsize="20" /> </p> <p align = "left" font='100'> <b>Company address line: </b> <input type="text" name="company_address_line2" size="20" maxsize="20" /></p> <p align = "left" font='100'> <b>Company Location: </b><input type="text" name="company_address_location" size="20" maxsize="20" /></p> </body> </html> *************** The below is the javascript function that i wrote Code: function addRow() { // grab the element, i.e. the table your editing, in this we're calling it // 'mySampleTable' and it is reffered to in the table further down on the page // with a unique of id of you guessed it, 'mySampleTable' var tbl = document.getElementById('mySampleTable'); // grab how many rows are in the table var lastRow = tbl.rows.length; // if there's no header row in the table (there should be, code at least one //manually!), then iteration = lastRow + 1 var iteration = lastRow; // creates a new row var row = tbl.insertRow(lastRow); // left cell // insert a cell var cellLeft = row.insertCell(0); // here we're just using numbering the cell, like anything else you don't // have to use this, but i've kinda noticed users tend to like them var textNode = document.createTextNode(iteration); // takes what we did (create the plain text number) and appends it the cell // we created in the row we created. NEAT! cellLeft.appendChild(textNode); // right cell // another cell! var cellRight1 = row.insertCell(1); // creating an element this time, specifically an input var el = document.createElement('input'); // a data type of text el.type = 'text'; // the name of the element itemname, and because this is dynamic we also // append the row number to it, so for example if this is the eigth row // being created the text box will have the name of itemname8. super fantastic. // the exact same thing with a unique id el.id = 'itemname[]'+ iteration; // set it to size of 40. setting sizes is good. el.size = 40; // same thing as earlier, append our element to our freshly and clean cell cellRight1.appendChild(el); var cellRight2 = row.insertCell(2); var e2 = document.createElement('input'); e2.type = 'text'; e2.id = 'description[]' + iteration; e2.size = 20; e2.maxsize = 100; cellRight2.appendChild(e2); var cellRight3 = row.insertCell(3); var e3 = document.createElement('input'); e3.type = 'text'; e3.id = 'unitcost[]' + iteration; e3.size = 10; e3.maxsize = 100; cellRight3.appendChild(e3); var cellRight4 = row.insertCell(4); var e4 = document.createElement('input'); e4.type = 'text'; e4.id = 'quantity[]'+ iteration; e4.size = 4; e4.maxsize = 100; cellRight4.appendChild(e4); var cellRight5 = row.insertCell(5); var e5 = document.createElement('input'); e5.type = 'text'; e5.id = 'price[]'+ iteration; e5.size = 10; e5.maxsize = 100; cellRight5.appendChild(e5); // var cellRight7 = row.insertCell(7); // var e7 = document.createElement('input'); // e7.type = 'CHECKBOX'; // e7.id = 'cancel[]'; // cellRight7.appendChild(e7); var cellRight6 = row.insertCell(6); cellRight6.innerHTML = " <input type='button' value='Delete' size='6' onclick='removeRow(this);'/>"; e4.onclick = dynamic_onc(); } function removeRow(src) { /* src refers to the input button that was clicked. to get a reference to the containing <tr> element, get the parent of the parent (in this case case <tr>) */ var oRow = src.parentElement.parentElement; //once the row reference is obtained, delete it passing in its rowIndex document.all("mySampleTable").deleteRow(oRow.rowIndex); } function countRow() { var Rowcount = document.getElementById('mySampleTable').rows.length; document.eval_edit.count.value = Rowcount-1; } function CalculatePrice() { var Rowcount = document.getElementById('mySampleTable').rows.length; document.eval_edit.count.value = Rowcount-1; } function onc() { var a= document.getElementById('unitcost[]'); var b= document.getElementById('quantity[]'); var c = Math.ceil(a.value*b.value); alert(b); document.getElementById('price[]').value =c; } function dynamic_onc() { alert('Jay' ); e5.value =7; } function Totalcal() { var a= document.getElementById('unitcost[]'); var b= document.getElementById('quantity[]'); var c = Math.ceil(a.value*b.value); alert(b.value); document.getElementById('price[]').value =c; } I want to be able to display a table of images, all the same size, click on any one and show a corresponding htm pages in an iframe, click outside the ifram or on it to close it; click on another image and on and on... So far, I am able to hide the initial iframe and/or display it inline but am unable to show it above the table that holds the images. It is not difficult to do this using screen-captured images of the htm pages but I am looking for a dynamic way of doing this either with javascript or php or just plain html. The htm pages contain a recipe with an photo and text in a <table>. If needed, I could whip up a small demo. Any help would be much appreciated. I would like to ask is it posible to add text from a text file to a text area on a page.. Philp if you read this i am not asking for a javascript code i am asking wether or not it can be done. P.s if your a nice person like philp is not and you want to private message me if you have one Hey guys, I am wondering how to send text to a textarea when clicking on a link. Kinda like when clicking on a smiley or bbcode. I have a script, and it works, but only when the text to insert is on one line. Here is the code: Code: <script> function sendtext(e, text) { e.value += text } </script> Code: <img onClick="sendtext(document.myform.mytextarea, ':)')" src="smiley.gif"> Now I want to use this little script to insert an e-mail template which I am getting from the database into my textarea. Only, it works when the template is on one line, I am using this for my php code, which works, so no need to worry about that: Code: <img onClick="sendtext(document.myform.mytextarea, '<? echo ("$row['mytemplate']"); ?>')" src="smiley.gif"> When the "$row['mytemplate'];" is as follows: Code: Hey, this works It works, but when it's as follows: Code: Hey, it does not work Then it doesn't. So whenever there's a linebreak, it does not work. My question is, can someone help me with this, or a similar script, so I can add a piece of text to my textarea which has linebreaks in it? I hope you understand what I'm asking Thanks in advance for the help. How do I resize a textarea to a certain length for text without the scroll bar, it this possible with CSS or do I have to use jQuery?
End result: I want to have buttons along the top of a textarea which will be used to add tags around highlighted text / the text curser thingy. (Basically it will be an edit box like the I am using now to make this post). Problem at the moment: I want to reference the var to use in the function. e.g. Code: function addtext(id) { var al = "<div style=\"text-align:left;\"></div>"; document.myform.outputtext.value += id; } "id" will be defined as "al" in the HTML onclick function, I want this to use "var al" where it says ".value += id;". HTML: Code: <form name="myform"> <textarea name="inputtext">Type Here</textarea><br /> <textarea name="outputtext"></textarea><br /> <input type="button" value="Add New Text" onClick="addtext(al);"> </form> If I do this: onClick="addtext('al'); Then "al" is just written in the output box as it is sending a string, correct? If I do this: onClick="addtext("al"); / onClick="addtext(al); Then nothing happens... Reason I want to do it: Well, because I want to have multiple var's instead of a load of functions... Problem 2 (To fix after first problem): I also want the var to add around the highlighted text, not after all of the text. Hey guys, I have a question about sending text to a textarea. What I want is, if I click on a button, a text has to be sent to my textarea, which I obtain from my mysql database. This last thing I can do myself, but I do not know how to send the text to my textarea. I don't know nothing from AJAX yet, so I think it can be done with AJAX, but also with javascript I guess. Could someone point me in the right direction? Thanks! Hi Peers, i have a button that helps me creating more than one dynamic text box and dropdownlist... how it possible to capture the values in those dynamic comtrols ? i am trying the following but did not work ..when the code is excuted it gives me [object] // Create Text box 1 var newStartDate = document.createElement('input'); newStartDate.setAttribute("type","date"); newStartDate.size=8; //capture the value in a temp variable val1 var val1 = document.getElementsByName(newStartDate); alert(val1); the alert gives [object] thanks Hello, I am trying to get something to work and I am not having any luck. I want to dynamically add a set of fields to a table when when the user onBlur the selection drop-down. I want the cursor to be in the text field of the newly added set. I have been playing around with onfocus function on the hyperlink to see if when focus is gained, it would throw the user into the text field. I am getting the impress that the field has not been created yet, so the getElementbById function cannot find the object just recently created. 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=iso-8859-1" /> <title></title> <script language="JavaScript"> function addEvent() { var ni = document.getElementById('myDiv'); var numi = document.getElementById('theValue'); var num = (document.getElementById("theValue").value -1)+ 2; numi.value = num; var divIdName = "my"+num+"Div"; var newdiv = document.createElement('div'); newdiv.setAttribute("id",divIdName); newdiv.innerHTML = '<div>'+ num +'</div><div class=name><input class=name id=item-' + num + ' type=text name=item-'+ num + '></div><div><select name=selRow-' + num + ' onBlur="addEvent();"><option value="0">Check</option><option value="1">Cash</option><option value="2">Money Order</option><option value="3">EFT</option></select></div>'; ni.appendChild(newdiv); } function setTxtFocus() { var ni = document.getElementById('myDiv'); var numi = document.getElementById('theValue'); var num = (document.getElementById("theValue").value -2)+ 2; document.getElementById('item-' + num).focus; } </script><style type="text/css"> @import url(style.css); </style> </head> <body onload="addEvent();"> <div id=image></div> <form action=process.php method=post> <input type="hidden" value="0" id="theValue" /> <div id="myDiv"></div> <p><a href="javascript:;" onclick="setTxtFocus();">Add Other Suggestion</a></p> <p><input type=submit id="submitbutton" value=Submit disabled> <INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"></p> </form> </body> </html> Thanks jlimited Hi Experts, i'am able create dynamically 2 text boxes ( start date & End Date) . Also i am able to create dynamically (img) calendar gif pictures beside each textbox. What i am stuck on is how to popup a calendar while clicking on the img and assign the date to a dynamic texboxes... Any help is much appreciated.. thank you here is the part of my code : // Create Start Date Text box var newStartDate = document.createElement('input'); newStartDate.setAttribute("type","date"); newStartDate.size=8; // Create calendar 1 img var newCalImg1 = document.createElement('img'); newCalImg1.src = "../media/forms/cal.gif"; // Create End Date Text box var newEndDate = document.createElement('input'); newEndDate.size=8; // Create calendar2 img var newCalImg2 = document.createElement('img'); newCalImg2.src = "../media/forms/cal.gif"; |