Multiple Item Selections via Javascript

Forum Moderators: open

Message Too Old, No Replies

Multiple Item Selections via Javascript

TheKG

5:48 pm on May 28, 2022 (gmt 0)

I have a PHP page to sell pants in several styles and sizes. I already have a drop-down list using <select> for the customer to select the size they want. The problem is that not all sizes are pre-hemmed; those that are not can be hemmed at no additional charge. How would I offer a separate drop-down or radio button list only for those sizes that are not hemmed so the customer can choose to have them hemmed to their liking?

The pre-hemmed sizes are listed as 30 30, 30 32, 30 34, etc. The unhemmed are listed as 46U, 44U, 46U, etc. Is there a script that would detect if the size contained "U", the customer would be offered the option to hem? If the size did not contain the "U", the hemming option would not be available.

coothead

1:27 am on May 29, 2022 (gmt 0)

Hi there TheKG,

does this help...


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
 background-color: #f9f9f9;
 font: 1em / 1em sans-serif;
}
#pants {
 display: inline-block;
 padding: 1.5em 2em;
 border: 1px solid #999;
 border-radius: 1em;
 background-color: #fff;
 box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.5 ), 
  0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 font-size: 1em;
 text-align: center;
 }
 #pants fieldset {
 margin: 0.5em 0;
 }
#pants label {
 display: block;
 margin-top: 1em; 
 font-size: 1em;
}
#pants input {
 margin: 1em 0; 
font-size: 1em;
 }
#pants select,
#pants input {
 margin: 1em 0; 
 font-size: 1em;
 }
</style>
</head>
<body>
<form id="pants" action="#">
<fieldset>
 <label for="sizes">select your size</label>
 <select id="sizes" name="size">
 <option value="">sizes</option>
 <option value="30-30">30, 30</option>
 <option value="30-32">30, 32</option>
 <option value="30-34">30, 34</option>
 <option value="30-36">30, 36</option>
 <option value="30-40U">30, 40U</option>
 <option value="30-42U">30, 42U</option>
 <option value="30-44U">30, 44U</option>
 <option value="30-46U">30, 46U</option>
 </select>
</fieldset>
<fieldset>
 <input type="submit" value="submit">
 <input type="reset" value="reset select">
</fieldset>
</form>

<script>
(function( d ) {
 'use strict';
var form = d.querySelector( '#pants' ),
 sel = d.querySelector( '#sizes' );

 sel.addEventListener('change',
function(){
 
 if( sel.value.includes('U')){ 
 if ( confirm('Would you like the '+sel.value+ ' item to be hemmed?' ) ){
 sel.options[sel.selectedIndex].text= 
 sel.options[sel.selectedIndex].text +' Please'; 
 sel.options[sel.selectedIndex].value = 
 sel.options[sel.selectedIndex].value +'-Please';
 }
 else { 
 sel.options[sel.selectedIndex].text= 
 sel.options[sel.selectedIndex].text +' No'; 
 sel.options[sel.selectedIndex].value = 
 sel.options[sel.selectedIndex].value +'-No';
 }
 } 
 }, false);
}( document ));
</script>

</body>
</html>

You can also see it here...

Full Page View
[codepen.io ]

Editor View
[codepen.io ]

coothead

coothead

1:02 pm on May 29, 2022 (gmt 0)

Hi there TheKG,

there were a couple of issues with the code that I posted previously.
Here is the amended code...


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
 background-color: #f9f9f9;
 font: 1em / 1em sans-serif;
 }
#pants {
 display: inline-block;
 padding: 1.5em 2em;
 border: 1px solid #999;
 border-radius: 1em;
 background-color: #fff;
 box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.5 ), 
  0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 font-size: 1em;
 text-align: center;
 }
 #pants fieldset {
 margin: 0.5em 0;
 }
#pants label {
 display: block;
 margin-top: 1em;
 font-size: 1em;
 }
#pants input {
 margin: 1em 0;
 font-size: 1em;
 }
#pants select,
#pants input {
 margin: 1em 0;
 font-size: 1em;
 }
</style>
</head>
<body>
 
<noscript>
 <p>
 This page requires that javascript is enabled to be fully functional.
 </p>
</noscript> 

<form id="pants" action="https://example.com">
<fieldset>
 <label for="sizes">select your size</label>
 <select id="sizes" name="size">
 <option value="">sizes</option>
 <option value="30-30">30, 30</option>
 <option value="30-32">30, 32</option>
 <option value="30-34">30, 34</option>
 <option value="30-36">30, 36</option>
 <option value="30-40U">30, 40U</option>
 <option value="30-42U">30, 42U</option>
 <option value="30-44U">30, 44U</option>
 <option value="30-46U">30, 46U</option>
 </select>
</fieldset>
<fieldset>
 <input type="submit" value="submit">
 <input type="button" value="reset options">
</fieldset>
</form>

<script>
(function( d ) {
 'use strict';
var form = d.querySelector( '#pants' ),
 sel = d.querySelector( '#sizes' ),
 res = d.querySelector( 'input[type="button"]');

 sel.addEventListener('change',
function(){
 
 if( sel.value.includes('U')){ 
 if ( confirm('Would you like the '+sel.value+ ' item to be hemmed?' ) ){
 sel.options[sel.selectedIndex].text= 
 sel.options[sel.selectedIndex].text +' Please'; 
 sel.options[sel.selectedIndex].value = 
 sel.options[sel.selectedIndex].value +'-Please';
 }
 else { 
 sel.options[sel.selectedIndex].text= 
 sel.options[sel.selectedIndex].text +' No'; 
 sel.options[sel.selectedIndex].value = 
 sel.options[sel.selectedIndex].value +'-No';
 }
 } 
 }, false);

 res.addEventListener('click',
function(){
 for( var c = 0; c < sel.options.length; c ++ ){
 if( sel.options[c].value.includes('-Please')) {
  sel.options[c].text=sel.options[c].text.replace('Please','')
  sel.options[c].value=sel.options[c].value.replace('-Please','');
 }
 if( sel.options[c].value.includes('-No')){
  sel.options[c].text=sel.options[c].text.replace('No','');  
  sel.options[c].value=sel.options[c].value.replace('-No','');
 }
 };
 },false);
}( document ));
</script>

</body>
</html>

The codepen examples above are OK

coothead

TheKG

6:40 pm on May 29, 2022 (gmt 0)

Here's the code I'm using on my page (please excuse me if I wasn't permitted to post this):

$result3= mysqli_query($cxn,"SELECT * FROM mydata WHERE style_no='Pants'");

while($xrow = mysqli_fetch_assoc($result3))
{
echo "<td><table id='botts' cellspacing='0'cellpadding='0' height='375px'>";
echo "<tr>";
echo "<td colspan='2' width='250px'>";
echo "<p>{$xrow['style_desc']}</p>";
echo "</td>";
echo "</tr>";

echo "<tr>";
echo "<td width='90px' align='center'>";
echo "<p>Style #{$xrow['style_no']}</p><p>{$xrow['color_name']}</p><p>{$xrow['descrip']}</p>";
echo "<p><a target='_blank' href='../Pants/images/{$xrow['photo_lg']}'><img src='../Pants/images/{$xrow['photo_sm']}' border='0' alt='{$xrow['vendor_name']} {$xrow['color_name']} Style #{$xrow['style_no']}' title='{$xrow['vendor_name']} {$xrow['color_name']} Style #{$xrow['style_no']}'></a></p>";
echo "<p>Click image to enlarge</p>";
echo "</td>";
echo "<td class='size' width='160px'>";

echo "<p class='red'>All sizes are $32.90 FREE HEMMING ON UNHEMMED PANTS</p>";
echo "<p> </p>";

echo "<p class='bold'>Quantity <input type=text name='VAR{$xrow['style_no']}Quantity' size='2' value=''></p>";
echo "<p> </p>";
echo "<select name='AppendItem{$xrow['style_no']}01'>";
echo "<option value='Select a size'>Select a Size</option>";

$result4= mysqli_query($cxn,"SELECT * FROM products WHERE ((style_no='F5275') AND (id={$xrow['id']})) ORDER BY size_rank") or die ("problem with second query" . mysqli_error());

while($prow = mysqli_fetch_array($result4))
{

echo "<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: {$prow['size']}</ul>|{$prow['price']}||{$prow['sku']}|||{$prow['weight']}||||||||||||{$prow['size']}'>{$prow['size']}</option>";

} // endwhile result 4

The page then displays a drop-down with all the sizes available. Using the code you provided only states "Please" when asked if hemming is desired. There needs to be a way for the customer to designate the length of the inseam they need that would be associated with the waist size they indicated. Is it possible?

coothead

8:46 pm on May 29, 2022 (gmt 0)

Hi there theKG,

obviously, I have no idea what HTML your PHP produces,
so I can only provide you with my take on your problem.

Bearing that in mind, have a look at this update...

Full Page View
[codepen.io ]

Editor View
[codepen.io ]

coothead

TheKG

7:00 pm on Jun 3, 2022 (gmt 0)

Thank you for the examples you posted, however, I have had no luck in revising your sample for my purposes. The html produced from my php includes the coding required for my shopping cart. For each of the style numbers to display the size in a drop-down, the style must be appended. There are several styles of pant that display on the page, this is the html for only one of them:

<form name='order' method='post' action='website of my cart' onSubmit='clearForm(this.name);'>
<tr><td width='90px' align='center'><p>Style #123456</p><p>Black</p><p>Pant</p><p><a target='_blank' href='../images/123456.jpg'><img src='../images/123456.jpg' border='0' alt='Pant Black Style #123456' title='Pant Black Style #123456'></a></p>
<p>Click image to enlarge</p></td><td class='size' width='160px'><p class='red'>Pricing is listed next to each size in the drop-down list below.</p><p> </p>
<p class='bold'>Quantity <input type=text name='VAR123456Quantity' size='2' value=''></p><p> </p>
<select id='sizes' name='AppendItem1234561'>
<option value='Select a size'>Select a Size</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 28 U</ul>|+54.94||603761|||1||||||||||||28 U'>28 U - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 30 30</ul>|+54.94||603762|||1||||||||||||30 30'>30 30 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 30 32</ul>|+54.94||603763|||1||||||||||||30 32'>30 32 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 30 34</ul>|+54.94||603793|||1||||||||||||30 34'>30 34 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 30 36</ul>|+54.94||603764|||1||||||||||||30 36'>30 36 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 32 30</ul>|+54.94||603765|||1||||||||||||32 30'>32 30 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 32 32</ul>|+54.94||603766|||1||||||||||||32 32'>32 32 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 32 34</ul>|+54.94||603767|||1||||||||||||32 34'>32 34 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 32 36</ul>|+54.94||603768|||1||||||||||||32 36'>32 36 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 34 30</ul>|+54.94||603769|||1||||||||||||34 30'>34 30 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 34 32</ul>|+54.94||603770|||1||||||||||||34 32'>34 32 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 34 34</ul>|+54.94||603771|||1||||||||||||34 34'>34 34 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 34 36</ul>|+54.94||603772|||1||||||||||||34 36'>34 36 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 36 30</ul>|+54.94||603773|||1||||||||||||36 30'>36 30 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 36 32</ul>|+54.94||603774|||1||||||||||||36 32'>36 32 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 36 34</ul>|+54.94||603775|||1||||||||||||36 34'>36 34 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 36 36</ul>|+54.94||603776|||1||||||||||||36 36'>36 36 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 38 30</ul>|+54.94||603777|||1||||||||||||38 30'>38 30 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 38 32</ul>|+54.94||603778|||1||||||||||||38 32'>38 32 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 38 34</ul>|+54.94||603779|||1||||||||||||38 34'>38 34 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 38 36</ul>|+54.94||603780|||1||||||||||||38 36'>38 36 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 40 30</ul>|+54.94||603781|||1||||||||||||40 30'>40 30 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 40 32</ul>|+54.94||603782|||1||||||||||||40 32'>40 32 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 40 34</ul>|+54.94||603783|||1||||||||||||40 34'>40 34 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 40 36</ul>|+54.94||603784|||1||||||||||||40 36'>40 36 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 42 30</ul>|+54.94||603785|||1||||||||||||42 30'>42 30 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 42 32</ul>|+54.94||603786|||1||||||||||||42 32'>42 32 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 42 34</ul>|+54.94||603787|||1||||||||||||42 34'>42 34 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 42 36</ul>|+54.94||603788|||1||||||||||||42 36'>42 36 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 44 30</ul>|+54.94||603789|||1||||||||||||44 30'>44 30 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 44 32</ul>|+54.94||603790|||1||||||||||||44 32'>44 32 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 44 34</ul>|+54.94||603791|||1||||||||||||44 34'>44 34 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 44 36</ul>|+54.94||603792|||1||||||||||||44 36'>44 36 - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 46 U</ul>|+54.94||550332|||1||||||||||||46 U'>46 U - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 48 U</ul>|+54.94||550333|||1||||||||||||48 U'>48 U - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 50 U</ul>|+54.94||550334|||1||||||||||||50 U'>50 U - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 52 U</ul>|+54.94||550335|||1||||||||||||52 U'>52 U - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 54 U</ul>|+54.94||550336|||1||||||||||||54 U'>54 U - $54.94</option>
<option value='|<ul style ='margin:0px;padding-left:20px'><li>Size: 56 U</ul>|+54.94||550337|||1||||||||||||56 U'>56 U - $54.94</option>
</select>

<input type='hidden' name='AddItem12345601' value='unique0917|Pant Black Style #123456||VAR123456Quantity|||Prompt||Tax|||70815:LA:US'>
<input type='image' name='AddGraphic' border ='0' alt='Add All Items To My Cart' title='Add All Items To My Cart' src='website of my cart'></td>
</table></td>

coothead

7:48 pm on Jun 3, 2022 (gmt 0)

Hi there TheKG,

" I have had no luck in revising your sample for my purposes"

Well, that is bad luck. :(

I hope that you can find the help that you need, though It probably
will not be forthcoming here.

coothead

TheKG

8:11 pm on Jun 3, 2022 (gmt 0)

I had that feeling because of the coding required for my shopping cart. Thanks for letting me know. I'll try another work-around.