Jump to content

Newbie About If Statement In Javascript...


Recommended Posts

Hello!I am ALL to new to Javascript - and still learning... :-DBut can anyone help and tell me if it is a good idea to use javascript in this case?I have this menu and the only thing I want to do is to set text (actually numbers...) into the fields "widht" and "height"E.g: If I choose "A4" I would like to 'automatically fill in' the fields with "width" to 210 and "height" to 297 (mm)something like this: "if <formatet2> = A4, then width=210; height=297"All the best!// Lennart

<body><td><label>Format:   </label></td><td><select name="formatet2">											  <option value="no_selection_made" selected>Choose...</option>											  <option value="A5">A5</option>											  <option value="A4">A4</option>											  <option value="A3">A3</option>											  <option value="C4">C4</option>											  <option value="C5">C5</option>											  <option value="Eget">Other...</option>																					   </select>											       <span class="style1">=</span>  <input name="width" type="text" size="5" value="width"/>												x												<input name="height" type="text" size="5" value="height"/>												<span class="label3">mm</span>	<p> </p>											  </td></body>

Link to comment
Share on other sites

JavaScript is ideal here. All you do is add an id to the inputs for the size (these can be any name you like):

<input name="width" id="setWidth" type="text" size="5" value="width"/><input name="height" id ="setHeight" type="text" size="5" value="height"/>

Add an onchange event to the option menu:

<select name="formatet2" onchange="setSize(this.selectedIndex)" >

You could save time by storing the measurements in the value attribute of each item (the '/' is a delimiter which you can change, and won't appear in the output):

<option value="A5">A5</option><option value="210mm/297mm">A4</option><option value="whatever the width/height is...">A3</option>etc.

And then in the head portion of the page, have this script:

<script type="text/javascript">function setSize(selected) {var size=selected.value.split("/");document.getElementById("setWidth").value=size[0]document.getElementById("setHeight").value=size[1]}

I haven't tested it, but that should work. Let us know how you get on.

Edited by chibineku
Link to comment
Share on other sites

Hi Jonathon...Sorry, nope - it didn't work out even if I ended the javascript with a closing tag.To give some more background, this HTML-page is connected to a 4th Dimension server for calculating price requestsand is depending on the fields "width" and "height" (although in swedish the words are "bredd" and "höjd"... :-)When I uploaded this, the width/height-fields did not change on-screen, so I guessed it would do it in the background only.Nope - they didn't - all I got was "Format: bredd x höjd"Take a look if you want - I enclosed the whole page this time. The text fields are located in the second paragraph (called "JOBBINFORMATION") at the bottom...The problem for us and the reason for this change is, that the customer often don't know the sizes of an envelope or letterhead paper... just saying "A4" and so on...OK. All the best. There might not be a solution to this after all... :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><title>Offertförfrågan | G2 Grafiska AB  Kalkylsystem</title><meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">		<link href="offertstil.css" rel="stylesheet" type="text/css" />		<link href="../css/css2.css" rel="stylesheet" type="text/css" media="all">		<style type="text/css"><!--body,td,th {	color: #FF0000;}-->		</style>		<link href="css/offertstil.css" rel="stylesheet" type="text/css">		<style type="text/css"><!--.style1 {color: #000000}-->		</style><script type="text/javascript">function setSize(selected) {var size=selected.value.split("/");document.getElementById("setWidth").value=size[0]document.getElementById("setHeight").value=size[1]}</script></head><body><div id="wrapper" align="center"><table width="657" border="0" cellspacing="2" cellpadding="0">				<tr>					<td><br>					  <img src="../bilder/logga.png" alt="" width="100" height="112" hspace="30" border="0"><br>						<br>						<div id="formcontainer">							<div id="rubrikruta">								<h1>									<h1>OFFERTFÖRFRÅGAN</h1>								</h1>							</div>							<form method="post" action="/4dcgi/offert">								<div id="ruta1">									<h1>Kundinformation</h1>									<table width="100%" border="0" cellpadding="0" cellspacing="2">										<tr>											<td width="27%"><label>Företag:</label></td>											<td width="73%"><input name="ftg" type="text" size="30" value=""/>											<span class="rod">* = Obligatorisk uppgift</span></td>										</tr>										<tr>											<td><label>Namn:</label></td>											<td><input name="namn" type="text" class="nyrad" value="" size="30"/>											*</td>										</tr>										<tr>											<td><label>E-post:</label></td>											<td><input name="epost" type="text" size="30" value=""/>											*</td>										</tr>										<tr>											<td><label>Telefon:</label></td>											<td><input name="tel" type="text" class="nyrad" value="" size="15"/>											*</td>										</tr>										<tr>											<td><label>Mobil:</label></td>											<td><input name="mobil" type="text" class="nyrad" value="" size="15"/></td>										</tr>									</table>								</div>								<div id="ruta2">									<h1>Jobbinformation</h1>									<table width="100%" border="0" cellpadding="0" cellspacing="2">										<tr>											<td width="17%"><label>Projektnamn:</label></td>											<td width="83%"><input name="arbete" type="text" size="30" value=""/></td>										</tr>										<tr>											<td><label>Produkttyp:</label></td>											<td><input name="produkttyp" type="text" size="30" value=""/><span class="label3"> (t ex folder, broschyr etc.)</span></td>										</tr>										<tr>											<td><label>Upplaga:</label></td>											<td><input name="upplaga" type="text" size="8" value=""/><span class="label2">+ följande: </span><select name="upplaga_foljande">													<option value="no_selection_made"> Välj...</option>													<option value="100">100</option>													<option value="500">500</option>													<option value="1000">1000</option>													<option value="10 000">10 000</option>												</select></td>										</tr>										<tr>											<td><label>Antal sidor Omslag:</label></td>											<td><input name="oms_antsidor" type="text" size="8" value=""/></td>										</tr>										<tr>											<td><label>Antal sidor Inlaga:</label></td>											<td><input name="inl_antsidor" type="text" size="8" value=""/></td>										</tr>										<tr>											<td><label>Antal färger Omslag:</label></td>											<td><input name="oms_farg1" type="text" size="4" value=""/>												<p>+</p>												<input name="oms_farg2" type="text" size="4" value=""/><span class="label2">PMS-färg: </span><input name="oms_pms" type="text" value="" size="5"/><span class="label2">Antal PMS, omslag:  </span><input name="antal_pms_oms" type="text" value="" size="5"/></td>										</tr>										<tr>											<td><label>Antal färger Inlaga:</label></td>											<td><input name="inl_farg1" type="text" size="4" value=""/>												<p>+</p>											  <input name="inl_farg2" type="text" size="4" value=""/><span class="label2">PMS-färg: </span><input name="inl_pms" type="text" value="" size="5"/><span class="label2">Antal PMS, inlaga:    </span><input name="antal_pms_inl" type="text" value="" size="5"/></td>										</tr>										<tr>											<td><label>Format:   </label></td>											<td><select name="formatet2" onchange="setSize(this.selectedIndex)" >											  <option value="no_selection_made">Välj...</option>											  <option value="148mm/210mm">A5</option>											  <option value="210mm/297mm" selected>A4</option>											  <option value="297mm/420mm">A3</option>											  <option value="229mm/324mm">C4</option>											  <option value="162mm/229mm">C5</option>											  </select>											       <span class="style1">=</span>  											  <input name="bredd" id="setWidth" type="text" size="5" value="bredd"/>												<p>x</p>												<input name="hojd" id="setHeight"  type="text" size="5" value="höjd"/><span class="label3">mm</span></td>										</tr>										<tr>										  <td> </td>										  <td> </td>									  </tr>									</table>							  </div>								<div id="ruta3">									<h1>Papper</h1>									<table width="100%" border="0" cellpadding="0" cellspacing="2">										<tr>											<td width="27%"><label>Papper Omslag:</label></td>											<td width="73%"><!--4dhtmlvar vSkrivtext--></select><span class="label2">Annat papper:</span><input name="oms_annat_papper" type="text" value="" size="10"/><span class="label2">Ytvikt:</span><input name="oms_ytvikt" type="text" size="4" value=""/><span class="label3">g</span></td>										</tr>										<tr>											<td><label>Papper Inlaga:</label></td>											<td><!--4dhtmlvar vSbenämning--></select><span class="label2">Annat papper:</span><input name="inl_annat_papper" type="text" value="" size="10"/><span class="label2">Ytvikt:</span><input name="inl_ytvikt" type="text" size="4" value=""/><span class="label3">g</span></td>										</tr>									</table>								</div>								<div id="ruta4">									<h1>För- och efterbehandling</h1>									<table width="100%" border="0" cellpadding="0" cellspacing="2">										<tr>											<td width="27%"><label>Underlag till oss:</label></td>											<td width="73%"><!--4dhtmlvar vSkrivtext2--></select></td>										</tr>										<tr>											<td><label>Korrektur:</label></td>											<td><!--4dhtmlvar vSkrivtext3--></select></td>										</tr>									</table>								</div>								<div id="ruta5">									<h1>Övrigt</h1>									<table width="100%" border="0" cellpadding="0" cellspacing="2">										<tr>											<td width="27%"><label>Kontakt hos oss:</label></td>											<td width="73%"><!--4dhtmlvar vDialog--></select></td>										</tr>										<tr>											<td><label>Önskar offert senast:</label></td>											<td><input name="offertsvar" type="text" size="17" value=""/></td>										</tr>										<tr>											<td height="20"><label>Övriga önskemål:</label></td>											<td rowspan="2"><textarea name="meddelande" rows="6" cols="50"></textarea></td>										</tr>										<tr>											<td> </td>										</tr>									</table>								</div>								<input name="skicka" type="submit" id="skicka" value="Skicka formuläret"/><input type="reset" id="aterstall" value="Återställ">							</form>						</div>					</td>				</tr>			</table></div></body></html>

Link to comment
Share on other sites

I think you're almost there.This function appears to be looking for a select element:

function setSize(selected) {var size=selected.value.split("/");document.getElementById("setWidth").value=size[0]document.getElementById("setHeight").value=size[1]}

But you're passing an index (i.e. a number):

<select name="formatet2" onchange="setSize(this.selectedIndex)" >

You might try modifying your javascript function to be something like this:

function setSize(select){	var size = select.options[select.selectedIndex].value.split("/");	document.getElementById("setWidth").value = size[0];	document.getElementById("setHeight").value = size[1];}

Then use it like this:

<select name="formatet2" onchange="setSize(this);">

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...