How to get the data from an addRow() function using php

The question I have is this I have a form that allows the user to add a row for inputting more bedrooms. Let's say the user adds an extra 2 rows how do I extra the data from the form to insert into a database. below is an example of the form.

Thanks

<?php
// FOR TESTING
$bedsize = array (
  'Single','Double','Queen','King','Helipad'
);
?>
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<table class="table" id="addbeds">
  <tbody>
    <tr>
      <td>
        <p align="center">Bedroom</p>
      </td>
      <td>
        <p align="center">Comment</p>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type='text' name='bedroom[]' title='Please give this bedroom a name. ie Bedroom 1' maxlength='65,535' placeholder="Name this bedroom" class='input-small' value='<?php echo (isset($data['bedroom'])) ? $data['bedroom'] : '' ?>' data-toggle="tooltip" data-placement="right" />
      </td>
      <td>
        <input type='text' name='comment[]' title='Comment on this bedroom' maxlength='65,535' placeholder="What to find on this room." class='input-medium' value='<?php echo (isset($data['comment'])) ? $data['comment'] : '' ?>' data-toggle="tooltip" data-placement="right" />
      </td>
      <td>
        <select name="bedsize[]" title="bedsize" class="input-medium">
<?php foreach($bedsize as $key => $value): ?>
          <option value="<?php echo $key ?>"<?php echo (isset($data['bedsize']) && $data['bedsize'] == $key) ? ' selected="selected"' : null ;?>><?php echo $value ?></option>
<?php endforeach ?>
        </select>
      </td>
    </tr>
  </tbody>
</table>
<table style="WIDTH: 100%; BORDER-COLLAPSE: collapse">
  <tr>
    <td>
      <p align="center">
        <input type="button" value="Add Row" onclick="addRow()" />
        <input type="button" value="Subtract Row" onclick="delRow()" />
      </p>
    </td>
  </tr>
</table>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function addRow()
{
  var nr = $('#addbeds tr:last-child').clone();
  $('#addbeds tbody').append(nr);
}

function delRow() {
console.log($('#addbeds tbody tr').length);
  if ($('#addbeds tr').length > 2) {
	$('#addbeds tr:last-child').remove();
  }
}
</script>
</body>
</html>

                                        

Open in new window

Genesis5150Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul WilsonCommented:
hiii,

you can allow users to add as many as  row by creating dynamic form , and you can use PHP scripts to fetch the data  from dynamically added fields. Follow this article to implement this functionality: http://techstream.org/Web-Development/PHP/Dynamic-Form-Processing-with-PHP
0
Jessica WhitleySoftware DeveloperCommented:
As the user adds/deletes each row they execute a function. This is termed script. You can add as they are adding because it is using the php bedsize to add rows.

You need to know what the tables in your database need. How many columns, what kinds of values. You can ( Insert ) into the table using the php if you have the additional data needed. An SQL statement is pretty easy to construct itself after you know what the table needs. You can even google terms. But you will need the table name and the values for sure first.
0
Julian HansenCommented:
Step 1: Remove the console.log statement in the javascript - that was left in in error.

Step 2: Enclose your table in a form so you can send the data back

Step 3: Create a PHP script to receive the result - example below
<?php

// ONLY PROCESS IF DATA WAS SUBMITTED
if ($_POST) {
  $bedroom = $comment = $bedsize = false;
  
  if (is_array($_POST['bedroom'])) {
    $bedroom = $_POST['bedroom'];
  }
  if (is_array($_POST['comment'])) {
    $comment = $_POST['comment'];
  }
  if (is_array($_POST['bedsize'])) {
    $bedsize = $_POST['bedsize'];
  }
  
  if ($bedsize && $comment && $bedroom) {

    // VALID INPUT RECEIVED
    // DO YOUR DATA PROCESSING AND RETURN PROCESSING HERE.
    foreach($bedroom as $k => $v) {
      $sub = $k + 1;
      echo "Submission #{$sub}: Bedroom [{$bedroom[$k]}], Bedsize [{$bedsize[$k]}], Comment[{$comment[$k]}]<br/>";
    }
  }
}

Open in new window

HTML
<?php
// FOR TESTING
$bedsize = array (
  'Single' => 'Single',
  'Double' => 'Double',
  'Queen' => 'Queen',
  'King' => 'King',
  'Helipad' => 'Helipad'
);
?>
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<!-- PUT TABLE IN A FORM -->
<form action="process.php" method="post">
  <table class="table" id="addbeds">
    <tbody>
    <tr>
      <td>
      <p align="center">Bedroom</p>
      </td>
      <td>
      <p align="center">Comment</p>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
      <input type='text' name='bedroom[]' title='Please give this bedroom a name. ie Bedroom 1' maxlength='65,535' placeholder="Name this bedroom" class='input-small' value='<?php echo (isset($data['bedroom'])) ? $data['bedroom'] : '' ?>' data-toggle="tooltip" data-placement="right" />
      </td>
      <td>
      <input type='text' name='comment[]' title='Comment on this bedroom' maxlength='65,535' placeholder="What to find on this room." class='input-medium' value='<?php echo (isset($data['comment'])) ? $data['comment'] : '' ?>' data-toggle="tooltip" data-placement="right" />
      </td>
      <td>
      <select name="bedsize[]" title="bedsize" class="input-medium">
  <?php foreach($bedsize as $key => $value): ?>
        <option value="<?php echo $key ?>"<?php echo (isset($data['bedsize']) && $data['bedsize'] == $key) ? ' selected="selected"' : null ;?>><?php echo $value ?></option>
  <?php endforeach ?>
      </select>
      </td>
    </tr>
    </tbody>
  </table>
  <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse">
    <tr>
    <td>
      <p align="center">
      <input type="button" value="Add Row" onclick="addRow()" />
      <input type="button" value="Subtract Row" onclick="delRow()" />
<!-- ADD SUBMIT BUTTON -->
      <input type="submit" value="Submit" />
      </p>
    </td>
    </tr>
  </table>
</form>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function addRow()
{
  var nr = $('#addbeds tr:last-child').clone();
  $('#addbeds tbody').append(nr);
}

function delRow() {
  if ($('#addbeds tr').length > 2) {
  $('#addbeds tr:last-child').remove();
  }
}
</script>
</body>
</html>

Open in new window

Working sample here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Slight amendment to the AddRow. The current version copies the contents of the input's when you duplicate the row
function addRow()
{
  var nr = $('#addbeds tr:last-child').clone();
  // CLEAR INPUTs IN CLONE
  $('input', nr).val('');
  $('#addbeds tbody').append(nr);
}

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.