|
JavaScript - Adding Two Textboxes Into Third Box
Hi and thanks for your help,
I have two text boxes on my page and a third where I would like it to automatically subtract the two any time either one of them is changed. What is the simplest way to do this? Thanks again for your help, Will Similar TutorialsHello, I have an entry form using multiple select boxes as data entry in the upper portion of my page. below i want additional details of the item selected in a table like textboxes by clicking an add button.So whenever i click the add button a new row of text boxes is again created. problem: upon selecting an additional/new item from the select boxes the first row of textboxes doesn't retain it's value it reflects the currently selected values. all the data mentioned above is contained in a single page is it possible? using a classic asp using javascript to do this?please help, i'm really lost..attach is a snopshot of my page... Hello! coding forums pals, I am resorting to you for help with a html form that uses javascript to validate data. the form is an invoice for a trip order where the user can select a trip location out of a listbox, a number of people traveling, and where they wish to stay(ex. hotel, tent, etc.) after the user selects one for each category and hits the "add to invoice" button, the fields in the invoice should get filled with the corresponding information. Now my question is how can I write code that will insert information in the next row down after the previous row has been filled? basically what logic and programming structure do I need in my function that will know when the first row in the invoice is filled. I'm struggling at the part where when the "add to invoice" button is clicked. some data is added to the invoice, and if the user wants to book another trip, the second trip should be appended in the second row of the invoice. what is happening in mine is that whenever I book another trip, the first one gets overwritten when in fact it should be left intact and the data should get appended in the next row down. Code: <html>
<head>
</head>
<script type="text/javascript">
function addit()
{
var f = document.myform;
var cost = 0;
var percentage = 0;
if(f.destination.selectedIndex == -1)
{
alert("please select a trip from the list");
return false;
}
if((f.travelers[0].checked == false) && (f.travelers[1].checked == false) && (f.travelers[2].checked == false) && (f.travelers[3].checked == false) && (f.travelers[4].checked == false) && (f.travelers[5].checked == false))
{
alert("please specify the number of people traveling")
return false;
}
if(f.accomodation.selectedIndex == -1)
{
alert("please specify your place of stay")
return false;
}
switch(f.destination.selectedIndex)
{
case 0:
document.myform.trip1.value="Mt. Kilimanjaro";
cost="2600";
break;
case 1:
document.myform.trip1.value="Denali";
cost="2000";
break;
case 2:
document.myform.trip1.value="Mt. Everest";
cost="3500";
break;
case 3:
document.myform.trip1.value="Maui";
cost="2700";
break;
case 4:
document.myform.trip1.value="Machu-Pichu";
cost="3100";
break;
}
for(i=0;i<f.travelers.length;i++)
{
if(f.travelers[i].checked)
f.num1.value=f.travelers[i].value;
}
f.cost1.value=parseInt(f.num1.value) * parseInt(cost);
switch(document.myform.accomodation.selectedIndex)
{
case 0:
percentage="0.00";
break;
case 1:
percentage="0.05";
break;
case 2:
percentage="0.15";
break;
case 3:
percentage="0.22";
break;
}
f.accom1.value=f.cost1.value * parseFloat(percentage);
f.total1.value=parseInt(f.cost1.value) + parseInt(f.accom1.value);
}
function deleteit()
{
var f = document.myform;
var txtbox = document.getElementsByClassName("text");
var rad = document.getElementsByClassName("rad");
f.destination.selectedIndex=-1;
f.accomodation.selectedIndex=-1;
for(j=0;j<txtbox.length;j++)
{
txtbox[j].value="";
}
for(x=0;x<rad.length;x++)
{
rad[x].checked=false;
}
}
function submitform()
{
document.myform.submit();
}
</script>
<body>
<form name="myform">
<table align="center" border="1" bgcolor="skyblue" cellpadding="0" cellspacing="0">
<tr><th>Trips Available</th><th>Number</br> Traveling</th><th>Accomodation</br> Type</th><th>Invoice</th></tr>
<tr><td align="center"><select name="destination" id="Select1" size="4">
<option>Mt. Kilimanjaro</option>
<option>Denali</option>
<option>Mt. Everest</option>
<option>Maui</option>
<option>Machu-Pichu</option>
</select></td>
<td align="center">1<input type="radio" name="travelers" value="1" class="rad"></br>2<input type="radio" name="travelers" value="2" class="rad"/></br>3<input type="radio" name="travelers" value="3" class="rad"/></br>4<input type="radio" name="travelers" value="4" class="rad"/></br>5<input type="radio" name="travelers" value="5" class="rad"/></br>6<input type="radio" name="travelers" value="6" class="rad"/></td>
<td align="center">
<select name="accomodation" id="Select2" size="3">
<option value=0>Tents</option>
<option>Yurts</option>
<option>Hostels</option>
<option>Hotels</option>
</select></td>
<td><table width="90%" align="center" cellpadding="2">
<tr><th>Trip</th><th>Num</th><th>Base</br>cost</th><th>Accom.</br>Surcharge</th><th>Total</th></tr>
<tr><td><input type="text" name="trip1" class="text" readonly></td><td><input type="text" name="num1" size="1" class="text" readonly></td><td><input type="text" name="cost1" class="text" readonly></td><td><input type="text" name="accom1" class="text" readonly></td><td><input type="text" name="total1" class="text" readonly></td></tr>
<tr><td><input type="text" name="trip2" class="text" readonly></td><td><input type="text" name="num2" size="1" class="text" readonly></td><td><input type="text" name="cost2" class="text" readonly></td><td><input type="text" name="accom2" class="text" readonly></td><td><input type="text" name="total2" class="text" readonly></td></tr>
<tr><td><input type="text" name="trip3" class="text" readonly></td><td><input type="text" name="num3" size="1" class="text" readonly></td><td><input type="text" name="cost3" class="text" readonly></td><td><input type="text" name="accom3" class="text" readonly></td><td><input type="text" name="total3" class="text" readonly></td></tr>
<tr><td><input type="text" name="trip4" class="text" readonly></td><td><input type="text" name="num4" size="1" class="text" readonly></td><td><input type="text" name="cost4" class="text" readonly></td><td><input type="text" name="accom4" class="text" readonly></td><td><input type="text" name="total4" class="text" readonly></td></tr>
</table></td></tr>
</tr>
<tr><td><input type="button" value="Add to Invoice" onclick="addit()"/></td><td><input type="button" value="Clear" onclick="deleteit()"/></td><td><input type="button" value="Buy Now" onclick="submitform()"/></td><td align="right">Total Sale:<input type="text" name="total" readonly/></td></tr>
</table></form>
</body>
</html>
Hello, I need your help, I can seem to get this to work. I want to be able to use an IIF to check if a textbox empty ie. IIF(textbox1 = "" || textbox = null, "it is empty","it is not empty") This doesnt seem to be working. Any ideas? - Clueless =? Hi there...I have an autosuggest that I got from a friend. My question is ... the autosuggest works well on my business textbox - what would the code look like to get it to work on the region textbox (or how do I get it to work on more than one textbox - can I just make a copy of the js file and change stuff)... Here is the html code for the index.html page with two boxes and a submit button... 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>Welcome</title>
<link href="searchfield.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="searchfield1.js"></script>
</head>
<body>
<form name="searchresults" action="Site/searchresults2.php" method="post" >
<input name="Business" class="textfield_effect" type="text" value="Enter Business Type or Name" size="30" onfocus="if(this.value==this.defaultValue) this.value='';" autocomplete="off"
id="businessquery" />
<input name="Region" class="textfield_effect" type="text" value="Enter Suburb or Postcode" size="30" onfocus="if(this.value==this.defaultValue) this.value='';" autocomplete="off" id="regionquery" />
<input type="submit" class="textfield_button" value="Search"/>
</body>
</html>
and here is the code for the file called searchfield1.js that powers the autosuggest... Code: this.searchfield = function(){
// CONFIG #
// this is id of the search field you want to add this script to.
// You can use your own id just make sure that it matches the search field in your html file.
var id = "businessquery";
// Text you want to set as a default value of your search field.
var defaultText = "Enter Business Type or Name!";
// set to either true or false
// when set to true it will generate search suggestions list for search field based on content of variable below
var suggestion = true;
// static list of suggestion options, separated by comma
// replace with your own
var suggestionText = "Accounting Firm, Independent Actors, Administration of Public Programs, above the fold, absolute link, accessibility, address bar, affordance, alt text, alt tag, anchor, animated GIF, anti-alias, applet, assumed knowledge, authoring, automagically, autoresponder, back end/front end, backup, bandwidth, banner ad, banner blindness, belt-and-suspenders, bitmap, blog, blogger, blogging, bookmark, breadcrumb, broadband, browser, cache, cached files, call to action, Cascading Style Sheets , chatroom, chrome, click-through rate, client-side/server-side, closure, compatibility mode, data compression, content management system , contextual menu, convergence, cookie, cost-per-clickthrough, cost-per-thousand, crawler, cross-browser compatibility, cybersquatter, deep-linking, default, degrade gracefully, deprecated, design pattern, directory, disjointed rollover, dither, div, div-i-tis, divitis, document type declaration, doctype, document type definition, Domain Name System, DNS server, domain name, DomaiNZ, doorway/gateway page, dots-per-inch, download, Dublin Core metadata, dynamic HTML, e-commerce, email, element, encryption, favicon.ico, File Transfer Protocol, FTP client, firewall, Fireworks, Flash, Flash Generator, flow chart, fold, above-the-fold, footer navigation, form, folksonomy, frame, frameset, front end/back end, gateway page, global navigation, granularity, Graphic Interchange Format, Graphical User Interface, hack, handle, haptics, hexadecimal colours, hits, host, hosting, hotspot, HyperText Markup Language, HyperText Transfer Protocol, HTML markup, HTML-text, hyperlink, iframes, i-mode, image map, impression, include, information architecture, information foraging, initialism, integration, interactive television, interface, internet, interstitial, intranet, Initial Public Offering, Internet Protocol, IP address, IP number, Internet Service Provider, JavaScript, Joint Photographers Expert Group, label, landing page, legacy content, link: absolute, relative, root, link farm, link rot, definition, ordered, unordered, listserv, logfiles, logfile analysis, look-and-feel, lossless compression, lossy compression, macron, mailing lists, markup, meta element, metadata, meta tag, mine-sweeping, MP3, MySQL, natural language, navigation, open source, optimise, optimisation, opt-in/opt-out, PageRank (PR), parasite economy, design pattern, perceived affordance, permission-based marketing, phishing, PHP: Hypertext Preprocessor, Portable Document Format, web portal, Pretty Good Privacy, pixel, plug-in, pop-up window, pop-under, Portable Network Graphic, prosumer, QuickTime, quirks mode, reciprocal links, referrer, referrer log, Really Simple Syndication, relative link, Realtime Transport Protocol, robot, robots file, robots.txt, rollover, disjointed rollover, root, root directory, root link, scan, scanning, schematic, SCM, SCP, search engine, search engine marketing, search engine optimisation, Section 508, Secure Sockets Certificate, semantic markup, server, sever-side/client-side, server-side include, session, session tracking, Shockwave, shopping-cart, shortcut icon, Simple Object Access Protocol, site feed, sitemap, smart tags, Synchronised Multimedia Integration Language, sniffer, spam, spim, spider, splash page, splash screen, spyware, standardista, standards-compliant/strict mode, status bar, sticky, streaming, streaming media, structured query language, stylesheet, system font, tags, tags/tagging, target, template, top-level navigation, topic path, traffic, transform gracefully, transparent GIF, trackback, typosquatter, Unicode, Unicode Transformation Format, Unified Modeling Language, Uniform Resource Identifier, Uniform Resource Locator, uploading, usability, user session, code standards, form input, vector, vector-based file, version control, viral marketing, virus, visual editor, web, Web 2.0, web accessibility, web-authoring, web browser, web font, typeface, web-log, web server logs, websafe colours, palette, web standards, WebTV, what-you-see-is-what-you-get, wireframe, Wireless Application Protocol, Wireless Markup Language, Worldwide Web, eXtensible Markup Language, XML schema";
// END CONFIG (do not edit below this line, well unless you really, really want to change something :) )
// Peace,
// Alen
var field = document.getElementById(id);
var classInactive = "sf_inactive";
var classActive = "sf_active";
var classText = "sf_text";
var classSuggestion = "sf_suggestion";
this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
if(field && !safari){
field.value = defaultText;
field.c = field.className;
field.className = field.c + " " + classInactive;
field.onfocus = function(){
this.className = this.c + " " + classActive;
this.value = (this.value == "" || this.value == defaultText) ? "" : this.value;
};
field.onblur = function(){
this.className = (this.value != "" && this.value != defaultText) ? this.c + " " + classText : this.c + " " + classInactive;
this.value = (this.value != "" && this.value != defaultText) ? this.value : defaultText;
clearList();
};
if (suggestion){
var selectedIndex = 0;
field.setAttribute("autocomplete", "off");
var div = document.createElement("div");
var list = document.createElement("ul");
list.style.display = "none";
div.className = classSuggestion;
list.style.width = field.offsetWidth + "px";
div.appendChild(list);
field.parentNode.appendChild(div);
field.onkeypress = function(e){
var key = getKeyCode(e);
if(key == 13){ // enter
selectList();
selectedIndex = 0;
return false;
};
};
field.onkeyup = function(e){
var key = getKeyCode(e);
switch(key){
case 13:
return false;
break;
case 27: // esc
field.value = "";
selectedIndex = 0;
clearList();
break;
case 38: // up
navList("up");
break;
case 40: // down
navList("down");
break;
default:
startList();
break;
};
};
this.startList = function(){
var arr = getListItems(field.value);
if(field.value.length > 0){
createList(arr);
} else {
clearList();
};
};
this.getListItems = function(value){
var arr = new Array();
var src = suggestionText;
var src = src.replace(/, /g, ",");
var arrSrc = src.split(",");
for(i=0;i<arrSrc.length;i++){
if(arrSrc[i].indexOf(value.toLowerCase()) >= 0){
arr.push(arrSrc[i]);
};
};
return arr;
};
this.createList = function(arr){
resetList();
if(arr.length > 0) {
for(i=0;i<arr.length;i++){
li = document.createElement("li");
a = document.createElement("a");
a.href = "javascript:void(0);";
a.i = i+1;
a.innerHTML = arr[i];
li.i = i+1;
li.onmouseover = function(){
navListItem(this.i);
};
a.onmousedown = function(){
selectedIndex = this.i;
selectList(this.i);
return false;
};
li.appendChild(a);
list.setAttribute("tabindex", "-1");
list.appendChild(li);
};
list.style.display = "block";
} else {
clearList();
};
};
this.resetList = function(){
var li = list.getElementsByTagName("li");
var len = li.length;
for(var i=0;i<len;i++){
list.removeChild(li[0]);
};
};
this.navList = function(dir){
selectedIndex += (dir == "down") ? 1 : -1;
li = list.getElementsByTagName("li");
if (selectedIndex < 1) selectedIndex = li.length;
if (selectedIndex > li.length) selectedIndex = 1;
navListItem(selectedIndex);
};
this.navListItem = function(index){
selectedIndex = index;
li = list.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].className = (i==(selectedIndex-1)) ? "selected" : "";
};
};
this.selectList = function(){
li = list.getElementsByTagName("li");
a = li[selectedIndex-1].getElementsByTagName("a")[0];
field.value = a.innerHTML;
clearList();
};
};
};
this.clearList = function(){
if(list){
list.style.display = "none";
selectedIndex = 0;
};
};
this.getKeyCode = function(e){
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
return code;
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",searchfield);
And here is the code for the CSS file called searchfield.css Code:
/* default (inactive field) */
.sf_inactive{
border:thin solid #CCCCCC;
background:#ffffff;
color:#666666;
font-style: 0;
}
/* on focus (when field is clicked on) */
.sf_active{
border:2px solid #CCCCCC;
background:#fff;
color:#666666;
}
/* with text (when field is inactive but contains user's input) */
.sf_text{
border:2px solid #CCCCCC;
background:#fff;
color:#888;
}
/* suggestions box */
/* js code generates unordered list */
.sf_suggestion{
position:relative;
}
.sf_suggestion ul{
position:absolute;
margin:0;
padding:0;
top:0;
left:0;
background-color: #FFFFFF;
}
.sf_suggestion li{
margin:0;
padding:0;
list-style:none;
}
.sf_suggestion li a{
display:block;
text-indent:5px;
color:#666666;
}
.sf_suggestion li.selected a{
color: #FFFFFF;
background-color: #666666;
}
Many thanks for hints, suggestions and contributions Hi, I have some tickboxes and one is marked Other. So what I would like is when someone put a tick in other, to display 5 textboxes name Other 1 to 5 I presume this is done by javscript, but not sure where to start, can anyone help? Also if possible when they untick it, they disapper, but not a must. Each tickbox is independent from each other. It can also use jQuery or Ajax if that helps 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, i have a form with several headings, then for each heading i have a list of items with a select box filled with numbers. For each heading a maximum of items is allowed, so the user should change the values in the dropdowns and not be allowed to continue until they are less than or equal to their maximum limit. To complicate this, there will be more than one headings on the page, but each one with a different name/id. Eg: Heading 1 Title 1 DROPDOWN1 Title 2 DROPDOWN2 Title 3 DROPDOWN3 So here the max is 10, so the values cannot exceed 10 Heading 2 Title 1a DROPDOWN1 Title 2a DROPDOWN2 Title 3a DROPDOWN3 Title 4a DROPDOWN4 So here the max is 10, so the values cannot exceed 14 thanks Hello, I need your help. I have 2 checkboxes. How would I control one from the other? Eg. [ ] Option A [ ] Option B - If Option A was checked first and, I put a checkmark in option B then Uncheck Option A and leave option B checked. - If Option B was checked and, I put a check mark in Option A then uncheck Option B and leave Option A checked. How would that be written in Javascript, I am totally confused. Any help with this is much and foremost greatly appreciated. Cheers, J I have the following code which adds a dynamically created textbox to a form: Code: function addarow() {
if (count > 5) {return false}
count ++;
addbox = '<input type = "text" name = "txt1" id = "txt1" class = "box">';
document.getElementById("boxes"+count).innerHTML = addbox + "<br>";
}
I am having difficulties in assigning different names/ids to the sequential textboxes, that is "txt"+count to give txt1, txt2 etc. Your assistance will be much appreciated. A child of five would understand this. Send someone to fetch a child of five. Groucho Marx Hi , I have 5 or 6 textboxes and all of them are required ( have required field validators ) .. I want to change their background color to yellow when they are left blank and when the box is filled the backgorund color to white ..Is it possible to do via javascript ..I am a beginer so any help is greatly appreciated Hi all, I create textboxes dynamically by the following code function addElement() { var contentID = document.getElementById('content'); var newTBDiv = document.createElement('div'); newTBDiv.setAttribute('id','strText'+intTextBox); divname='strText'+intTextBox; newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='divid' +intTextBox name='txtbx[]'/>"; intTextBox = intTextBox + 1; contentID.appendChild(newTBDiv); } It works fine,but i want to get the values and validate it so i use the following code.. var idval=new Array(); for(var i=0;i<intTextBox;i++) { idval[i]=document.getElementById('divid').value; alert(idval[i]); } but it didn`t work out,Any suggestions really helpful. Thankyou. <!-- ** Need help completing the javascript in this example ** --> Code: <html> <head> <title>Convert ListBox data into 4 Text Boxes</title> <script language="javascript"> function SplitText ( // NEED HELP WITH THIS CODE split text ","; convert to ['textbox1','textbox2','textbox3','textbox4'] } </script> </head> <body> <form name="convert"> <p style="margin: 2px"> <h3>Convert selected data to textboxes</h3> <!-- SELECT DATA FROM LIST BOX --> <select size="1" name="ListBox" onChange="SplitText();"> <option value="jim,bob,rick,paul" >==Row1==</option> <option value="pete,jack,chris,craig">==Row2==</option> <option value="mary,jane,lisa,kim" >==Row3==</option> </select> </p> <h3>In this example say we selected row1</h3> <!-- THE SELECTED DATA GETS SPLIT AND INSERTED INTO THESE 4 TEXTBOXES --> <p style="margin: 2px"> <input type="text" name="textbox1" value="jim"><br> <input type="text" name="textbox2" value="bob"><br> <input type="text" name="textbox3" value="rick"><br> <input type="text" name="textbox4" value="paul"><br> </p> </form> </body> </html> I have a piece of JavaScript code that should validate that a username field is not empty or null and that a telephone field is in the correct format using event handler registration. It seems to be validating fine but if there is an error it still manages to submit. HTML Code: <html>
<head>
<script type = "text/javascript" src = "js/validator.js" >
</script>
</head>
<body>
<form id = "decorForm" action = "">
<table border = "0">
<tr>
<th>Username: </th>
<td>
<input type = "text" id = "myUserName" size = "15" maxlength = "15"/>
</td>
</tr>
<tr>
<th>Telephone: </th>
<td>
<input type = "text" id = "telephone" name = "telephone" size = "15" maxlength = "13"/>
<br />
(999)999-9999
</td>
</tr>
<tr>
<td>
<input type = "submit" value = "Submit" />
</td>
<td>
<input type = "reset" value = "Reset" />
</td>
</tr>
</table>
</form>
<script type = "text/javascript" src = "js/validatorr.js" >
</script>
</body>
</html>
JAVASCRIPT (validator.js) Code: function chkUser() {
// Verifies that the UserName field is not empty.
var myUserName = document.getElementById("myUserName");
if (myUserName.value == "" || myUserName.value == null) {
alert ("Please enter a Username!");
return false;
} else {
return true;
}
}
function chkTelephone() {
// Verifies that the Telephone field value is in the correct format.
var tel = document.getElementById("telephone");
var pos = tel.value.search(/^\(\d{3}\)\d{3}-\d{4}$/);
if (pos != 0) {
alert ("Please enter telephone number in the following format: (999)999-9999");
return false;
} else {
return true;
}
}
function chkFields() {
// Verifes all fields and returns boolean to event handler
// The event handler function
if (chkUser() && chkTelephone()) {
return true;
} else {
return false;
}
}
JAVASCRIPT (validatorr.js) Code: //Register the event handlers for validator.js
document.getElementById("decorForm").onSubmit = chkFields;
I am trying to use this as an example. Hello! coding forums gals, I am resorting to you for help with a html form that uses javascript to validate data. the form is an invoice for a trip order where the user can select a trip location out of a listbox, a number of people traveling, and where they wish to stay(ex. hotel, tent, etc.) after the user selects one for each category and hits the "add to invoice" button, the fields in the invoice should get filled with the corresponding information. Now my question is how can I write code that will insert information in the next line down and all other lines below if the user wants to schedule more than one trip at a time? basically what logic and programming structure do I need in my function that will know when the first line in the invoice is filled and will add data in the next line down. after I have successfully placed an order, and I want to make another one, how do I get javascript to output data on the second line? Code: <html>
<head>
</head>
<script type="text/javascript">
function addit()
{
var f = document.myform;
var cost = 0;
var percentage = 0;
switch(f.destination.selectedIndex)
{
case 0:
document.myform.trip1.value="Mt. Kilimanjaro";
cost="2600";
break;
case 1:
document.myform.trip1.value="Denali";
cost="2000";
break;
case 2:
document.myform.trip1.value="Mt. Everest";
cost="3500";
break;
case 3:
document.myform.trip1.value="Maui";
cost="2700";
break;
case 4:
document.myform.trip1.value="Machu-Pichu";
cost="3100";
break;
}
for(i=0;i<f.travelers.length;i++)
{
if(f.travelers[i].checked)
f.num1.value=f.travelers[i].value;
}
f.cost1.value=parseInt(f.num1.value) * parseInt(cost);
switch(document.myform.accomodation.selectedIndex)
{
case 0:
percentage="0.00";
break;
case 1:
percentage="0.05";
break;
case 2:
percentage="0.15";
break;
case 3:
percentage="0.22";
break;
}
f.accom1.value=f.cost1.value * parseFloat(percentage);
f.total1.value=parseInt(f.cost1.value) + parseInt(f.accom1.value);
}
</script>
<body>
<form name="myform">
<table align="center" border="1" bgcolor="skyblue" cellpadding="0" cellspacing="0">
<tr><th>Trips Available</th><th>Number</br> Traveling</th><th>Accomodation</br> Type</th><th>Invoice</th></tr>
<tr><td align="center"><select name="destination" id="Select1" size="4">
<option>Mt. Kilimanjaro</option>
<option>Denali</option>
<option>Mt. Everest</option>
<option>Maui</option>
<option>Machu-Pichu</option>
</select></td>
<td align="center">1<input type="radio" name="travelers" value="1"></br>2<input type="radio" name="travelers" value="2"/></br>3<input type="radio" name="travelers" value="3"/></br>4<input type="radio" name="travelers" value="4"/></br>5<input type="radio" name="travelers" value="5"/></br>6<input type="radio" name="travelers" value="6"/></td>
<td align="center">
<select name="accomodation" id="Select2" size="3">
<option value=0>Tents</option>
<option>Yurts</option>
<option>Hostels</option>
<option>Hotels</option>
</select></td>
<td><table width="90%" align="center" cellpadding="2">
<tr><th>Trip</th><th>Num</th><th>Base</br>cost</th><th>Accom.</br>Surcharge</th><th>Total</th></tr>
<tr><td><input type="text" name="trip1" readonly></td><td><input type="text" name="num1" size="1" readonly></td><td><input type="text" name="cost1" readonly></td><td><input type="text" name="accom1" readonly></td><td><input type="text" name="total1" readonly></td></tr>
<tr><td><input type="text" name="trip2" readonly></td><td><input type="text" name="num2" size="1" readonly></td><td><input type="text" name="cost2" readonly></td><td><input type="text" name="accom2" readonly></td><td><input type="text" name="total2" readonly></td></tr>
<tr><td><input type="text" name="trip3" readonly></td><td><input type="text" name="num3" size="1" readonly></td><td><input type="text" name="cost3" readonly></td><td><input type="text" name="accom3" readonly></td><td><input type="text" name="total3" readonly></td></tr>
<tr><td><input type="text" name="trip4" readonly></td><td><input type="text" name="num4" size="1" readonly></td><td><input type="text" name="cost4" readonly></td><td><input type="text" name="accom4" readonly></td><td><input type="text" name="total4" readonly></td></tr>
</table></td></tr>
</tr>
<tr><td><input type="button" value="Add to Invoice" onclick="addit()"/></td><td><input type="button" value="Clear"/></td><td><input type="button" value="Buy Now"/></td><td align="right">Total Sale:<input type="text" name="total" readonly/></td></tr>
</table></form>
</body>
</html>
<!-- ** Need help completing the javascript in this example ** --> <html> <head> <title>Convert ListBox data into 4 Text Boxes</title> <script language="javascript"> function SplitText ( // NEED HELP WITH THIS CODE split text ","; convert to ['textbox1','textbox2','textbox3','textbox4'] } </script> </head> <body> <form name="convert"> <p style="margin: 2px"> <h3>Convert selected data to textboxes</h3> <!-- SELECT DATA FROM LIST BOX --> <select size="1" name="ListBox" onChange="SplitText();"> <option value="jim,bob,rick,paul" >==Row1==</option> <option value="pete,jack,chris,craig">==Row2==</option> <option value="mary,jane,lisa,kim" >==Row3==</option> </select> </p> <h3>In this example say we selected row1</h3> <!-- THE SELECTED DATA GETS SPLIT AND INSERTED INTO THESE 4 TEXTBOXES --> <p style="margin: 2px"> <input type="text" name="textbox1" value="jim"><br> <input type="text" name="textbox2" value="bob"><br> <input type="text" name="textbox3" value="rick"><br> <input type="text" name="textbox4" value="paul"><br> </p> </form> </body> </html> I recently started designing websites, I'm pretty good with working in the design area of expertise. However I am not so great at the development part. I have had little to no experience with java programming. I am putting e commerce on my clients site. He is selling an item that varies in price depending on what size it is. What I am trying to do is have a input for the length and the width and then display the price. I have configured the length and width to multiply and can display the total but I don't know what the if then statement would look like for the price. So lets say the user puts in 4 length and 4 width. I can display 16. But I want to take that and say if =16 then display $21.50 or whatever the cost would be. But I cannot figure out how to code it right for the if then part and then the display part. I am very new to java programming and think i might be a little out of my league with this project but any help you can offer would be great. thank you.
Ok lol don't mock me, I'm only new to javascript. I'm trying to get the text that contains "The Moderating Team" "Today's Active Topics" etc. an id to the div they are contained in. Here's my code so far: Code: <script type="text/javascript">
var c = getElementByClass("div");
if ( c.innerHTML.contains(" The Moderating Team ") ) {
}
</script>
Any help? Oh and my site: http://stereo.b1.jcink.com I'm using a PHP script which has a pop-up box that, when the thumbnail is selected, the video player dynamically appears in the pop-up box. It is outdated, and not working correctly(see attached image), so I'm trying to replace it with venobox: VenoBox - responsive jQuery modal window plugin So far, I've uploaded the venobox folder, and added this: Code: <head> <!-- Add jQuery library --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Add venobox --> <link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" /> <script type="text/javascript" src="venobox/venobox.min.js"></script> </head> Now it says to: "Insert one or more links with its custom class": Code: <a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a> <a class="venobox_custom" data-type="iframe" href="http://www.veno.it">open iFrame</a> For Google Maps use the iFrame href attribute of map's embed code and set data-type="iframe" "For videos use the simple url of the video, such as: http://www.vimeo.com/your_video_id, or http://www.youtu.be/your_video_id" The GreyBox that I'm currently using, I believe the code is this: Code: <tr> <td width="10px"><a href="/videos/[blk1.vid_id;block=div]/" rel="gb_page_center[470,370]" style="float:right"><br /> <img src="/uploads/thumbs/[blk1.video_id;block=div].jpg" alt="video pic" width="120" height="90" border="0" /></a></td> <td width="400px"><!--[var.lang_title]--><a href="/videos/[blk1.vid_id;block=div]/" rel="gb_page_center[520,600] "> <div class="container88888"><!--[blk1.Title;htmlconv=no;block=div;ope=max:70;comm]--></a><br /> <!--[var.lang_description]:-->[blk1.vid_desc;htmlconv=no;block=div;ope=max:268;comm]</div></td> </tr> So, I don't know what, in VenoBox, is meant by "Insert one or more links with its custom class" and please help me, what I should do with these further set up instructions?: Initialize plugin Code: $(document).ready(function(){
/* default settings */
$('.venobox').venobox();
/* custom settings */
$('.venobox_custom').venobox({
framewidth: '400px', // default: ''
frameheight: '300px', // default: ''
border: '10px', // default: '0'
bgcolor: '#5dff5e', // default: '#fff'
titleattr: 'data-title', // default: 'title'
numeratio: true, // default: false
infinigall: true // default: false
});
/* auto-open #firstlink on page load */
$("#firstlink").venobox().trigger('click');
});
Additionally, since I'm trying to get a video to dynamically play in the box, it states: "Data Attributes If the content is not an image you have to specify its type via data attribute data-type" [CODE] <a class="venobox" data-type="iframe" href="http://www.veno.it">Open Iframe</a> <a class="venobox" data-type="inline" title="My Description" href="#inline">Open inline content</a> <a class="venobox" data-type="ajax" href="ajax-call.php">Retrieve data via Ajax</a> <a class="venobox" data-type="youtube" href="http://youtu.be/d85gkOXeXG4">Open YouYbe video</a> <a class="venobox" data-type="vimeo" href="http://vimeo.com/75976293">Open Vimeo video</a> [/CODE} Any help/clarification will be appreciated. Attached Thumbnails Im trying to dynamically add more fields into my form. HTML: Code: <table id="add_episodes" class="editor" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><input size="3" type="text" name="number" /></td>
<td><input type="text" name="title" /></td>
<td><input type="button" value="Add another text input" onClick="addInput('add_episodes', 'number');addInput('add_episodes', 'title');"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input name="entry_id" type="hidden" value="<?php echo $id; ?>">
<input class="input submit" type="submit" name="submit" value="Add <?php echo $type; ?>">
</td>
</tr>
</table>
Javascript Code: function addInput(divName, type)
{
var counter = 1;
var limit = 50;
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var tr.document.createElement('<tr>');
if(type == 'number')
{
var newdiv = document.createElement(element);
newdiv.innerHTML = '<input size="3" type="text" name="number" />';
document.getElementById(add_input).appendChild(newdiv);
}
if(type == 'title')
{
var newdiv = document.createElement(element);
newdiv.innerHTML = '<input type="text" name="title[]" />';
document.getElementById(divName).appendChild(newdiv);
}
counter++;
document.getElementById(add_input).appendChild(tr);
}
}
This is one of my first times working with javascript, usually i work with PHP. Im trying to add more input elements of Code: <tr> <td><input size="3" type="text" name="number" /></td> <td><input type="text" name="title" /></td> </tr> And don't reply that i should make the names into arrays for me to submit more stuff, I'll change that later. But for simplicity and a straightforward problem. I can't get it add more form elements in the correct place or nothing happens at all. |
|||||||