以最佳方式向表单中添加字段组并在提交时生成JSON

动态添加一组字段并在提交表单时基于键-值对生成JSON的最佳方法。

<div class="container">
  <div class="col-md-4">
    <form method="POST" id="myform">
      <div class="form-group">
        <label for="title">Past Question Title</label>
        <input type="text" class="form-control" id="pqtitle" name="pqtitle" placeholder="Type Question Here" cols="40" rows="5" style="resize:vertical;" required>
      </div>
      <div class="form-group">
        <label for="course">Course Code</label>
        <select type="text" class="form-control" id="coursecode" name="coursecode" placeholder="Course"></select>
        <option></option>
      </div>
      <div id="fielda">
        <div id="fielda0">
          <!-- Text input-->
          <hr/>
          <fieldset>
            <legend>Question 1</legend>
            <div class="form-group">
              <label for="question1">Question</label>
              <textarea type="text" class="form-control" id="question1" name="question1" placeholder="Type Question Here" cols="40" rows="5" style="resize:vertical;" required></textarea>
            </div>
            <div class="form-group">
              <label for="nt">Upload Image</label>
              <input type="file" name="file" class="filestyle" data-iconName="glyphicon glyphicon-inbox">
            </div>
            <div class="form-group">
              <label for="options">Options</label>
              <div data-role="dynamic-fields">
                <div class="form-inline">
                  <div class="form-group">
                    <div class="col-md-12">
                      <input type="radio" name="answer1" id="answer1" value="Answer">Answer
                      <span>-</span>
                      <label class="sr-only" for="option1">Option</label>
                      <input type="text" class="form-control" id="option1" name="option1" placeholder="Type Option Here">
                    </div>
                  </div>
                  <button class="btn btn-danger" data-role="remove">
                    <span class="glyphicon glyphicon-remove"></span>
                  </button>
                  <button class="btn btn-primary" data-role="add">
                    <span class="glyphicon glyphicon-plus"></span>
                  </button>
                </div>
                <!-- /div.form-inline -->
              </div>
              <!-- /div[data-role="dynamic-fields"] -->
            </div>
            <div class="form-group">
              <label for="slug1">Slug</label>
              <textarea type="text" class="form-control" id="slug1" name="slug1" placeholder="Explain You Answer" cols="40" rows="5" style="resize:vertical;" required></textarea>
            </div>
            <div class="form-group">
              <label for="point1">Point</label>
              <input type="number" class="form-control" id="point1" name="point1" placeholder="Allocate Score Here" required>
              <hr/>
            </div>
          </fieldset>
        </div>
        <!--end field0-->
      </div>
      <!--end field-->

      <div class="form-group">
        <div class="col-dm-2 text-right">
          <button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
          <button type="submit" class="btn btn-danger" name="submit">Submit</button>
        </div>
      </div>

    </form>
  </div>
</div>

我同意@MagikalWizard的观点。从字段/值对构建JSON，在获得完整的JSON数组对象后，我将触发 AJAX POST，将数组传递到服务器端PHP页面：

$.ajax({
    type: 'POST',
    url: 'save_json_file.php',
    data: {'myjsondata': your_json_array},
    success: function(msg) {
      //alert(msg);  // you could show the response from the POST here to confirm completion / success.
    }
});

然后在PHP中检索POSTed JSON数据并使用file_put_contents将其保存到服务器：

$data_to_save = json_decode(file_get_contents('php://input'), true);
file_put_contents($data_to_save, 'newfilesaved.json');

注意：您可能需要对入站JSON数据进行URL编码
更新：您可以使用

$('form').serializeArray()

看一下这个例子，我把fiddle example放在一起

以最佳方式向表单中添加字段组并在提交时生成JSON

1条答案

相关问题

热门标签

最新问答