PDA

View Full Version : HTML form



xdous
Jan 16th, 2009, 11:06 AM
Hi everyone,

I am working on a website that requires me to list prices for products and I was thinking of using form drop down boxes so the user can select what size etc they require and it gives them the price.

Is there a simple way to do this without using a database as I dont think it needs to be that advanced.

If anyone has any better ideas I would be glad to hear them.

Cheers

abduraooft
Jan 16th, 2009, 11:17 AM
Is there a simple way to do this without using a database as I dont think it needs to be that advanced. Basically a <select> (http://htmldog.com/reference/htmltags/select/) tag with few options is enough for making a drop down.

xdous
Jan 16th, 2009, 11:26 AM
Sorry let me explain further. I know how to create <select> drop downs however I want the user to select specific things from the drop downs and then the correct price to automatically appear in another field.

Does this make sense?

rangana
Jan 16th, 2009, 11:49 AM
Javascript:


<script type="text/javascript">
function setTarg(el,val){
document.getElementById(el).value=val;
}
</script>
<select onchange="setTarg('print',this.value)">
<option value="Val1">Option 1</option>
<option value="Val2">Option 2</option>
<option value="Val3">Option 3</option>
<option value="Val4">Option 4</option>
<option value="Val5">Option 5</option>
</select>
<input type="text" readonly="readonly" id="print">

xdous
Jan 16th, 2009, 11:55 AM
Thanks for this rangana. Is there a way of using this method but taking details from 2 different drop downs and then displaying an answer?

For example if the user selects a certain size in one field and then how many they require in another the price appears?

VIPStephan
Jan 16th, 2009, 11:57 AM
Note that JavaScript doesn’t necessarily have to be available and if it’s not your form will be unusable. The most secure way is to use some kind of server side scripting as basic functionality (kind of like a fallback) and enhance the functionality with JS for those people that have it available.

xdous
Jan 16th, 2009, 12:08 PM
VIPStephan is there anything you can suggest as I could use PHP script and my server.

rangana
Jan 16th, 2009, 12:48 PM
Javascript:


<script type="text/javascript">
function setTarg(targEl,obj){
var sum=1;
for(var i=0;i<obj.opts.length;i++){
var selectID=document.getElementById(obj.opts[i]);
sum*=Number(selectID.options[selectID.selectedIndex].text);
}
document.getElementById(targEl).value=sum;
}
</script>
Quantity: <select onchange="setTarg('print',{opts:['opt1','opt2']})" id="opt1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<br>
Price: <select onchange="setTarg('print',{opts:['opt1','opt2']})" id="opt2">
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
</select>

<br><br>
<label for="print">Price: </label><input type="text" readonly="readonly" id="print">


PHP:


<?php
if(isset($_POST['submit'])){
$sum = $_POST['opt1']*$_POST['opt2'];
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
Quantity: <select name="opt1">
<?php
for($i=1;$i<=5;$i++)
echo "<option value=$i>$i</option>";
?>
</select>

<br>
Price: <select name="opt2">
<?php
for($i=10;$i<=50;$i+=10)
echo "<option value=$i>$i</option>";
?>
</select>

<br><br>

<input type="submit" name="submit" value="Update Now!">
<br><br>
<label for="print">Price: </label><input type="text" readonly="readonly" name="print" value="<?php echo $sum; ?>">
</form>


JS and PHP:


<script type="text/javascript">
window.addEventListener?window.addEventListener('load',function(){
ray.setTarg('print',{opts:['opt1','opt2']});
},false):
window.attachEvent('onload',function(){
ray.setTarg('print',{opts:['opt1','opt2']});
}); // FF : IE

var ray={
targEl: '',

obj:[],

setTarg:function(targEl,obj){
this.targEl=this.targEl==''?targEl:this.targEl;

if(this.obj.length==0)
for(var x=0;x<obj.opts.length;x++)
this.obj.push(obj.opts[x]);

for(var i=0;i<this.obj.length;i++){
var selectID=document.getElementById(this.obj[i]);
selectID.onchange=function(){
var sum=1;
for(var c=0;c<ray.obj.length;c++){
var selectIDs=document.getElementById(ray.obj[c]);
sum*=Number(selectIDs.options[selectIDs.selectedIndex].value);
}
document.getElementById(ray.targEl).value=sum;
}
}
}

}
</script>

<?php
if(isset($_POST['submit'])){
$sum = $_POST['opt1']*$_POST['opt2'];
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
Quantity: <select name="opt1" id="opt1">
<?php
for($i=1;$i<=5;$i++)
echo "<option value=$i>$i</option>";
?>
</select>

<br>
Price: <select name="opt2" id="opt2">
<?php
for($i=10;$i<=50;$i+=10)
echo "<option value=$i>$i</option>";
?>
</select>

<br><br>
<noscript>
<input type="submit" name="submit" value="Update Now!">
<br><br>
</noscript>
<label for="print">Price: </label><input type="text" readonly="readonly" id="print" name="print" value="<?php echo $sum; ?>">
</form>


Hope that gives you variety of choices.

xdous
Jan 16th, 2009, 01:04 PM
Thanks for this it is very good however I would like to use my own custom fields.

For example if the user selected <option>A1 (841mm x 594mm)</option> in the first drop down and <option>10-24 off</option> in the second and the price for this product is 7.31 how would I get that to display in the Price field?

Is what I am looking for more advanced database stuff than what I thought?

rangana
Jan 16th, 2009, 03:38 PM
Use the same technique on the JS part on post # 8.

That should help you met your desire. No need for DB.

xdous
Jan 16th, 2009, 04:38 PM
Where do I store the prices then? As mentioned before I have set prices for the quantities and products.