Page 1 of 1

Multiple Repeated Forms Rate Topic: -----

#1 andrewsw  Icon User is online

  • Build your own boat!
  • member icon

Reputation: 6225
  • View blog
  • Posts: 24,835
  • Joined: 12-December 12

Posted 26 August 2015 - 10:16 AM

This tutorial explains and demonstrates how to create and work with multiple forms on a single page.

It is fairly common to use PHP to generate multiple HTML forms on a single page, perhaps a separate form for each user to allow edits to be made (or deletion) for a particular user. It is an equally common mistake to repeat HTML id's in this process.

ID's must be unique on the page.

For a single form the following is correct because the id's occur once on the page, although in this case the id's aren't essential because the inputs can be selected based on their names (in JS, jQuery and CSS):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
</head>
<body>
<form id="formid" action="somepage.php" method="POST">
    <input id="firstname" name="firstname" type="text">
    <input id="lastname" name="lastname" type="text">
    <input type="submit" value="Submit" name="submit">
</form>
</body>
</html>


This is wrong:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
</head>
<body>
<form id="formid" action="somepage.php" method="POST">
    <input id="firstname" name="firstname" type="text">
    <input id="lastname" name="lastname" type="text">
    <input type="submit" value="Submit" name="submit">
</form>
    <!-- wrong! -->
<form id="formid" action="somepage.php" method="POST">
    <input id="firstname" name="firstname" type="text">
    <input id="lastname" name="lastname" type="text">
    <input type="submit" value="Submit" name="submit">
</form>
</body>
</html>


because id's are duplicated on the page. (I've omitted the PHP generated values for the moment.)

Instead, the form-id is replaced with a class-name and the form-element id's are removed:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
</head>
<body>
<form class="myforms" action="somepage.php" method="POST">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input type="submit" value="Submit" name="submit">
</form>
<form class="myforms" action="somepage.php" method="POST">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input type="submit" value="Submit" name="submit">
</form>
</body>
</html>


In submit events for these forms you can use code like this:
$('.myforms').on('submit', function (event) {
    event.preventDefault();

    var fname = $("input[name='firstname']", this).val();
    var lname = $("input[name='lastname']", this).val();
    // perhaps serialize() and post the data using Ajax


It is possible to use the user-id to create unique form-element id's (firstname12, lastname12, etc.) but this is unnecessary because, as shown, we are able to identify each form-element within it's form using CSS selectors. These id's are useless in terms of PHP processing because they aren't submitted with the form; only elements having names will have their values submitted.

In terms of PHP processing, the user-id needs to appear as a value of a form element, so that it will be posted and the PHP can recognise which user is being edited or deleted:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
</head>
<body>
<!-- each form would be generated within a PHP loop -->
<form class="myforms" action="somepage.php" method="POST">
    <input name="userid" type="text" value="<?php echo $row['userid']; ?>">
    <input name="firstname" type="text" value="<?php echo $row['firstname']; ?>">
    <input name="lastname" type="text" value="<?php echo $row['lastname']; ?>">
    <input type="submit" value="Submit" name="submit">
</form>
<!-- each form would be generated within a PHP loop -->
<form class="myforms" action="somepage.php" method="POST">
    <input name="userid" type="text" value="<?php echo $row['userid']; ?>">
    <input name="firstname" type="text" value="<?php echo $row['firstname']; ?>">
    <input name="lastname" type="text" value="<?php echo $row['lastname']; ?>">
    <input type="submit" value="Submit" name="submit">
</form>
</body>
</html>


A common alternative is to attach the id to the action's url:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
</head>
<body>
<!-- each form would be generated within a PHP loop -->
<form class="myforms" action="somepage.php?id=<?php echo $row['userid']; ?>" method="POST">
    <input name="firstname" type="text" value="<?php echo $row['firstname']; ?>">
    <input name="lastname" type="text" value="<?php echo $row['lastname']; ?>">
    <input type="submit" value="Submit" name="submit">
</form>
<!-- each form would be generated within a PHP loop -->
<form class="myforms" action="somepage.php?id=<?php echo $row['userid']; ?>" method="POST">
    <input name="firstname" type="text" value="<?php echo $row['firstname']; ?>">
    <input name="lastname" type="text" value="<?php echo $row['lastname']; ?>">
    <input type="submit" value="Submit" name="submit">
</form>
</body>
</html>


In this case, the form-element values are in the $_POST array, whereas the id is found in the $_GET array. (JS/jQuery can still read the id in the action attribute if needed.)

Here's a complete, non-PHP, test page:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form class="myforms" action="somepage.php" method="POST">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input type="radio" name="fruit" value="Apples">
    <input type="radio" name="fruit" value="Pears">
    <input type="radio" name="fruit" value="Bananas">
    <input type="submit" value="Submit" name="submit">
</form>
<form class="myforms" action="somepage.php" method="POST">
    <input name="firstname" type="text">
    <input name="lastname" type="text">
    <input type="radio" name="fruit" value="Apples">
    <input type="radio" name="fruit" value="Pears">
    <input type="radio" name="fruit" value="Bananas">
    <input type="submit" value="Submit" name="submit">
</form>
<script>
$('.myforms').on('submit', function (event) {
    event.preventDefault();

    var fname = $("input[name='firstname']", this).val();
    var lname = $("input[name='lastname']", this).val();
    console.log(fname);
    // perhaps serialize() and post the data using Ajax
});
</script>
</body>
</html>


If you type the firstname Bob in the first form, and Ted in the second form, clicking the corresponding submit button will either print Bob or Ted in the console window. I am using the same 'submit' handler, but am able to read the data only from the form whose submit button was clicked.

(I added the radio-buttons, all having the same name, to show that they work independently within their parent form.)

A common alternative to having multiple forms is to fill a table with the data, adding adjacent Edit or Delete buttons. Pressing a button will trigger Javascript which collects the data in the same row and posts it. The Edit button might link to another page (or pop-up form) and fill it with the current row's data for editing. The Delete button just needs to post the user's id, either to a separate confirmation page (or pop-up window), or via an Ajax request which deletes the record.

This post has been edited by andrewsw: 26 August 2015 - 11:37 AM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1