如何发送和接收动态输入字段的MySQL数据

Question

I was wondering how someone would send and receive input data to and from a MySQL database when the form that is being submitted can have additional fields added to it (So one order form might have 10 input fields and another might have 30). Here is a snippet to give you an idea of what I am talking about - http://jsfiddle.net/gv0029/M84r7/

I saw an post about using arrays but it was from 4 years ago and am wanting to make sure whatever I do is still using best practices. Any and all help or ideas would be greatly appreciated! Thank you!

HTML:

<fieldset id="fence">
    <div name="inputFence" class="inputFence">
        <legend><strong>Fence Description</strong>
        </legend>
        <label>Footage:
            <input name="footage_1" class="footage" />
        </label>
        <label>Fence Height</label>
        <select name="fenceHeight_1" class="fenceHeight">
            <option value="select">Select Fence Height</option>
            <option value="6" id="fH6">6 Ft.</option>
            <option value="8" id="fH8">8 Ft.</option>
        </select>
        <legend><strong>Post Type</strong>
        </legend>
        <label>Post Quantity:
            <input name="postQuantity_1" class="postQuantity" />
        </label>
        <label>Picket Quantity
            <input name="picketQuantity_1" class="picketQuantity" />
        </label>
</fieldset>
<div>
    <input type="button" id="btnAddFence" value="Add Another Fence" />
    <input type="button" id="btnDelFence" value="Remove Fence" />
</div>
</form>

JS

//Dynamic Fence Input Fields
$('#btnAddFence').click(function () {

    // create the new element via clone()
    var newElem = $('.inputFence:last').clone();

    // insert the new element after the last "duplicable" input field
    $('.inputFence:last').after(newElem);

    // enable the "remove" button
    $('#btnDelFence').removeAttr('disabled');

    //get the input name and split into array (assuming your clone is always last)
    var parts = $('.fenceHeight:last').attr('name').split("_");
    //change the second element of the array to be one higher
    parts[1]++;
    //join back into a string and apply to the new element
    $('.fenceHeight:last').attr('name', parts.join("_"));

    //do the same for other two inputs
    parts = $('.postQuantity:last').attr('name').split("_");
    parts[1]++;
    $('.postQuantity:last').attr('name', parts.join("_"));

    parts = $('.footage:last').attr('name').split("_");
    parts[1]++;
    $('.footage:last').attr('name', parts.join("_"));

    parts = $('.6foc:last').attr('name').split("_");
    parts[1]++;
    $('.6foc:last').attr('name', parts.join("_"));

    parts = $('.railQuantity:last').attr('name').split("_");
    parts[1]++;
    $('.railQuantity:last').attr('name', parts.join("_"));

});

$('#btnDelFence').click(function () {
    //remove the last inputFence
    $('.inputFence:last').remove();

    // if only one element remains, disable the "remove" button
    if ($('.inputFence').length == 1) $('#btnDelFence').attr('disabled', 'disabled');
});

$('#btnDelFence').attr('disabled', 'disabled');

Answer 1

So it sounds like you have an unknown number of fields and you are looking for an easy way to send them to MySql. So I'm assuming you are calling a stored procedure but don't know how to deal with the unknown parameters. I would take the form and either serialize it into JSON or turn all the $_POST values into a XML object. Then you would only need to pass that single object into your MySql stored procedure. Once inside you could use some loops and XML function to do what you have to do. This way it wouldn't matter if your submitting 10 fields or 100 fields, the call to the stored proc would always be the same. I do this with a site and it works pretty good. Not on that PC to where I can get the code right now though. These might help....

To turn the PHP $_POST into XML: http://davidwalsh.name/watch-post-save-php-post-data-xml Some MySql XML function to use once you're inside the stored proc: http://dev.mysql.com/doc/refman/5.1/en/xml-functions.html

I could help more later when I get on my other PC.. Hope this helps.

UPDATE: Here is how I grab all $_POST data and turn it into a valid XML document...

//Grab all the POST info, turn it into a valid XML object and store it
$postData = null;
if($_SERVER['REQUEST_METHOD'] == 'POST' && count($_POST) > 0) $postData = assocArrayToXML('POST_DATA',$_POST);
//The assocArrayToXML returns the XML object with page breaks, we need a stright non-breaking string
//so that the flexigrid can display the results properly.
$postData = str_replace(chr(13), '', $postData);
$postData = str_replace(chr(10), '', $postData);

And this is the assocArrayToXML function...

function assocArrayToXML($root_element_name,$ar)
{
  $xml = new SimpleXMLElement("<?xml version=\"1.0\"?><{$root_element_name}></{$root_element_name}>");
  $f = create_function('$f,$c,$a','
          foreach($a as $k=>$v) {
              if(is_array($v)) {
                  $ch=$c->addChild(htmlspecialchars($k));
                  $f($f,$ch,$v);
              } else {
                  $c->addChild($k,htmlspecialchars($v));
              }
          }');
  $f($f,$xml,$ar);
  return $xml->asXML();
}