graphicman Posted May 4, 2009 Share Posted May 4, 2009 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 More sharing options...
chibineku Posted May 4, 2009 Share Posted May 4, 2009 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. Link to comment Share on other sites More sharing options...
graphicman Posted May 5, 2009 Author Share Posted May 5, 2009 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 More sharing options...
jesh Posted May 5, 2009 Share Posted May 5, 2009 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 More sharing options...
graphicman Posted May 8, 2009 Author Share Posted May 8, 2009 Thank you Jesh!!!I've finally tested and it works perfect..!Now I'll try to figure out HOW... All the best! Regards// Lennart Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.