|
JavaScript - Save The Text Boxes Values
I am doing a website project and I am currently designing product page.
I have created the text boxes dynamically(as many boxes as the user wants) and he can drag and drop the text boxes in the page. I need to create a dynamic line from one text boxes to other text boxes and delete the test boxes which the user does not want. I have created the dynamic graphic line. I know the values of the text boxes can be saved using php in the backend. But is there any way the values with the dynamically created boxes(with <div></div> elements, not with the text boxes) with values and graphics line can be saved online and the user when log-in again can retrieve the work that he saved? Can we code this either in javascript/php? Similar Tutorialsim trying to have it save the values in the menu, i was think either cookies or storing it in the .window thing but i am unsure of how to do these, any help would be great. Code: <script type="text/javascript">
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
<!--
// initialise shortcuts on page load
var selectObj1=null, selectObj2=null// global
function init()
{ selectObj1=document.getElementById("select_1");
selectObj2=document.getElementById("select_2");
selectObj2.disabled=true;
// ========== end init() ==============
// second select box options list
var A= new Array()
A["remote 1"]=["0","yup","DVD-1"];
A["remote 2"]=["0","VCR-1","DVD-2"];
//
// global variables
var saveObj=null, indx=null, targetObj=null, selectNo=null;
//
function process(obj,sNumb)
{ // disable unused select boxes
if(sNumb==1)
{ selectObj1.selectedIndex="0";
selectObj1.disabled=true;
}
else if( sNumb==2)
{ selectObj1.selectedIndex="0";
selectObj1.disabled=true;
}
//
// store selected index
indx=obj.options.selectedIndex;
// invalid selection
if(indx==0){ return; }
// ---------
// save passed parameters for use after timeout deleay
saveObj=obj, selectNo=sNumb;
// put object items list into next select box after clearing
targetObj=document.getElementById("select_"+selectNo)
targetObj.disabled=false;
// clear any existing options note that this starts from end of list, not beginning
for(var i=targetObj.options.length-1;i>-1;i--)
{ targetObj.options[i]=null; }
// build in short delay here to avoid error in Opera browser
setTimeout("finishOff()",50)
}
// ----------- 50ms delay here --------
// called from timeout in function process()
function finishOff()
{ var obj=saveObj; // from global
// fill selectObj options
var i, thisItem=0;
// build options list
switch(selectNo){
case 2 : targArray = A[obj.options[indx].value]; break;
}
//
for(i=0;i<targArray.length;i++)
{ thisItem=targArray[i];
// syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
targetObj.options[i]=new Option(thisItem,thisItem,false,false);
}
obj.blur();
}
// ============ end process() ===================
// fires on selecting in third select box
function finish()
{ select("["+selectObj1.value+"] ["+selectObj2.value+"]")
}
// ------------
//
window.onload=init;
//-->
</script>
Hi guys, i'm trying to develop a code for my sister, i would like to use javascript to finish off the following task: 1. I want to be able to select marks from 0 to 30, from 5 drop down boxes. 2. and as marks are selected, it should upgrade the total. 3. and then show me the total marks when finished. i've got up to creating the drop down boxes, now it's just adding the values once selected. Thanks! anyhelp would be welcome Hello, I am extremely new to JS so please bear with me. Any help is very much appreciated. Currently I am trying to take the values of 2 or more select boxes, add them together and then update a text field each time a selection in one of the select boxes is made. Basically, I am trying to keep a running total. Currently I have it set up so that onchange it grabs the selected value. The problem is that it is being processed as a string I believe. For instance, if there are two variables, a=111 and b=222, the output in the text field reads 111222. I tried using parseInt, but that just returns NaN (not a number?...just a guess). I have seen this solved with if statements, grabbing the selected index # and then assigning an integer, but I am hoping there is an easier way. Again, your help is appreciated. I am working on a job calculator. I have 2 txt input boxes titled "project_rate_field" and "project_time_field" as well as a third box .. "project_pay_total_field" for output.. I need to multiply the rate field and the time field and output the total into the third box. I've never really used javascript before so I dont know much about it or how to write it but im trying to learn. Here is my .js file ... Code: function project_pay_details()
{
var rate = document.getElementById("project_rate_field").value;
var time = document.getElementById("project_time_field").value;
var total = (rate * time);
project_pay_total_field.value = "$" + total;
}
And here is my .html file 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>Untitled Document</title>
<script language="javascript" type="text/javascript" href="functions.js" />
<style>
.wrap { float: right; }
#project_pay { float: left; margin-right: 15px; line-height: 38px; font: 10px Arial, Helvetica, sans-serif; color: #bbb; }
#project_pay_details { border-top: 1px dotted #ddd; padding-bottom: 10px; margin-top: 10px; float: right; width: 100%; }
.field { border: none; line-height: 38px; font: 20px Arial, Helvetica, sans-serif; color: #666; width: 100px; font-weight: bold; margin-top: 6px; }
</style>
</head>
<body>
<form id="project_pay_details" name="form1" method="post" action="" class="editable">
<div class="wrap">
<div id="project_pay">Pay Rate<input type="text" name="project_rate_field" id="project_rate_field" class="field" value="10" />/ hr</div>
<div id="project_pay">Total Hours<input type="text" name="project_time_field" id="project_time_field" class="field" value="0" /></div>
<div id="project_pay">Project Total<input type="text" name="project_pay_total_field" id="project_pay_total_field" class="field" readonly="readonly" value="0" /></div>
<input name="project_pay_details_refresh" type="button" value="Refresh" onClick="project_pay_details()" /></input>
</div>
</form>
</body>
</html>
I need to know what im doing wrong because this obviously doesnt work. Hello, I'm working on a project that involves extracting values from a series of select boxes and then working out the result. The select boxes contain the following: Code: <select name="select_Col1_Row1"> <option value="blue">Blue</option> <option value="green">Green</option> <option value="red>Red</option> </select> <select name="select_Col1_Row2"> <option value="blue" selected="selected">Blue</option> <option value="green">Green</option> <option value="red>Red</option> </select> <input type="text" name="RedSum"> <input type="text" name="BlueSum"> <input type="text" name="GreenSum"> </select> As you can see by my code, I'm early days at this and guessing the steps on the way. I tried using getElementsByTagName on the select and then on the option but had no luck with that. The code below does a wonderful job of returning blue for both select statements... Code: <script type="text/javascript">
function getElements()
{
var table = document.getElementById("x");
var x = table.getElementsByTagName("option");
for (var i = 0; i < x.length; i++) {
var status = x[i].getAttribute("selected");
alert(status);
if (status == "selected") {
var statushcap = x[i].getAttribute("id");
var statusvalue =x[i].getAttribute("value");
if (statusvalue == "blue") {
alert(statusvalue);
}
}
}
alert(x.length);
}
</script>
If someone could suggest some way to map the select tag and then extract its option value to being the user selected value, I'd most appreciate it. I can probably do the rest of it. Can you extract additional information from the id of the option that is selected as I'd like to sum additional information from the user's choice. Best, John Hi gud mng, I have one problem... How to process textbox values/ call textbox values in JS through a Java program. My text box values are dates. I have to process these dates. Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database. My files are look like 20100929, 20100930, 20101001 For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml Code: Code:
<html>
<table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0">
<tr><td id="leftcolumn" width="170" align="left" valign="top">
<div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3>
<a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br /> <br />
<a rel="nofollow" target="_top" href="between.htm" >Between Days</a>
<link rel="stylesheet" type="text/css" href="epoch_styles.css" />
<script type="text/javascript" src="epoch_classes.js"></script>
<script type="text/javascript">
var cal1, cal2;
window.onload = function ()
{
cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1'));
cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2'));
};
/*............*/
function confirmation(f)
{
var startdate = f.fromdate.value
var enddate = f.todate.value
var myday=new Date()
var yr=myday.getFullYear()
var mn=myday.getMonth()+1
var dt=myday.getDate()
var today=""
var present, ys, ms, ds, ye,me,de, start, end
if(mn < 10) { mn = "0" + mn }
if(dt <10) { dt = "0" + dt }
today= yr + "/" + mn + "/" + dt
present=yr + "/" + mn + "/" +dt
if (today < startdate )
{
alert (" Start date should not be exceed to-day's date " + present )
startdate.focus()
return false
}
if (today < enddate )
{
alert (" End date should not be exceed to-day's date " + present )
enddate.focus()
return false
}
if (today == startdate )
{
alert(" You are selected to-days date as Starting day" );
}
var answer = confirm("Do you want to continue ?")
if (answer)
{ if( startdate < enddate)
alert("Dates between " + startdate + " to " + enddate + " are confirmed" )
else
alert("Dates between " + enddate + " to " + startdate + " are confirmed" )
}
else
{
alert("Date not confirmed")
window.location="to_date.htm";
}
ys= startdate.substring(0,4);
ms= startdate.substring(5,7);
ds= startdate.substring(8,10);
start=ys + "" + ms + "" +ds
ye= enddate.substring(0,4);
me= enddate.substring(5,7);
de= enddate.substring(8,10);
end=ye + "" + me + "" +de
}
/*.......................................................*/
</script>
<div style="margin-left:100px;">
<body>
<style type="text/css">
#conf
{
margin-left:115px;
}
</style>
<td align="left" valign="top">
<table width="100" border="0" cellpadding="0" cellspacing="0">
<td style="padding-top:0px">
</table>
<h4>From Date</h4>
<form name= "formbet" id="placeholder" method="post" action="#" >
<input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/>
<td align="left" valign="top">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<td style="padding-top:20px">
<h4>To Date</h4>
<input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br />
<input id="conf" type="button" onclick="confirmation(this.form)" value="Submit">
</form>
</body>
</html>
In my coding, ys, ms, ds represents year starting, month starting, starting day... ye, me, de represents end... start,end gives file names in the format of yyyymmdd now i want to process files from 20100101 to 20100930 means from date is 2010/01/01 and to date is 2010/09/30 if i press submit button the files from 20100101 to 20100930 are processes here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30 For this how do i call these textbox values (from date text box and todate) to another program (java) Thanks in advance. Hello all, i am a newbie here. I am starting to programme with javascript. I am designing a website. in This website there is an input with type = text and beside this input, there is another input with type = submit. If i open this website: The default value on the search text is "Enter a text", and if I click submit button, this button can recognize the value of the search text which is "Enter a text". <input id="searchText" type="submit" value="Enter a text"/> <input id="searchSubmit" type="submit" value="Submit"/> And then i modified a little bit. I have this javascript: var searchInput = $('#searchText'); searchInput.focus( function() { searchInput.attr('value', ''); }); The goal is, when I click on the search text, the default text is gone. And it worked. But if i write a new text on the search text, the submit button still recognized the value of search text as empty string. Can anyone please help me?? Thank you Hello, i m new Javascript but knows basics of functions etc. ive created a website, which also has field to Submit Email addresses for newsletters.. Now, i have a TextBox (for users to write email addresses) and a Submit button in which i want to call a Javascipt script function which OnClick takes the value(email address) from the textbox and saves it to a .txt file on server. i think i am just missing a single line, the function name which will store the value.. i searched ovr the net but didnt find it.. plz help mee. Thankyou! hi, i want to create a extension for chrome using which i can save the current tab url in a text file. thanks sanjay I've looked all over google but can't seem to find this out. How do you make it so you have 2 text boxes beside each other where you type (for example) 1 character in the first, and it flows into the next (without the need for pressing tab or whatever) I'm talking about the sort of thing you get when entering a software key Hi, I'm a javascript noob, and I am doing a project for CS. I got the page to look how it is supposed to, but it does not work correctly. The input boxes should display a number between 1-4 in the output boxes, but the box displays [object HTMLInputElement] instead. And the buttons all perform their task to one output box, not their own output box. Sorry if that was confusing. Please take a look. <html> <!-- esp.html Nick Bravante --> <!-- C --> <!-- ======================= --> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; number = RandomInt(1, 4); document.getElementById('messageBox').value= "You guessed " + guessOne + " My number was " + number + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessOne" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 1" onclick="PickNumber();" /> <br /> <input type="text" id="messageBox" size="90" /> </p> </body> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBoxTwo { var number; numberTwo = RandomInt(1, 4); document.getElementById('messageBoxTwo').value= "You guessed " + guessTwo + " My number was " + numberTwo + "."; } </script> </head> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; numberThree = RandomInt(1, 4); document.getElementById('messageBox').value= "You guessed " + guess + " My number was " + numberThree + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessTwo" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 2" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxTwo" size="90" /> </p> </body> </br> <body> Enter your Guess(1-4).<input type="num" id="guessThree" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 3" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxThree" size="90" /> </p> </body> <head> <center> <title> <h1> ESP Tester </h1> </title> <script type="text/javascript" src="http://dave-reed.com/book/random.js"> </script> <script type="text/javascript"> function PickNumber() // Results: displays a random number in messageBox { var number; numberFour = RandomInt(1, 4); document.getElementById('messageBoxFour').value= "You guessed " + guessFour + " My number was " + numberFour + "."; } </script> </head> </br> <body> Enter your Guess(1-4).<input type="num" id="guessFour" size="4" value="" /> </body> <body> <p style="text-aign:center"> <input type="button" value="Guess 4" onclick="PickNumber();" /> <br /> <input type="text" id="messageBoxFour" size="90" /> </p> </body> </html> Hi, I have a drop down menu, which you select an item and the text in a text box below displays according to what has been chosen from the drop down list. I have too much text in some case to appear in the text box, so i wanted to find some code so i can select different numbers for pages so i can display the information on different pages. Is this possible. Thanks I am trying to pass data from one form to another form using the url i can get it to come up on the next pages url but how do i get it to go to a text box on the new form. is there a way of assigning text boxes. being trying it in javascript and asp even php would like to keep it to javascript but am open minded to just get it to work figured out, sorry
hello, I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/> xxxx = random number the page may contain only one text box id=product or more i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box Code: var price = document.getElementById('price').value;
var allElements = document.form1.product;
var len=allElements.length;
if(allElements.length){
for (i = 0; i < len; i++){
allElements[i].value = price;
}
I'm not a javascript expert so i don't know if this code is the right way to accomplish this. Thank you very much for your help I have been using just basic text lately and now convert them to smiles when it is ECHO'd on the page later on when the page is viewed again. but with to know how to insert them by clicking the images.
Hi guys, I have a form I am working on that has 4 text boxes in it, but I want to change it so that if a Radio button is selected it makes the 4th text box disappear, but still gives it a value of "0" when the form is submitted. Is this possible with Javascript? Here is what it looks like so far - Code: <FORM><table id='table_columns'>
<tr>
<td colspan="2" align="center">3 Columns <input name="3columns" type="radio" value="3columns"> 4 Columns <input name="4columns" type="radio" value="3columns"></td></tr><tr>
<td align="right"><p>Column 1</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH1" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 2</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH2" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 3</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH3" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
<tr>
<td align="right"><p>Column 4</p></td>
<td align="left"><input class="txt" size="2" maxlength="2" name="WIDTH4" size="20" Title="Insert the desired width" value="25" /></td>
</tr>
</table>
<br />
<input type="button" value="Save" Title="Save these Settings" onClick="updateSettings('COLUMNS');" /></FORM>
If 3 Columns, WIDTH4 is not viewed and defaults to "0". If 4 Columns, all are visible and the number is then optional. Would love some assistance with this as my coding skills are pretty limited and my fingers have gone numb trying to google an answer. Hello all, I have a requirement where i need to take an IPv4 address as an input, my web page has 4 text boxes. If i have a address like this 255.255.255.255, my program jumps into the next text box without any problem as soon as i enter the 3 digits. i dont need to press any tab or any other key to go to next text box. In case of an address like 12.24.12.3, i have to press <tab> to jump into the next text box, My project requirement says that it should work with '.' (dot) char as well. SO here is my actual requirement i need to jump into the next text box as soon as user enters a dot (.) char without displaying the dot into the text box. I am writing this program in perl CGI. Thanks, Vaibhav Hello! I need some help here. I need to pre-populate a name and a phone number box based on what's entered in the employee id box. By entering in the employee id - EMPLOYEE ID: [JOHN R] It automatically fills in - Employee Name: [John Roberts] Employee Phone: [1234567890] Thanks. I've been playing around with a madlibs exercise while trying to learn simple javascript. I have three input boxes and a button display an alert containing the input from the boxes. Am I right to be assigning variable names to the values from the text boxes and then referencing those variables in my alert? I'm sorry if this is a dumb question but I've been working on it for hours and can't get past this point. Inset a name: <input type="text" id="textbox1" size="10"/> </br> Insert a verb : <input type="text" id="textbox2" size="10"/> </br> Insert a place: <input type="text id="textbox3" size="10"/> <input type="button" value="CLICK WHEN FINISHED" onClick="name = document.getElementById('textbox1').value; verb = document.getElementById('textbox2').value; place = document.getElementById('textbox3').value; alert('Mad Lib :' + name + " " + verb + " " + place);" /> |
|||||||