|
JavaScript - How To Assign Data To Text Boxes
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 Similar TutorialsThis is my first posting on this forum so please be gentle Here is the link to a page on my work web: - http://www.deltaclub.co.uk/businesslinkform.html You will see that I have three combo box objects on this form - one containing dates (Date) and the other two containing times (Time1 & Time2). Each time on each date is an available appointment. I would like the content of the date combos to be read from a file whenever the page is opened - a text file with one record per row would be fine (by way of an example - but this may be insufficient). On the face of it this would seem fairly rudimentary but I don't code in JavaScript of PHP and, having found this site I can make a start. I used to be a VB coder. On each date the following appointment times are available: - 10:00 11:00 12:00 14:00 15:00 This assumes that no appointments on a given day are taken. This leads me to conclude that each date should have records for each time - possibly as a CSV text file as follows: - "29th May 2009","10:00" "29th May 2009","11:00" "29th May 2009","12:00" "29th May 2009","14:00" "29th May 2009","15:00" "14th June 2009","10:00" "14th June 2009","11:00" "14th June 2009","12:00" "14th June 2009","14:00" "14th June 2009","15:00" The second time combo should make unavailable the time selected in the first time combo and present only those times available on the chosen date in the CSV file on the server. When I confirm appointments, at present I have to edit the page objects and update the web - which is quite messy and slow whereas uploading a simple text file, whilst an imperfect solution, is much better than what I currently have. I believe that a PHP or Javascript routine based on events on the three objects would remove the inherent problems and would provide a useful set of building blocks for other routines of a similar nature. The routine would trigger whenever the page is loaded (or refreshed) or the content of any one of the three objects gets or loses the focus or a selection is made in an object. The Date Combo would need to look up the available dates - keeping the currently selected date selected or, if that date is no longer available defaulting to the first date in the list. The user then makes a selection or makes no change to the selected date. The Time1 Combo then reads the available times for that date, retains the currently selected time (if available) or the first available time (if the selected is not available) and the user makes a selection or accepts the current selection. The Time2 Combo does the same as the Time1 Combo and in addition it eliminates the time selected in the Time1 Combo from the available choices. The result is that visitors are only offered available times on available dates (insofar as this solution provides). When the form is submitted I would receive the email and confirm the appointment with the client and, in addition, I would modify and upload the modified data file to the web server using Filezilla. The benefit is that there is a slim to none chance of two people wanting to book the same times on the same date at exactly the same time (though it is possible). In addition, I can add new dates and add new times if there is a demand and I can even add previously deleted times if there is sufficient demand to warrant bringing in a second consultant to take the meetings. I'm aware of the commercial solutions that are available but my boss won't pay for them and having a solution that could be adapted to bolt into any scenario (with suitable code modifications) would be a real asset. Any contribution would be most gratefully accepted. Thank you for reading this. __________________ Kind regards, Martyn Required knowledge increases at a rate exponential to the rate at which knowledge may be acquired. 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'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> figured out, sorry
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? 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 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 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. 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 all, I'm very new to Javascript and wonder if someone can help me. I'm creating an online enrolment form for my company, who are a training company. Users enrolling on the course must make three choices - The level of course, the size of course and whether they wish to attend a workshop or study by distance learning. The combination of these three factors will determine the price. I'd like to have the price automatically calculated using javascript and displayed on the form before they submit. Can anyone give me an idea of how to do this? There are three drop down boxes for users to select their course. They a - Level of Qualification: Level 3 Level 4 Level 5 Level 6 Scale of Qualification: Award Certificate Diploma Preferred Delivery Method Workshop Distance Learning Each possible combination of these will affect the price. So for instance, if the user were to select 'Level 4', 'Certificate' and 'Workshop' the price would be calculated based on these three options. How can I calculate the ultimate price and then display it on the page (I was thinking of using innerHTML in a 'span' element to display the final value, but if anyone has any better ideas I'd be glad to hear them) The HTML code for the drop down boxes is below: Code: <form action="enrolment.php" method="post"> <select name="level" class="input" id="level"> <option value="chooselevel"></option> <option value="Level 3">Level 3</option> <option value="Level 4">Level 4</option> <option value="Level 5">Level 5</option> <option value="Level 6">Level 6</option> </select> <select name="size" class="input" id="size"> <option value="choosesize"></option> <option value="Award">Award</option> <option value="Certificate">Certificate</option> <option value="Diploma">Diploma</option> </select> <select name="delivery" class="input" id="deliv"> <option value="deliverymethod"></option> <option value="Workshop">Workshop</option> <option value="Distance Learning">Distance Learning</option> </select> </form> Thanks all, hope someone here can help! Regards Chris *EDIT: I should mention that the form is also inside a table - Not sure if that will make a difference. So I need some help with figuring out how to reset both my text boxes when I click a different radio button so that I can give another value in the textbox area. I am trying to do it without a reset button. Any helpful ideas? I am just confused with the process of resetting the values of both the text boxes in the code.Hmmm......lol I feel like the answer is to put it inline in the <input> tag... Code: <body>
<div id="content">
<h1>Convert temperature</h1>
<input type="radio" name="conversion_type" id="to_celcius" onclick="document.getElementById('degrees_celcius').disabled=this.checked;" />From Fahrenheit to Celcius<br />
<input type="radio" name="conversion_type" id="to_fahrenheit" onclick="document.getElementById('degrees_fahrenheit').disabled=this.checked;" />From Celcius to Fahrenheit<br />
<br />
<label>Degrees Fahrenheit:</label>
<input type="text" id="degrees_fahrenheit" class="disabled" /><br />
<label>Degrees Celcius:</label>
<input type="text" id="degrees_celcius" class="disabled"/><br />
<br />
<input type="button" id="convert" value="Convert" /><br />
<br />
</div>
</body>
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);" /> Hello all, I am doing a website project and in that currently I am designing a product page. I have to design add values to text boxes and drag and drop the text boxes in the workspace and delete the text boxes the user does not want and have to draw a graphical line between the text boxes which are in order. I have designed and coded everything except the graphical line part. I am a learner in javascript and Can we draw a graphical line dynamically between the text boxes in the webpage? If we can draw, can anyone let me know the tutorial for that so that I can learn and start coding as I have to submit that project soon. Thank you. Hello all, firstly I'm trying to make a button which you press then it will create a text box, I'v seen scripts that hide / show a text box, but every time you press this link I want it to display another text box. Example Below. I'v created what I want in HTML, but when a player clicks the link it needs to display a new box everytime. Code: <input type='text' size='50' id='jsuniquecode'> This is my html box which I would like to show. thanks! I'm sure the code must not be that different to the ones which show / hide an item. Thanks for reading my thread and it would be much appreciated if somebody could help me figure out where I should start etc. Thanks. hi ! i would like to write the code for multiple text box select as shown in the link below: http://www.downloadplex.com/Mobile/I...ne_284120.html please see the screen shot 3 this is the example of the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> MY CALCULATION</title>
<meta name="description" content="Adds form content">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var location1;
var location2;
var address1;
var address2;
var latlng;
var geocoder;
var map;
var distance;
// finds the coordinates for the two locations and calls the showMap() function
function initialize()
{
geocoder = new google.maps.Geocoder(); // creating a new geocode object
// getting the two address values
address1 = document.getElementById("address1").value;
address2 = document.getElementById("address2").value;
// finding out the coordinates
if (geocoder)
{
geocoder.geocode( { 'address': address1}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//location of first address (latitude + longitude)
location1 = results[0].geometry.location;
} else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
geocoder.geocode( { 'address': address2}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//location of second address (latitude + longitude)
location2 = results[0].geometry.location;
// calling the showMap() function to create and show the map
showMap();
} else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
// creates and shows the map
function showMap()
{
// center of the map (compute the mean value between the two locations)
latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);
// set map options
// set zoom level
// set center
// map type
var mapOptions =
{
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
// create a new map object
// set the div id where it will be shown
// set the map options
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// show route between the points
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = {
origin:location1,
destination:location2,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
distance += "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;
}
});
// show a line between the two points
var line = new google.maps.Polyline({
map: map,
path: [location1, location2],
strokeWeight: 7,
strokeOpacity: 0.8,
strokeColor: "#FFAA00"
});
// create the markers for the two locations
var marker1 = new google.maps.Marker({
map: map,
position: location1,
title: "First location"
});
var marker2 = new google.maps.Marker({
map: map,
position: location2,
title: "Second location"
});
// create the text to be shown in the infowindows
var text1 = '<div id="content">'+
'<h1 id="firstHeading">First location</h1>'+
'<div id="bodyContent">'+
'<p>Coordinates: '+location1+'</p>'+
'<p>Address: '+address1+'</p>'+
'</div>'+
'</div>';
var text2 = '<div id="content">'+
'<h1 id="firstHeading">Second location</h1>'+
'<div id="bodyContent">'+
'<p>Coordinates: '+location2+'</p>'+
'<p>Address: '+address2+'</p>'+
'</div>'+
'</div>';
// create info boxes for the two markers
var infowindow1 = new google.maps.InfoWindow({
content: text1
});
var infowindow2 = new google.maps.InfoWindow({
content: text2
});
// add action events so the info windows will be shown when the marker is clicked
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker1);
});
// compute distance between the two points
var R = 6371;
var dLat = toRad(location2.lat()-location1.lat());
var dLon = toRad(location2.lng()-location1.lng());
var dLat1 = toRad(location1.lat());
var dLat2 = toRad(location2.lat());
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(dLat1) * Math.cos(dLat1) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
document.getElementById("distance_direct").innerHTML = "<br/>The distance between the two points (in a straight line) is: "+d;
}
function toRad(deg)
{
return deg * Math.PI/180;
}
</script>
<style type="text/css">
.style1 {
text-align: center;
}
</style>
</head>
<body>
<div id="form" style="width:100%; height:20%">
<table align="center">
<tr>
<td colspan="7" align="center"><b>Find the distance between two
locations</b></td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr>
<td>First address:</td>
<td> </td>
<td><input type="text" name="address1" id="address1" size="50"></td>
<td> </td>
<td>Second address:</td>
<td> </td>
<td><input type="text" name="address2" id="address2" size="50"></td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr>
<td colspan="7" align="center"><input type="button" value="Show" onclick="initialize();"></td>
</tr>
</table>
</div>
<center><div style="width:100%; height:10%" id="distance_direct"></div></center>
<center><div style="width:100%; height:10%" id="distance_road"></div></center>
<center><div id="map_canvas" style="width:70%; height:54%"></div></center>
<form name="Form1">
<table id="table-info" border="1" cellpadding="3">
<tr>
<td>DISTANCE</td>
<td>
<input name="ds" type="text">
KM</td>
</tr>
</table>
</form>
</body>
</html>
::in this coding, for example,when user enter 'manchester' for 1st location and 'liverpool' for 2nd location..so,the result will display 55.3km.now,i want that value also appear in the distance text box..do i need to make some declaration or do other function? Hello again eveyone it is the new guy with yet again asilly question. OK here goes.... ..... is it posable to have JS assign a sequental value as the ID for rows in a table. As some of you might know I have an MS Excel spread sheet with data in it that I am wanting to load into a web page. I have worked out how to get the data from Excel but I want to create a JS Function that will read the file then create a table using a template like Clone table but I will need each row entered from the Excel file to have a different ID from the prev entry and different than the next entry. Here is an example of what I'm talking about so that I am as clear as I can be. Quote: Function read () { Reads row 1 from Excel file} Function filltemplatetable (){ Take the data from Function read and placed it in a template table that I have created} Function fillmaintable() {Takes the newly created table object and inplant it in the maintable as a row} Function assignrowid () {assign the newly added row to the maintable as ID 1} Loop back to Function read () untill the last row in the Excel file is copied over to the web page. I was hopeing that the loop could creat a sequenchal numbering system that I could use later on for collaps/expand not to mention filtering but I need to make this an onload so that when I update teh Excel spreadsheet this web page will update the changes. I KNOW I KNOW I just droped a chunk on ya'll and I'm not asking for you guys to do the work for me but I am begging for some direction. I wish I had some CODE to show you guys but I don't have any that pertains to this stage in my work because i'm not even sure it is posable if it isn't then I will need to rethink my creation steps. THANKS AGIN in advance Hi all, How can i read CSV data from the text file using Java Script.Please give me the script for the problem. Thanx, Nari |
|||||||