|
JavaScript - Html Form + Js Object
Wondering if anyone could point me in the right direction!
I am trying to create a HTML form for a hire company that has multiple selection criterias i.e. mpg, passenger/seats, gearbox etc etc - based on these selections I need the form information to check against my JS object/array and find those objects which match the relevant attributes. The form itself has only radio buttons and one text field - I know how to take the data from an element of the form and put it into a variable so I can check it, but what I really want is to have all the information on the form matched against my object - Would I be looking at perhaps putting the form selections into a blank/new array and then comparing that to the object? If so any help/guidance would be greatly appreciated! Code: //array information */
var car=new Array("Lamborghini Aventador", "Peugeot 107", "VW Golf", "Toyota Prius", "Kia Sedona", "Citroen 2CV", "Vauxhall Insignia", "Mercedes C180", "Reliant Robin", "Ford Fiesta");
var mpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49);
var passenger=new Array(2, 4, 5, 5, 7, 4, 5, 5, 2, 5);
var luggage=new Array(0, 1, 2, 2, 4, 1, 3, 2, 1, 2);
var fuel=new Array("Petrol", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Petrol", "Petrol");
var gearbox=new Array("Semi-Automatic", "Manual", "Manual", "Manual", "Manual", "Manual", "Automatic", "Automatic", "Manual", "Automatic");
var aircon=new Array("Yes", "No", "Yes", "Yes", "Yes", "No", "Yes", "Yes", "No", "Yes");
var daycost=new Array(2000, 30, 34, 44, 40, 25, 45, 87, 10, 31);
var weekendcost=new Array(3800, 90, 97, 110, 99, 70, 115, 243, 25, 90);
var weeklycost=new Array(12000, 135, 167, 183, 162, 124, 173, 560, 65, 130);
var cars = {};
for(var i=0;i<car.length;i++)
{
cars[i] = {
name: car[i],
mpg: mpg[i],
passenger: passenger[i],
luggage: luggage[i],
fuel: fuel[i],
gearbox: gearbox[i],
aircon: aircon[i],
daycost: daycost[i],
weekendcost: weekendcost[i],
weeklycost: weeklycost[i]
}
}
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>Car Hires</title> <link rel="stylesheet" type="text/css" href="view.css" media="all"> <script type="text/javascript" src="array.js"></script> </head> <body id="main_body" > <img id="top" src="top.png" alt=""> <div id="form_container"> <h1><a>Car Hires</a></h1> <form id="myform" class="appnitro" method="post" action=""> <div class="form_description"> <h2>Car Hires</h2> <p>Fill the form below, and we will provide you with a list of cars that match your requirements.</p> </div> <ul > <li id="li_1" > <label class="description" for="element_1">Name </label> <span> <input id="element_1_1" name= "fname" class="element text" maxlength="255" size="8" value=""/> <label>First</label> </span> <span> <input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="14" value=""/> <label>Last</label> </span> </li> <li id="li_2" > <label class="description" for="element_2">Email </label> <div> <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> </div> </li> <li class="section_break"> <h3>Section Break</h3> <p></p> </li> <li id="li_4" > <label class="description" for="element_4">No. of Passengers </label> <div> <input id="element_4" name="passengers" class="element text small" type="text" maxlength="255" value=""/> </div><p class="guidelines" id="guide_4"><small>Enter the number of passengers in numerical format</small></p> </li> <li id="li_5" > <label class="description" for="element_5">Items of Luggage </label> <span> <input id="element_5_1" name="luggage" class="element radio" type="radio" value="1" /> <label class="choice" for="element_5_1">1</label> <input id="element_5_2" name="luggage" class="element radio" type="radio" value="2" /> <label class="choice" for="element_5_2">2</label> <input id="element_5_3" name="luggage" class="element radio" type="radio" value="3" /> <label class="choice" for="element_5_3">3</label> <input id="element_5_4" name="luggage" class="element radio" type="radio" value="4" /> <label class="choice" for="element_5_4">4</label> </span> </li> <li id="li_6" > <label class="description" for="element_6">Fuel Type </label> <span> <input id="element_6_1" name="fuel" class="element radio" type="radio" value="1" /> <label class="choice" for="element_6_1">Diesel</label> <input id="element_6_2" name="fuel" class="element radio" type="radio" value="2" /> <label class="choice" for="element_6_2">Petrol</label> </span> </li> <li id="li_7" > <label class="description" for="element_7">Transmission/Gear Box </label> <span> <input id="element_7_1" name="gearbox" class="element radio" type="radio" value="1" /> <label class="choice" for="element_7_1">Automatic</label> <input id="element_7_2" name="gearbox" class="element radio" type="radio" value="2" /> <label class="choice" for="element_7_2">Manual</label> </span> </li> <li id="li_8" > <label class="description" for="element_8">Airconditioning </label> <span> <input id="element_8_1" name="aircon" class="element radio" type="radio" value="1" /> <label class="choice" for="element_8_1">Yes</label> <input id="element_8_2" name="aircon" class="element radio" type="radio" value="2" /> <label class="choice" for="element_8_2">No</label> </span> </li> <li id="li_9" > <label class="description" for="element_5">Miles Per Gallon</label> <span> <input id="element_5_1" name="MPG" class="element radio" type="radio" value="1" /> <label class="choice" for="element_5_1">10-30</label> <input id="element_5_2" name="MPG" class="element radio" type="radio" value="2" /> <label class="choice" for="element_5_2">30-50</label> <input id="element_5_3" name="MPG" class="element radio" type="radio" value="3" /> <label class="choice" for="element_5_3">50-80</label> </span> </li> <li id="li_10" > <label class="description" for="element_9">Duration of Rental </label> <div> <select class="element select medium" id="element_9" name="element_9"> <option value="" selected="selected"></option> <option value="1" >Day</option> <option value="2" >Weekend</option> <option value="3" >Full Week</option> </select> </div> </li> <li class="buttons"> <input type="hidden" name="form_id" value="365314" /> <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" /> </li> </ul> </form> <div id="footer"> Car Hire Form</a> </div> </div> <img id="bottom" src="bottom.png" alt=""> </body> </html> Similar TutorialsHi I have the below page. When form is submitted by clicking on the button the function checkform() is executed. Problem is that I am getting a 'entrystartday' is null or not an object error on line Code: if (frm.entrystartday.value == 31) {
What is the problem and how can I fix it? Thanks Regards Code: <html>
<head>
<title>test</title>
</head>
<body>
<form id="theform" action="main.asp" method="post" onsubmit="return checkform()">
<table style="width: 477px;">
<tr>
<td style="vertical-align: top;" class="boldwhite">
Start Date
</td>
<td>
<select id="entrystartday" name="entrystartday">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
/
<select id="entrystartmonth" name="entrystartmonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
/
<select name="entrystartyear">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2014">2016</option>
<option value="2015">2017</option>
</select>
<span class="style1"><strong><= Select correct Start Date</strong></span>
</td>
</tr>
</table>
<table>
<tr>
<td class="style2">
<input type="submit" value="save" name="submit" />
</td>
</tr>
</table>
<input type="hidden" name="view" value="<% = theview%>" />
<input type="hidden" value="save" name="a" />
<input type="hidden" value="<% = dateview %>" name="dateview" />
</form>
<script type="text/javascript">
function checkform() {
document.write("<P>right now 1: " + new Date() + "<P>");
var frm = document.forms["theform"];
if (frm.entrystartday.value == 31) {
alert('I am here');
};
document.write("<P>right now 2: " + new Date() + "<P>");
};
</script>
</body>
</html>
I want to have button2 populate form fields in a separate form with certain data I choose. The challenge is that the name of each text box is the same ("inputbox") and the id is dynamic, the first part only staying the same. So, the form element id would be "idb_4555557805340560...". There would only be one form element that begins with "idb." The following code works, but doesn't address the dynamic id. How can I do this? Code: <HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function writeText (form) {
document.getElementById('ida').value = "Have a nice day!";
document.getElementById('idb').value = "Have a nice day!!";
document.getElementById('idc').value = "Have a nice day!!!";
}
</SCRIPT>
<form name="one"><INPUT TYPE="button" NAME="button2" Value="Write" onClick="writeText(document.myform)"></form>
<FORM NAME="myform" ACTION="" METHOD="GET">
<INPUT TYPE="text" NAME="inputbox" id="ida" VALUE="">
<INPUT TYPE="text" NAME="inputbox" id="idb" VALUE="">
<INPUT TYPE="text" NAME="inputbox" id="idc" VALUE="">
</FORM>
</BODY>
</HTML>
Hi All, I have a HTML table with combobox option in one of the column.when I select a value in dropdown the background color changes to red or green based on the selction.My Code looks like : Code: function OnHTMLTable1_ClickLink ( ) {
var irows = document.getElementById("HTMLTable1").getElementsByTagName('tr');
var iRowCount = irows.length;
for(i=0; i<=iRowCount; i++)
{
if(document.getElementById("list"+i).selectedIndex == 1)
{
document.getElementById("list"+i).options[1].style.backgroundColor = "green";
}
if(document.getElementById("list"+i).selectedIndex == 2)
{
document.getElementById("list"+i).options[2].style.backgroundColor = "Red";
}
}
}
When I select a value it is throwing me "Object Required error".Can anyone tell me where this code is misbehaving? Thanks, Anil Hi there, this is my first post. I'm very new to javascript and have been programming a "beer counter" that simply counts +1 into a text object after every click. After I got this to work I copied the code in order to make a clear button / function. I've been having problems, even though the code seems to be identical. This is likely an obvious question, pardon my inexperience. <html> <head> <title>Beer Counter</title></head> <body><script language="Javascript"> var beers = 0 var output ="" function beer() { beers = beers + 1 output = document.getElementById('output') output.value = beers } function clear() { beers = 0 output = document.getElementById('output') output.value = beers } </script> <input type='button' value='Crush' onclick='beer()'; /> Beer count:</input> <input type='text' id='output' name='output'; /><br/> <input type='button' value='Clear' onclick='clear()'; /> </body> </html> Below is the code that is using the name FFF in various places. The effect of all this is that the onclick function is not executed. I would expect a pop up alert when clicking the submit button. This only happens if I rename either the form id or the js variable. Can anyone explain what is going on here ? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
function newobject(){
this.exec=exec;
function exec(){
alert("exec");
}
}
FFF = new newobject();
</script>
<body>
<form id=" FFF " name="somename" action="" method="GET">
<input type="text" id="someid" name="somename" value="value">
<input onclick=" FFF .exec()" type="submit" id="submitid" name="somesubmit" value="xxx">
</form>
</body>
</html>
Regards Heinz I want to loop through a form containing various fields and replace them with values I have in a JS object. E.g. (1) <form id="theform"> <input type="text" name="field_1" value="" /> <input type="checkbox" name="field_2" value="" /> </form (2) object.field_1 = "Dave"; object.field_2 = ""; // empty as not checked, else holds value of checked one -- The problem is: what about checkboxes and <select> drop downs, and radios?? Is there a script like this around as I'm guessing this could be useful for Ajax to populate input boxes in some situations (depending on the content etc.) so I'm guessing I'm not the only one who needs this? Hi, every time I try and alert: [ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ] it just shows [object object], [object object], [object object]. Why is this and what can I do to make the record be shown as it is above in an alert? Thanks. I created a method for displaying an object's properties: Code: renderfunction = false;
function showProperty (object, property)
{
document.write ('<td class="type">' + (typeof object[property]) + '</td>'
+ '<td class="name">' + property + '</td>');
document.writeln('<td class="value">' +
(
(typeof object[property] != 'function')
? object[property]
:(
(property != 'showProperties')
? (
renderfunction
? object[property]()
: ('<span class="self">NOT RENDERED</span>')
)
: ('<span class="self">THIS</span>')
)
)
+ '</td>');
document.writeln('<td class="hasOwnProperty" >'
+ (
object.hasOwnProperty(property)
? "Local"
: "Inherited"
)
+ '</td>');
if (typeof object[property] == 'function')
{
document.writeln ('<td class="function">' + object[property] + '</td>');
}
else
{
document.writeln ('<td class="function"> </td>');
}
}
As long as renderfunction = false, the object is fine coming out of this function. However, if I change renderfunction to true, all my properties become undefined. Why isn't this working as I expect it to? How should I fix it? Thanks in advance, -Brian. I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be. Code: print<<<HERE
Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true,
onChange: function(item) {
var list = Sortable.options(item).element;
if(changeEffect) changeEffect.cancel();
changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
},
onDrop: function(item) {
var thing=Sortable.options(item).element.identify();
var anchors = document.getElementById(thing).childNodes.length-2;
if(anchors > 20){
alert('This box had 20 creatures in it already, your last action has not been saved.');
window.location.reload();
}
else{
new Ajax.Request("saveImageOrder.php", {
method: "post",
parameters: { data: Sortable.serialize("sortlist$box") }
});
}
}
});
HERE;
$box++;
}
?>
});
</script>
if you solve this I'll send ya $10 via paypal Ignore post (if mod, please delete)
Hello together! I generate html code with jsp. In that jsp there a several framesets and frames. And yes i know, frames are not really up to date but it's an old program and i have to deal with it now. Anyway, in the top frameset i have an onload attribute like onload="load()". In the function load i want to access the Element.prototype object. But unfortunately typeof Element gives me "undefined". So i looked a little deeper and found that window.toString() gives me "[object]" and not as expected "[object window]" so somehow my window doesn't know that its construcor is Window. window.construcor is "undefined" as well. And i don't have access to the Element object. I really don't know where the error could be. When the page is loaded and i access the same window over the console, then everything is right. But in my function a can't get access to the objects i need. I also don't know what part of the code could be useful to post here, but maybe someone had a similar problem before? i should say that this problem only occurs in IE8. In IE9 it works perfectly. Has anyone any idea?? I'm writing a program that involves a network of interconnected nodes (or simply objects in my example below). It depends on being able to access properties of an object's linked objects (a bit oddly worded, sorry)... Problem is I'm not sure how to properly access those properties... see below please. <script> //This is an example of a problem im having in my own code... //I want to access the name of the object within the links array wintin the object... var objA = {name: "Object A", links: [objB, objC]}; var objB = {name: "Object B", links: [objC, objD, objE]}; var objC = {name: "Object C", links: [objB]}; var objD = {name: "Object D", links: [objE]}; var objE = {name: "Object E", links: [objD]}; //ex: I want to access the name of Object A's first link... console.log(objA.links[0].name); </script> I'm hoping to get "Object B"... But instead I get: TypeError: Result of expression 'objA.links[0]' [undefined] is not an object. Is there another way around this? Any thoughts are appreciated. Hi all, I'm stumped on finding a way in javascript to create an object factory whose instances are also object factories. In short I want something like that below, but no joy ... any clues? Code: function createClass () {
return new createClass()
function createClass() {
return new createInstance ()
function createInstance () {
//Default properties, values and methods which might later be extended
}
}
}
var createDoor = createClass();
var door1 = createDoor();
var door2 = createDoor();
var createChair = createClass();
var chair1 = createChair ();
var chair2 = createChair ();
If I have a javascript var in a webpage(html form textarea VALUE - yui) that contains html code, and want to appear it, in confirmformpage.php, then how to transfer it...? is it really needed go via PHP ...? and ofcourse use innerHTML to write it....yes I usually use an intermitened processform.php script. http://developer.yahoo.com/yui/editor Quote: menu: function( a, b ) { $( b ).observe( 'click', function( event ) { event.stop(); if( $( a ).visible() ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); } else { $( a ).show(); $( b ).addClassName( 'selected' ); document.observe( 'click', function( e ) { if( e.target.id != a && e.target.id != b && !Element.descendantOf( e.target, $( a ) ) ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); } }); } }); $$( '#' + b + ' > a' ).each( function( element ) { element.observe( 'click', function( event ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); }); }); } This work's perfrect accept when i use it with others on the menu it leaves the other ones open, how do i get it to close the open one when i open a new menu.. Thanks. Hello. Is there any way to get the variable name of an object from inside the object? E.g. PHP Code: function Bla(){ this.write = function(){ document.write(<objectname>); } } obj1 = new Bla(); obj1.write(); //Outputs obj1 Here is my script: PHP Code: function myTimer(seconds, obj){ this.seconds = seconds; this.obj = obj; this.startTimer = function(){ if(this.seconds>0){ this.seconds--; this.obj.innerHTML = this.seconds; this.timer = setTimeout("Timer.start()",1000); } } } Timer = new Timer(10, obj); Timer.startTimer(); Now the problem is that the variable that contains the object must be named "Timer". This way I cannot create new timer objects with different variable names I have tried: this.timer = setTimeout("this.start()",1000); but it doesn't work. That's why it would be good to detect the variable name and instead use something like this: this.timer = setTimeout(varname+".start()",1000); I would rather not have to pass the variable name through a parameter like this: Timer1 = new Timer(10, obj, "Timer1"); Thanks in advance. I am trying to troubleshoot my javascript function below. Code: <script type="text/javascript">
function txtboxfill(fillobj) {
var rChar=String.fromCharCode(13);
var myVal = "To: " + this.form.to.value + rChar;
myVal = myVal + "From: " + this.form.from.value + rChar;
myVal = myVal + "Subj: " + this.form.subj.value + rChar + rChar;
myVal = myVal + "Message: ";
fillobj.value = myVal;
}
</script>
Then I have a text box input field with an Code: <input type="text" id="tp" name="to" size="34" class="totext" onkeyup="txtboxfill(this.form.msg_area);"> and when I enter text in this field it gives me a 'this.form.to' is null or not an object and does not populate the textarea. BTW, msg_area is the id of my textarea. Thank you. i want to build a form have a "payment" select option ex. when user choose option "credit card" is will show some textbox(firstname and lastname,ccnumber,ccv,expday...) when user choose option "paypal" is will show some textbox(firsname,email paypal). Please help me solve this Hi, Posting this in javascript because the problem might be caused by my scripting. I made a 3 page long form using javascript, and the contents of the second page aren't submitted to the php script. link Hope someone can check it for errors. Thanks! |
|||||||