-1

I am trying to make an order page to add multiple products through javascript. PHP/HTML code is:

<?php $module_row = 0; ?>
    <tbody id="module-row<?php echo $module_row; ?>">
    <tr>
    <td><select name="prod[]"><?php foreach ($products as $product) { ?><option value="<?php echo $product['ID']; ?>"><?php echo $product['name']; ?></option></td><td><a onClick="addProd();">Add New</a></td>
    </tr></tbody>
<?php $module_row++; ?>

And my Javascript code is:

        var module_row = <?php echo $module_row; ?>;
        function addProd() {    
            html  = '<tbody id="module-row' + module_row + '">';
            html += '  <tr>';
            html += '    <td class="left"><select name="prod[]">';
            <?php foreach ($products as $product) { ?>
            html += '      <option value="<?php echo $product['ID']; ?>"><?php echo $product['name']; ?></option>';
            <?php } ?>
            html += '    </select></td></tr></tbody>';
$('#module tfoot').before(html);
    module_row++;

Now I want to to show products array in later added rows to show products dropdown with out the products selected above. I have checked a lot of forums but could not find a solution to get the above selected value of dropdown. Any idea about this?

Hashmi
  • 195
  • 3
  • 12

1 Answers1

1

For enabling and disabling select options, something like this JS fiddle could help. Notice that it disables the possibility of selecting the same thing in multiple select boxes.

As for the code sample you posted, you're missing a PHP closing bracket (}) after your foreach.

Also, you can use <?= $var ?> as a more readable shortcut for <?php echo $var ?>

Try this:

<?php

$products = [
    [
        'ID' => 123,
        'name' => 'product1',
    ],
    [
        'ID' => 456,
        'name' => 'product2',
    ],
];

$module_row = 0;

?>

<tbody id="module-row <?= $module_row; ?>">
    <tr>
        <td>
            <select name="prod[]">
                <?php foreach ($products as $product) { ?>
                <option value="<?= $product['ID']; ?>">
                    <?= $product['name']; ?>
                </option>
                <?php } ?>
        </td>
        <td>
            <a onClick="addProd();">Add New</a>]
        </td>
    </tr>
</tbody>

<?php $module_row++; ?>
David Wyly
  • 1,621
  • 1
  • 9
  • 19
  • Thanks for your reply. I may have missed the closing bracket of foreach while copy/paste code here. But my code is working perfect and adding new rows with all the products in dropdown in javascript are working perfect. I just wanted to get the idea of how can I exclude earlier selected products in my mysql query used within script. – Hashmi Apr 08 '16 at 16:48
  • @Hashmi in that case, I would pull down the array of products, translate them into a javascript product array, and propagate your drop-downs using the javascript product arrays. From there, you can call javascript that will remove a product from your javascript array. PHP is server-side and javascript is client-side, and you're asking for client-side functionality. This is not possible to do through PHP (without reloading the page after selecting each product). – David Wyly Apr 08 '16 at 16:53
  • Thanks so much. Since I am quite a started in javascript/jquery, can you please suggest me a link for demo/study about JS functions used to achieve this. – Hashmi Apr 08 '16 at 16:57
  • http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array and http://stackoverflow.com/questions/5767325/remove-a-particular-element-from-an-array-in-javascript might help. I hope I was understanding your question correctly! On further reflection, it *could* be possible to remove HTML option elements via javascript, if that's the behavior you're looking for, but I'm not sure if this actually solves whatever it is you're trying to solve. – David Wyly Apr 08 '16 at 16:59
  • Actually its quite simple in words :). As you can see I have mentioned on row manually and others dynamically through javascript on button click. So, if in first row ProductID 1 is selected, then ProductID 1 should not show in dropdown of any further row added through add new button. Similary, if any other ProductID is selected in coming row, that ProductID should not show in any further row. In short, new adding row should first check which ProductIDs are selected previously and should query mysql without those ProductIDs. – Hashmi Apr 08 '16 at 17:09
  • Is there any way to do that? – Hashmi Apr 08 '16 at 17:38
  • I see. So for each option element, you could a selectable class to the element. For example, ` – David Wyly Apr 08 '16 at 17:50
  • I see ... well, as of thinking about it. Another solution can be like 'tag' selection here at stackoverflow. You can't select a tag twice. – Hashmi Apr 08 '16 at 18:50
  • Is there any demo link about this? – Hashmi Apr 08 '16 at 19:01
  • Something like http://jsfiddle.net/dZqEu/ could help. Notice that it disables the possibility of selecting the same thing in multiple select boxes. – David Wyly Apr 08 '16 at 19:03
  • You're awesome. Now I am trying to find a way to compare all select values on page because that function only works if both selects are in same container . I am seriously hating my little knowledge of javascript/jquery. – Hashmi Apr 08 '16 at 19:57
  • glad to get you on the right path! I'm editing the answer to include items from our discussion. – David Wyly Apr 08 '16 at 20:00
  • I was able to compare not just siblings through: $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true); – Hashmi Apr 09 '16 at 07:59
  • But the problem is that it works for the physically added – Hashmi Apr 09 '16 at 08:01
  • Is this really possible? Because I tried in PHP as well and there is no way I could find other than to set prodID as unique and use "INSERT IGNORE INTO". But this means that I can not add order for already added product later. Please help, I am stuck. :'( – Hashmi Apr 09 '16 at 15:44