Member Avatar for cooterbrown

Hi,

I have a calculating order form, which is at
which I partially inherited.

The problem is that the second drop down "select item" was added, and is not part of the calculation, in order to get needed information to an html template for emailing the order information.


Right now it is possible to have the "widget" choice be the wrong one (not corresponding with the select size choice,) in that you could have a "widget1" show up at the price of a "widget2" which is not good.


Is there a way to report two values, or another value of information from the 3rd drop down? This would eliminate the need for the second.

OR how do I require the second drop down "select item" selection is made, and it corresponds to the proper selection in the third "select size."

All of the lines can not be required though, as the user may not be ordering more than one item.

Obviously I'm not a programmer, I am actually a hardware/network tech. This is in my lap to deal with though.

Any help is appreciated.
Thanks

  • 3 Contributors
  • 5 Replies
  • 121 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by cooterbrown

Dani AI

Generated

Short summary and a practical fix that builds on the direction from and the JS hint from : the root cause is two independent selects that can get out of sync. Either (A) make the size/select the single source of truth (include the item id and price in the size option), or (B) keep both selects but make the size list rebuild dynamically when the item changes and then copy the authoritative values into hidden fields before submit. Always validate on the server — client-side JS can be bypassed.

Example client-side pattern (replace IDs/names to match your form):

const sizes = {
  widget1: [{id:'w1-s',label:'Small',price:9.95},{id:'w1-l',label:'Large',price:14.95}],
  widget2: [{id:'w2-s',label:'Small',price:12.50}]
};

function fillSizes(itemEl, sizeEl){
  sizeEl.innerHTML = '<option value="">Select size</option>';
  (sizes[itemEl.value]||[]).forEach(s=>{
    const o = document.createElement('option');
    o.value = s.id;
    o.textContent = s.label;
    o.dataset.price = s.price;
    o.dataset.item = itemEl.value;
    sizeEl.appendChild(o);
  });
  sizeEl.disabled = (sizeEl.options.length<=1);
}

itemSelect.addEventListener('change', ()=> fillSizes(itemSelect, sizeSelect));
form.addEventListener('submit', ()=>{
  const opt = sizeSelect.selectedOptions[0];
  hiddenItem.value = opt ? opt.dataset.item : '';
  hiddenPrice.value = opt ? opt.dataset.price : '';
});

Server-side check (PHP example) — do not trust posted price:

$map = ['widget1'=>['w1-s'=>9.95,'w1-l'=>14.95],'widget2'=>['w2-s'=>12.5]];
$item = $_POST['item'] ?? '';
$size = $_POST['size'] ?? '';
if (!isset($map[$item]) || !array_key_exists($size,$map[$item])) { /* reject */ }
$price = $map[$item][$size];

Troubleshooting tips: disable the size select until an item is chosen, use clear option values or data-attributes (so the email template gets IDs you can look up server-side), test with JS disabled, and log form submissions during testing to verify the server receives consistent item/size/price triplets. This avoids mismatched widget/price in the emailed template.

Recommended Answers

All 5 Replies

Member Avatar for Daiva

You are using JavaScript to do your calculations, so I guess you should try JavaScript/DHTML/AJAX section for a help.

Member Avatar for almostbob

The added <select> has no part in the calculation, its values are all text, so the code where changing the text <select> chanes recalculates the form is not enough
changing the text select item is supposed to change the price values in the size <select> there needs to be another javascript to do so
something like

<TD style="height: 28px; width: 120px;">
<SELECT onChange="populate("price2");calculate();" name="item2" style="width: 133px">
<OPTION value="widget1">widget 1
<OPTION value="widget2">widget 2
<!--snip-->
</SELECT></TD>

where populate() is a javascript that populates the <select><option>s named
goes to one available for download, might give you an insight into the code you require

Member Avatar for cooterbrown

You are using JavaScript to do your calculations, so I guess you should try JavaScript/DHTML/AJAX section for a help.

Thanks Daiva for your reply. I simply do not know where the solution is, so I posted it here hoping for a clue.

Thanks again.
Cooter

Member Avatar for cooterbrown

The added <select> has no part in the calculation, its values are all text, so the code where changing the text <select> chanes recalculates the form is not enough
changing the text select item is supposed to change the price values in the size <select> there needs to be another javascript to do so
something like

<TD style="height: 28px; width: 120px;">
<SELECT onChange="populate("price2");calculate();" name="item2" style="width: 133px">
<OPTION value="widget1">widget 1
<OPTION value="widget2">widget 2
<!--snip-->
</SELECT></TD>

where populate() is a javascript that populates the <select><option>s named
goes to one available for download, might give you an insight into the code you require

Thank you almostbob, I greatly appreciate the nudge in the right direction. I'll work on this and post back. Now I'm becoming interested in programming...<chuckle>.

Cooter

Member Avatar for cooterbrown

almostbob...
No progress yet, but I am taking an online javascript course. At least I see what you mean by "something like" your example.. Javascript is very versatile and flexible.
Thanks again.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.