Submit a Form via code

JavaScript
1

I am having a problem with this code. This code is generated with PHP that I wrote.

I have a form with two basic radio buttons to confirm deleting a record from a database. But I also want to add an extra popup box to confirm a second time, just to be 100% sure this record should be removed from the database.

I followed a few articles I found from Google to get the code, but I have no expierence with JavaScript.

I get a popup box when I click the button but it doesn’t do anything. When the user clicks cancel on the popup box, I want nothing to happen at all. But when they click “Continue” I want the popup box to submit the form in its current state.

There is a lot of PHP and I’m not sure that I can even post all of it here, but this is the rendered page, so I think that is all that will be needed?

Its ok the customer data is displayed on this code, its a sample database to test. The data isn’t real.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head">
	<title>Delete Customer</title>
	<link rel="stylesheet" href="includes/style.css" type="text/css" media="screen" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
[B][COLOR="DarkRed"]<SCRIPT language="JavaScript"> 
<!--
function do_delete()
{
 var del = confirm("This action cannot be undone! Delete?");
 if (del == true)
 {
   	// redirect to delete page with confirmation
	document.deleteCustomer.submit()
 }
 else
 {
 	// Do Nothing...
 }
}
//-->
</SCRIPT>[/COLOR][/B]</head>
<body>
	<div id="header">
		<h1>Database Demo</h1>
		<h2>152-148</h2>
	</div>
	<div id="navigation">
		<ul>
			<li><a href="index.php">Home Page</a></li>
			<li><a href="customerPage.php">Customer Page</a></li>
			<li><a href="ordersPage.php">Orders Page</a></li>
			<li><a href="orderDetailsPage.php">Order Details Page</a></li>
			<li><a href="totalsPage.php">Totals Page</a></li>
		</ul>
	</div>
	<br/><br/>
	<div id="content"><!-- Start of the page-specific content. -->
<!-- Script 8.1 - header.html -->
<h1>Delete Customer</h1[B][COLOR="darkred"]><form name="deleteCustomer" action="delete_customer.php" method="post">
	<h3>Customer: Brown, Robert (Social Security Number: 556-22-1236)</h3>
	<p>Are you sure you want to delete this customer?<br />
	<input type="radio" name="sure" value="Yes" /> Yes
	<input type="radio" name="sure" value="No" checked="checked" /> No</p>
	<p><input type="button" name="submit" value="Submit" onClick="do_delete()" /></p>
	<input type="hidden" name="submitted" value="TRUE" />
	<input type="hidden" name="id" value="1004" />
	</form>[/COLOR][/B]<!-- Script 3.3 - footer.html -->
	<!-- End of the page-specific content. --></div>
	
	<div id="footer">
		<p>Copyright &copy; 2010<br/></p>
	</div>
</body>
</html>

EDIT:
To be clear:

  1. The user presses DELETE on another page, and is directed to the delete_confirm.php
  2. The customer information is displayed in a form.
  3. The message is shown “Do you want to delete this record”.
  4. The user selects the “Yes” radio button and submits the form.
  5. One additional security the user gets a popup box “ARE YOU REALLY SURE?”
    6a. The user clicks “Continue” and the page is submitted. (PHP will handle accessing MySQL)
    6b. The user clicks “Cancel” and nothing happens. They just stay on the delete_confirm.php page.

The form works fine with the submit button, but I wanted to add just one popup box as extra security.

2

You need to add

return false;

to the end of the JavaScript so that the HTML submit doesn’t get triggered.

At the moment you are submitting the request twice if they want it submitted and once if they don’t.

3

I’ve solved this problem by redirecting the page.

  1. show form (address is www.url.com/admin/users.php?del=11011)
  2. on submit display the confirm popup
  3. if cancel: do nothing; if ok: redirect the browser to: www.url.com/admin/users.php?delete=11011
  4. in php, I only test if GET[‘delete’] is set and if the ID (11011) is valid, then delete

However, I would like to suggest some user interaction tips:

  • if your user wants to delete something he would like to just click “delete” and be done with it
  • if you really want to HELP him, you could create some backup system where he could recover deleted items if he wanted him
  • so … delete the row, however, insert it into another table or something

I know it’s more work, but, imagine yourself wanting to delete even 3 people - you’ll have to go through 3 pages for each.

Hope this helps!

Pav

4

Wait, add it where?

Right now, my form doesn’t do anything. When I click submit, I get a popup box. I click continue on the popup box and nothing happens, at all.

5

I’m not sure how this would work, I think I would have to rewrite the PHP page, which is allready setup to use the form submission, to do what you suggest.

I know this may not be a good design, but the project was for school. The project works fine the way it is, but next semester we will cover JavaScript. I just wanted to add some into my page now, so I can get an idea how it works. Its not required for my program and if I can’t get it working I will turn in without.

Edit: I think I know what you are saying call the page myself. I thought about that but my PHP page takes several arguments which it pulls from memory and database and I would have to pass all that stuff to my page when I do a manual redirect and its really not setup for this right now. I can’t just add "del=[cust_id]. At this point it not so simple.