How would I create a "DELETE" button on form?

[macwise]

I have a form that is dynamically generated on an order summary page.  When the page loads, I want the form to look similar to this:

 

 

QUANTITY          PRODUCT NAME              DELETE PRODUCT

5                        SuperWidget                  DELETE »

2                        MiniWidget                      DELETE »

4                        PsuedoWidget                  DELETE »

 

SUBMIT

 

When they click ANY of the DELETE» buttons, the form will submit and that particular product will be removed from the array.

 

Am I over thinking this?  How can I do this using @_POST?  Or is @_GET my only option?

[chintansshah]

You can do this via POST method also.

 

On click "Delete", follow below steps.

1. call Javascript function onclick

2. pass one hidden value with Row_id

3. submit form via Javascript.

 

 

[macwise]

Any sample code?  I'm not too savvy with JS.  Thanks for responding!

 

P.S. The array would look like this:

 

[6] => 3

[24] => 4

[25] => 2

[23] => 8

 

Where the key is the product ID and the value is the quantity...

[chintansshah]

Please find JS and php code to implement.

 

function delete_submit(prdt_id)
{

document.getElementByID('prdt_id').value = prdt_id;
window.forms['myform'].submit();
}
</script>
<?php

//After form tag open declare hidden variable
<input type='hidden' name='product_id' id ='prd_id' value=''>

/// below is generate by overview loop
<a href="#" onclick="delete_submit(6)">Delete</a>
<a href="#" onclick="delete_submit(24)">Delete</a>
<a href="#" onclick="delete_submit(25)">Delete</a>

?>

 

I hope you must clear with implementation logic.

[macwise]

I must be misunderstanding this code snippet.  Nothing happens when I click the Delete button. 

 

Here's what I have in my output:

 

In the header:

===========================================

<script type="text/javascript">

 

function delete_submit(prdt_id)

{

document.getElementByID('prdt_id').value = prdt_id;

window.forms['orderSummary'].submit();

}

 

</script>

===========================================

 

 

In the body:

===========================================

<form id="orderSummary" name="orderSummary" action="***(DestinationPage)***" method="post">

<input type='hidden' name='product_id' id ='prdt_id' value=''>

 

 

            <a href="product_URL1" target="_blank">PRODUCT1</a>

            <a href="#" onclick="delete_submit(24)">REMOVE</a>

 

 

            <a href="product_URL1" target="_blank">PRODUCT2</a>

            <a href="#" onclick="delete_submit(29)">REMOVE</a>

 

</form>

===========================================

[the182guy]

document.getElementByID('prdt_id').value = prdt_id;

This is not a valid javascript function. The D should be lowercase like

document.getElementById('prdt_id').value = prdt_id;

 

The next problem is this line:

window.forms['orderSummary'].submit();

 

it should be document.forms like

document.forms['orderSummary'].submit();

 

You actually don't need javascript for this because you're using normal <a href> links. You could just set the link url to a script and pass in the ID of the record to be deleted in the query string or $_GET, such as:

 

myscript.php?delete=24

[macwise]

Thanks, the182guy.  That fixed my form submission problem.

 

I understand that I can use $_GET to send this data in the querystring, but I want it to be a little more tamper (and fool) proof for the users, hence the $_POST requirement. 

 

Here's what I ended up with, and it now works (these are zeroing out values in a cookie, FYI):

 

In the header:

===========================================

<script type="text/javascript">

function delete_submit(prdt_id)
{
document.getElementByID('prdt_id').value = prdt_id;
document.getElementById('order_quantity').value = 0;
window.forms['orderSummary'].submit();
}

</script>

===========================================

 

 

In the body:

===========================================

<form id="orderSummary" name="orderSummary" action="***(DestinationPage)***" method="post">
<input type='hidden' name='product_id' id ='prdt_id' value=''>
<input type='hidden' name='order_quantity' id ='order_quantity' value='0'>

               <input type="textbox" value="5" name="24" />
               <a href="product_URL1" target="_blank">PRODUCT1</a>
               <a href="#" onclick="delete_submit(24)">REMOVE</a>


               <input type="textbox" value="7" name="29" />
               <a href="product_URL1" target="_blank">PRODUCT2</a>
               <a href="#" onclick="delete_submit(29)">REMOVE</a>

</form>

===========================================

[the182guy]

That can't work because you're still using document.getElementByID instead of the correct function name which is document.getElementById (lowercase d).

 

With the currrent code there will be a javascript error and the product ID that is posted for deletion will always be blank because it is not getting populated by your javascript....

[macwise]

Sorry, my mistake.  I had it changed in my code, but not here.  Here's the final (I think), and it works very well:

 

In the header:

===========================================

<script type="text/javascript">

function delete_submit(prdt_id)
{
document.getElementById('prdt_id').value = prdt_id;
document.getElementById('order_quantity').value = 0;
window.forms['orderSummary'].submit();
}

</script>

===========================================

 

 

In the body:

===========================================

<form id="orderSummary" name="orderSummary" action="***(DestinationPage)***" method="post">
<input type='hidden' name='product_id' id ='prdt_id' value=''>
<input type='hidden' name='order_quantity' id ='order_quantity' value='0'>

               <input type="textbox" value="5" name="24" />
               <a href="product_URL1" target="_blank">PRODUCT1</a>
               <a href="#" onclick="delete_submit(24)">REMOVE</a>


               <input type="textbox" value="7" name="29" />
               <a href="product_URL1" target="_blank">PRODUCT2</a>
               <a href="#" onclick="delete_submit(29)">REMOVE</a>

</form>

===========================================