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

时间:2014-01-27 18:29:38

标签: javascript php mysql

我想知道当提交的表单可以添加其他字段时,有人会如何向MySQL数据库发送输入数据和从MySQL数据库接收输入数据(因此一个订单表单可能有10个输入字段而另一个可能有30个输入字段) 。这是一个片段,让您了解我在说什么 - http://jsfiddle.net/gv0029/M84r7/

我看到一篇关于使用数组的帖子,但它是从4年前开始的,我想确保我所做的一切仍然是使用最佳实践。任何和所有的帮助或想法将不胜感激!谢谢!

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');

2 个答案:

答案 0 :(得分:1)

序列化您的表单并发送。在服务器端反序列化它并插入数据库

var str = $( "form" ).serialize();

参考 http://api.jquery.com/serialize/

答案 1 :(得分:1)

所以听起来你有一个未知数量的字段,你正在寻找一种简单的方法将它们发送到MySql。所以我假设您正在调用存储过程但不知道如何处理未知参数。我将采用该表单并将其序列化为JSON或将所有$ _POST值转换为XML对象。然后,您只需要将该单个对象传递到MySql存储过程中。进入内部后,您可以使用一些循环和XML函数来完成您必须执行的操作。这样,无论你提交10个字段还是100个字段,对存储过程的调用总是相同的。我用一个网站做这个,它工作得很好。不是在那台PC上,我现在可以获得代码。这些可能会有所帮助......

将PHP $ _POST转换为XML:http://davidwalsh.name/watch-post-save-php-post-data-xml 一旦你进入存储过程中,就可以使用一些MySql XML函数:http://dev.mysql.com/doc/refman/5.1/en/xml-functions.html

当我上另一台电脑时,我可以提供更多帮助。希望这有帮助。

更新:以下是我抓取所有$ _POST数据并将其转换为有效的XML文档的方法......

//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);

这是assocArrayToXML函数......

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();
}