drop down box selection to change text and image link

Forum Moderators: open

Message Too Old, No Replies

drop down box selection to change text and image link

smallcompany

7:53 pm on Dec 3, 2010 (gmt 0)

Edit: I scraped original post it as I wanted to simplify it.

I have this HTML form:

<form action="buy.php" method="get">
<select id="widget" name="widget">
<option value="" selected="selected">1 Widget</option>
<option value="wid2">2 Widgets</option>
</select>
<select id="option" name="option">
<option value="" selected="selected">Option 1</option>
<option value="opt2">Option 1</option>
</select>
<input type="submit" value="Buy now" />
</form>

From here, based on the selections from the two drop down boxes, how do I tell that PHP file which link I would like to use? As I have two options in each, there will be four combinations which will require four different action links.

Thanks

smallcompany

8:39 pm on Dec 3, 2010 (gmt 0)

This is not the first time I post a question and then find an answer.

But it's not over. From here, how do I change the text that will be in the area?

Basically, it's the price value that is supposed to change whenever the selection of any of the two drop-down windows changes.

I came across some javaScript and wonder if I can go without it.

Thanks

Fotiman

9:18 pm on Dec 3, 2010 (gmt 0)

A couple of things to note.

Make sure your logic still relies on server side handling for calculating the values. You can use JavaScript to provide a fast, user friendly client side version, but the results of that should ultimately be ignored by the server and the inputs that generate those results are what the server should focus on. This is to prevent users from modifying the request on the client before sending it to the server.

I would start by creating a form (and form processing page) that could handle the data without JavaScript:


<!DOCTYPE html>
<html>
<head>
<title>Multiple Dropdowns Change Values</title>
</head>
<body>
<form>
<div>
  <select name="product">
    <option value="1.23">Product 1</option>
    <option value="2.34">Product 2</option>
    <option value="3.45">Product 3</option>
  </select>
  <select name="qty">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input type="submit" id="buyBtn" value="Buy">
</div>
</form>
</body>
</html>

In the example above, the server side code would need to process the submitted form values to determine the totals. Next lets add the JavaScript to replace the submit button with a styled link and total. Obviously, this is just a prototype example, but demonstrates how you could get started. I've opted to use jQuery to greatly simplify the code. Note, the HTML markup remains unchanged.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Some very basic CSS. YMMV. */
#total {
  font-size: 200%;
  font-weight: bold;
}
a#buyBtn {
  padding: 1em;
  border: 1px solid #000;
  color: #fff;
  text-decoration: none;
  background: #e36c04;
}
</style>
<title>Multiple Dropdowns Change Values</title>
</head>
<body>
<form>
<div>
  <select name="product">
    <option value="1.23">Product 1</option>
    <option value="2.34">Product 2</option>
    <option value="3.45">Product 3</option>
  </select>
  <select name="qty">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input type="submit" id="buyBtn" value="Buy">
</div>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  // Replace the submit button with a place to display the total and a 
  // stylized link 'button'. Don't forget to add CSS for #total and a#buyBtn.
  $('#buyBtn').replaceWith("<span id='total'><\/span><a id='buyBtn' href='#'>Buy<\/a>");
  $('#buyBtn').click(function (e) {
    e.preventDefault();
    $('form').submit();
  });
  function updateTotal() {
    // TODO: add some Math functions to ensure decimal precision
    $('#total').html('$' + ($('select[name=product]').val() * $('select[name=qty]').val()));
    // This is just to provide a nicer hover experience since our Buy button
    // is simply going to trigger the form submit.
    $('#buyBtn').get()[0].href = ($('form').attr('action') || '?') + $('form').serialize();
  }
  // Update the total immediately (using the default select box values)
  updateTotal();
  // Attach listeners to the select boxes. I could have just defined 1
  // listener here using $('select'), since the only select elements in the
  // HTML above are the ones I want. But this is more precise.
  $('select[name=product]').change(updateTotal);
  $('select[name=qty]').change(updateTotal);
});
</script>
</body>
</html>

Fotiman

9:20 pm on Dec 3, 2010 (gmt 0)

I came across some javaScript and wonder if I can go without it.

If you want to update the page immediately when the user selects a dropdown value, you have to use client side scripting (JavaScript). Like I said, though, don't rely on that value. Consider it just a progressive enhancement, and perform the form processing server side.

smallcompany

3:51 am on Dec 4, 2010 (gmt 0)

Wow! Thanks for the complete code.

As I mentioned in my second post, I did the link thing depending on the choice. The code is here:

<form action="dd-html.php" method="get">
<select id="widget" name="widget">
<option value="wid1" selected="wid1">1 Widget</option>
<option value="wid2">2 Widgets</option>
</select>
<select id="option" name="option">
<option value="opt1" selected="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</select>
<input type="submit" value="Buy now" />
</form>

Based on the selection, the corresponding link is being selected via simple PHP script.

Now, I need to put the price out which will be pulled from a list, depending on the choice. There will be no real calculation, just text change.

This is what I came across but wasn't sure how to incorporate it into my own short code:

<script type="text/javascript">
function addit(){
if(document.getElementById("add").value=="1")
{
document.getElementById("amount").value="$5.00"
}
if(document.getElementById("add").value=="3")
{
document.getElementById("amount").value="$10.00"
}
if(document.getElementById("add").value=="6")
{
document.getElementById("amount").value="$15.00"
}
}
</script>
<body>
<form action="/accounts/cart.php" method="get">
<table class="comparison pricing-email" border="0" cellspacing="1" cellpadding="0" width="30%">
<tbody>
<tr class="row1">
<td class="col1">Choose # of EMAIL accounts:  
<select style="width: 60px; font-size: 17px;" name="add" id="add" onChange="addit()">
<option value="1">1</option>
<option value="3">3</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr class="row1">
<td class="col1">Per Month: <input type="text" id="amount" value="" style="border:none; font-size:13pt;"></td>
</tr><tr>
<td>
<input type="submit" name="submit" value="Sign-Up">
</td>
</tr>
</tbody>
</table>
</form>
</body>

Thanks

Fotiman

4:18 pm on Dec 4, 2010 (gmt 0)

If there's no calculation being done, then you'll need to take special care to ensure that if the value changes server side it must also change client side. One option might be to have a PHP page that only returns the price. Then you could call that page server side using cURL (or similar method), and you can call it client side with AJAX requests.

Once you have the values client side (whether you do the AJAX suggestion above or you just hard code the text values in the page), you can store the values in an object literal and treat it like a hash map.


var priceMap = {
  add1: "$5.00",
  add3: "$10.00",
  add6: "$15.00"
};
function addit(el){
  var val = priceMap[el.id + el.value];
  if (val) {
    document.getElementById("amount").value = val;
  } 
}

And change your select element to pass itself in the onchange handler:
<select style="width: 60px; font-size: 17px;" name="add" id="add" onChange="addit(this)">

smallcompany

4:36 am on Dec 5, 2010 (gmt 0)

First thanks, and then apology for ignorance here. The first code I posted in my last post is what I have and want to start from. The link thing works fine as I use GET to pass the selected variables to PHP script where links site and wait to be used.

For that text portion that is supposed to change based on selections, in the second code I saw this:

document.getElementById("add").value=="1"

The "if" is great for me, but I will always have two values, not one. I need something like this:

document.getElementById("add").value=="1" and "21"

Can I have two values in this fashion, or it has to be something else?

Also, can this be done without javaScript? I doubt, but it does not hurt to ask.

Thanks

smallcompany

6:56 am on Dec 5, 2010 (gmt 0)

Got it!

Question: Would this be the simplest way or it can be simplified further? Thanks

<!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>Untitled Document</title>
<script type="text/javascript">
function addit(){
if(document.getElementById("widget").value=="wid1" && document.getElementById("option").value=="opt1")
{
document.getElementById("amount").value="$5.00"
}
if(document.getElementById("widget").value=="wid1" && document.getElementById("option").value=="opt2")
{
document.getElementById("amount").value="$10.00"
}
if(document.getElementById("widget").value=="wid2" && document.getElementById("option").value=="opt1")
{
document.getElementById("amount").value="$15.00"
}
if(document.getElementById("widget").value=="wid2" && document.getElementById("option").value=="opt2")
{
document.getElementById("amount").value="$20.00"
}
}
</script>
</head>

<body>
<form action="dd-html.php" method="get">
<select id="widget" name="widget" onChange="addit()">
<option value="wid1" selected="wid1">1 Widget</option>
<option value="wid2">2 Widgets</option>
</select>
<select id="option" name="option"onChange="addit()">
<option value="opt1" selected="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</select>
<input type="submit" value="Buy now" />
<input type="text" id="amount" value="" style="border:none; font-size:13pt;">
</select>
</form>
</body>
</html>

Fotiman

4:13 pm on Dec 6, 2010 (gmt 0)

You could still use the hash map example:


<!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>Untitled Document</title> 
<script type="text/javascript"> 
var priceMap = {
 wid1opt1: "$5.00",
 wid1opt2: "$10.00",
 wid2opt1: "$15.00",
 wid2opt2: "$20.00"
};
function addit() {
 var w = document.getElementById('widget'),
 o = document.getElementById('option'),
 val = priceMap[w.value + o.value];
 if (val) {
 document.getElementById("amount").value = val;
 } 
}
</script> 
</head> 
<body> 
<form action="dd-html.php" method="get"> 
 <select id="widget" name="widget" onChange="addit()"> 
 <option value="wid1" selected="wid1">1 Widget</option> 
 <option value="wid2">2 Widgets</option> 
 </select> 
 <select id="option" name="option"onChange="addit()"> 
 <option value="opt1" selected="opt1">Option 1</option> 
 <option value="opt2">Option 2</option> 
 </select> 
 <input type="submit" value="Buy now" /> 
 <input type="text" id="amount" value="" style="border:none; font-size:13pt;">
</form> 
</body> 
</html>

That should make it much easier to maintain, keeping all of the prices in one logical location instead of having to search through lines of "if" conditions.

[edited by: tedster at 12:53 am (utc) on Dec 7, 2010]
[edit reason] added a line break to the DTD - stop side scroll [/edit]

smallcompany

11:24 pm on Dec 6, 2010 (gmt 0)

That should make it much easier to maintain

I get it now. I did not understand it first time fully as my programming skills are quite limited.

Thanks a lot for each reply and resolution.

P.S.
I tested it locally and found it does not show the initial text value (price).

Fotiman

12:34 am on Dec 7, 2010 (gmt 0)

Right, you would need to call addIt onload in order to get the initial value output. Via scripting that could be:


window.onload = function () {
  addIt();
  // Other methods that need to execute onload
  // can go here.
};