如何在烧瓶中提交多字段组并存储到数据库中

Question

这是我的表单图片

现在我希望在提交此表单时具有功能，我将值存储在其中，但我如何为使用 jquery 动态生成的那些字段存储值

这是动态文件的示例代码

<div class="row">
                <div class="form-group">
                    <div class="col-xs-4 has-feedback">                         

                        <label class="control-label">Select Category</label>                      
                        <select class="form-control" name="question[0].challengecat" data-fv-field="question[0].challengecat">
                                <option value="">None</option>


                                    <option value="nature">Nature</option>



                                    <option value="health">Health</option>




                        </select><i style="display: none;" class="form-control-feedback" data-fv-icon-for="question[0].challengecat"></i>
                        <span class="help-block">Select Question Category </span>                      
                    <small style="display: none;" class="help-block" data-fv-validator="notEmpty" data-fv-for="question[0].challengecat" data-fv-result="NOT_VALIDATED">The Category is required</small></div>
                    <div class="col-xs-4 has-feedback">

                                <label class="control-label">Percentage Question</label>
                                <input type="text" placeholder="Percentage Question" class="form-control" name="question[0].percentage_question" id="percentage_question" data-fv-field="question[0].percentage_question"><i style="display: none;" class="form-control-feedback" data-fv-icon-for="question[0].percentage_question"></i>
                                <span class="help-block">Percentage question belongs to category </span> 
                    <small style="display: none;" class="help-block" data-fv-validator="notEmpty" data-fv-for="question[0].percentage_question" data-fv-result="NOT_VALIDATED">The Question percentage is required</small></div>
                    <div class="col-xs-1">
                                <label class="control-label"></label>   
                        <button class="btn btn-default addButton" type="button"><i class="fa fa-plus"></i></button>
                                <span class="help-block"></span> 
                    </div>
                </div>
            </div>

<div class="form-group  row" data-challenge-index="1">
                <div class="col-xs-4 has-feedback">
                    <label class="control-label">Select Category</label>                      
                        <select class="form-control" name="question[1].challengecat" data-fv-field="question[1].challengecat">
                                <option value="">None</option>


                                    <option value="nature">Nature</option>



                                    <option value="health">Health</option>




                        </select><i style="display: none;" class="form-control-feedback" data-fv-icon-for="question[1].challengecat"></i>
                        <span class="help-block">Select Question Category </span>
                <small style="display: none;" class="help-block" data-fv-validator="notEmpty" data-fv-for="question[1].challengecat" data-fv-result="NOT_VALIDATED">The Category is required</small></div>
                <div class="col-xs-4 has-feedback">
                    <label class="control-label">Percentage Question</label>
                                <input type="text" placeholder="Percentage Question" class="form-control" name="question[1].percentage_question" id="percentage_question" data-fv-field="question[1].percentage_question"><i style="display: none;" class="form-control-feedback" data-fv-icon-for="question[1].percentage_question"></i>
                                <span class="help-block">Percentage question belongs to category </span>
                <small style="display: none;" class="help-block" data-fv-validator="notEmpty" data-fv-for="question[1].percentage_question" data-fv-result="NOT_VALIDATED">The Question percentage is required</small></div>
                <div class="col-xs-1">
                <label class="control-label"></label>
                <button class="btn btn-default removeButton" type="button"><i class="fa fa-minus"></i></button>
                <span class="help-block"></span>
            </div>
</div>

<div class="form-group  row" data-challenge-index="2">
                <div class="col-xs-4 has-feedback">
                    <label class="control-label">Select Category</label>                      
                        <select class="form-control" name="question[2].challengecat" data-fv-field="question[2].challengecat">
                                <option value="">None</option>


                                    <option value="nature">Nature</option>



                                    <option value="health">Health</option>




                        </select><i style="display: none;" class="form-control-feedback" data-fv-icon-for="question[2].challengecat"></i>
                        <span class="help-block">Select Question Category </span>
                <small style="display: none;" class="help-block" data-fv-validator="notEmpty" data-fv-for="question[2].challengecat" data-fv-result="NOT_VALIDATED">The Category is required</small></div>
                <div class="col-xs-4 has-feedback">
                    <label class="control-label">Percentage Question</label>
                                <input type="text" placeholder="Percentage Question" class="form-control" name="question[2].percentage_question" id="percentage_question" data-fv-field="question[2].percentage_question"><i style="display: none;" class="form-control-feedback" data-fv-icon-for="question[2].percentage_question"></i>
                                <span class="help-block">Percentage question belongs to category </span>
                <small style="display: none;" class="help-block" data-fv-validator="notEmpty" data-fv-for="question[2].percentage_question" data-fv-result="NOT_VALIDATED">The Question percentage is required</small></div>
                <div class="col-xs-1">
                <label class="control-label"></label>
                <button class="btn btn-default removeButton" type="button"><i class="fa fa-minus"></i></button>
                <span class="help-block"></span>
            </div>
</div>

那么如何使用for循环或其他方式将这些动态生成的字段保存在变量中

谢谢 企业社会责任

Answer 1

您可以使用element.getElementsByTagName() JavaScript 方法来获取所有表单元素及其值。例如：

<html>
  <head>
    <script type="text/javascript">
      function putRequest() {
        var parentObject = document.getElementById('parent-element');
        var childrenObjects = parentObject.getElementsByTagName('input');
        var params = [];

        for (var i = 0; i < childrenObjects.length; i++) {
          var obj = childrenObjects[i];
          var objType = obj.getAttribute('type');

          if (objType == 'text')
            params.push(obj.id + '=' + encodeURIComponent(obj.value));
          // Here can be actions for other input types
          // like "radio" or "checkbox"
        }

        var requestBody = params.join('&');

        var xhr = new XMLHttpRequest();
        xhr.open('PUT', '/some/test/url', false);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(requestBody);
      }
    </script>
  </head>
  <body>
    <div id="parent-element">
      <div>
        <label>Attribute1</label>
        <input id="attribute1" type="text">
      </div>
      <div>
        <label>Attribute2</label>
        <input id="attribute2" type="text">
      <div>
      <div>
        <input type="button" value="Send" onclick="putRequest()">
      </div>
    </div>
  </body>
</html>

它将PUT请求发送到/some/test/url，请求正文为：attribute1=somevalue&attribute2=anothervalue。

在服务器端，您可以从flask.request.form 字典中获取所有属性：

@app.route('/some/test/url')
def some_test_url():
  for attr_name, attr_value in request.form.iteritems():
    print attr_name, attr_value