Trouble with input form and JavaScript

[SeanF]

Hi:

I am having trouble with an order form which sets prices based on whether a user wants to become a member. If the user select "Yes I want to me a member", the discounted member prices are used in the form and a membership fee is added to the order.

The form works fine, but when it is submitted, the "standard" prices are carried forward and the membership fee is not applied. I'm sure I'm overlooking something but I can't figure it out:

The "want to become a member" select looks like this:

Would you to like to add the membership cost to this application in order to qualify for membership pricing?
<select onChange='dropdownMbr(this.value)' name='add_mbr' >
<option value=0> -- Choose -- </option> 
<option value=\"0\"> No </option> 
<option value=$standard_price $selected>Yes: $membership_name ($$standard_price_display</option>
</select>

The dropdownMbr script looks like this:

<script type=\"text/javascript\">
function dropdownMbr(value){
 var curr_member = \"$member\";
 document.getElementById(\"mbr_add\").innerHTML = value;
 var addm = Number(document.getElementById(\"mbr_add\").innerHTML);
 document.getElementById('memSelect').innerHTML = addm; 
 // Reset all prices in table
 var grandTotal = 0.00; 
 var curr_mbr = \"$member\";
 if(addm >0){
 var memType = \"member\";
 }else{
 var memType = \"standard\";
 }
 var j = 0;
 $('.unitCount').each(function() { 
 var unitCount = document.getElementById('ttl_units'+j).value; 
  if(addm >0){
   var unit_price = document.getElementById('member_price['+j+']').value; 
  }else{
   var unit_price = document.getElementById('standard_price['+j+']').value; 
  }
  var unitSub = (unitCount * unit_price);
  grandTotal += unitSub;
  document.getElementById('unitPriceDisp'+j).innerHTML = '$'+Number(unit_price).toFixed(2); 
  document.getElementById('unitSubDisp'+j).innerHTML = '$'+unitSub.toFixed(2); 
  document.getElementById('MemberFeeDisp').innerHTML = '$'+addm; 
  j = j + 1;
 }); 
 grandTotal += addm;
 document.getElementById('GrandTotal').innerHTML = '$'+grandTotal.toFixed(2); 
}
</script>

The order form includes the following:

<span id=\"mbr_add\">$member </span>
<INPUT type=\"hidden\" name=\"memSelect\" id=\"memSelect\" value=\"$pricing\" />
 <INPUT type=\"hidden\" name=\"member\" id=\"memSelect\" value=\"$member\" />

And each line item in the order form look like this:

<INPUT type='text' name='ttl_units[$i]' id='ttl_units$i' class='unitCount' data-id='$i' data-standard='$standard_price' data-member='$member_price' size='10' maxlength='10' value='$quantity' /> 
<INPUT type='hidden' name='prod_id[$i]' value='$product_id' /> 
<INPUT type='hidden' name='prod_name[$i]' value='$product_name' /> 
<INPUT type='hidden' name='standard_price[$i]' id='standard_price[$i]' value='$standard_price' /> 
<INPUT type='hidden' name='member_price[$i]' id='member_price[$i]' value='$member_price' /> 
<INPUT type='hidden' name='price_type_label[$i]' value='$price_type_label' /> 
<INPUT type='hidden' name='unit_price[$i]' id='unit_price[$i]' value='$rate' /> 
<INPUT type='hidden' name='subttl[$i]' class='subVal' id='subttl[$i]' value='$price_sold' /> 

At the bottom of the product line items is the rest of the form:

Membership Fee:
<SPAN id='MemberFeeDisp'> $ 0 </SPAN> 
<INPUT type='hidden' name='MemberFeeDisp' id='mbrFee' value= 0 /> 
<SPAN id='GrandTotal'> $ $items_ttl </SPAN> 
<INPUT type='hidden' name='total' value='$grand_total' /> 

And, finally, when the form is submitted the $_POST variable are retrieved:

$prod_id = $_POST['prod_id']; // array
$ttl_units = $_POST['ttl_units']; // array
print_r($ttl_units);
$unit_price = $_POST['unit_price']; // array
print_r($unit_price);
$subttl = $_POST['subttl'];
if(isset($_POST['MemberFeeDisp'])){
  $memFee = $_POST['MemberFeeDisp'];
 }else{
 $memFee = "0";
}
echo "Mem Fee: $memFee<br/>";

On the initial form, the membership fee and the unit prices appear correctly but when the form is submitted, the membership fee is zero and the unit_price array is the standard pricing.

Sorry to be such a long post but it's a little complicated. I have tried to remove as much extraneous cost as I could and only leave relevant portions.

Does anyone see what I am doing wrong?

Thanks

[NickMNS]

What value does $standard_price return, is it $100.00 or 100 or "100". Basically does the condition (addm > 0) resolve to what you expect? That is, "$100.00" > 0 resolves to False whereas 100 > 0 or "100" > 0 resolves to True.

[SeanF]

Thanks for the reply:

If I echo out all three $_POST arrays (standard_price, member_price, and unit_price) standard and member are correct. Unit_price should have been set to the member_price values by the script but they are coming through as standard_price.

The prices in the order form, when the user selects "yes, I want to be a member" the prices switch to member, the calculations use member pricing and the membership fee shows as a positive number. It's somewhere between the form input (or hidden) values and the $_POST variables.

Also, MemberFeeDisp is being set (the $_POST variable is set), but it has a Zero value

Thanks again

[edited by: SeanF at 8:54 pm (utc) on Jul 16, 2020]

[NickMNS]

My question is not whether or not the value is correct, the question is, in what type or format is the returned value. If it is a number or a number represented as string, then it is fine, but if it is a string that is not a only number such as "$100.00" (as oppposed to "100.00") then your condition will not give you the expected result.

[SeanF]

Ah... got it. Sorry, I misread your original post.

the value of the "standard_price" array is "Array ( [0] => 2820 [1] => 3200 [2] => 350 [3] => 475 ..."

Similarly, using an "is_numeric" test against $_POST['MemberFeeDisp'], it is an integer with a value of zero.

Thanks again for your interest in this

[SeanF]

OK, I think the problem is in the syntax of my hidden input field

In my JavaScript, I have the following:

document.getElementById('MemberFeeDisp').innerHTML = '$'+addm; 
document.getElementById('mbrFee').innerHTML = addm.toFixed(2);

where "addm" is the added membership fee

In the HTML form, I have:

<SPAN id='MemberFeeDisp'> $ 0 </SPAN> 
<INPUT type='hidden' id='mbrFee' name='MemberFee' value= 0 />

But the $_POST['MemberFee'] is coming through as zero.

However, if I change the HTML form to:

<SPAN id='MemberFeeDisp'> $ 0 </SPAN> 
<p id='mbrFee'> text </p>

The correct value for 'mbrFee' ('addm' in the JavaScript) is displayed

How can I get that value correctly into the hidden input field?

[NickMNS]

Use .vatue not innerHTML

document.getElementById('mbrFee').value = addm.toFixed(2);

[SeanF]

Thanks. This seemed to work. I guess I don't fully understand the difference between the '. innerHTML' and the ',value'

Is one simply for text and the other simply for numeric values?

Thanks, you've been a great help

[NickMNS]

.value sets or gets the value of the "value" attribute, on html elements that have a value attribute, such as <input> and <option>.

.innerHTML sets or gets everything that is contained within an element. Example:

<div><p>stuff inside</p></div>

innerHTML called on the "div" tag would get:

<p>stuff inside</p>

innerHTML called on the "p" tag would get:

stuff inside

There is also .textContent, this sets or gets only text nodes from within the element. Example:

<div><p>stuff inside</p></div>

.textContent called on the "div" tag would get:

stuff inside

.textContent called on the "p" tag would get:

stuff inside

But there is one caveat if you set .textContent on the outer div it will overwrite the inner <p> tag.
calling:

document.querySelector('div').textContent = "more stuff";

will return:

<div>more stuff</div>

The primary reason your code failed is that an "input" element, doesn't have an "innerHTML", that is:

// this is not valid:
<input>Put something inside</input>
//only this is valid:
<input type="text" value="Put something inside" />

So you can't call innerHTML on an input element.