如何通过 Bootstrap 表单获取表单数据并将其转换为 JSON

Question

以下是我的带有引导程序的 HTML5 代码：

<section id="login" class="main-box container-fluid col-xs-12 col-sm-12 col-md-12 col-lg-12">
  <form id="login-form" method="post" action="login.php" class="col-xs-12 col-sm-offset col-sm-5 col-md-offset-4 col-md-4">
    <div class="form-group">
      <label for="login-email">Email-ID</label>
      <input type="email" required class="form-control" id="login-email" placeholder="Enter Email-ID Here">
    </div>
    <div class="form-group">
      <label for="login-pass">Password</label>
      <input type="password" required class="form-control" id="login-pass" placeholder="Enter Password Here">
      <div class="pull-right" data-toggle="modal" data-target="#forgotPass">
          Forgot Pass?
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="checkbox">
    <label>
      <input type="checkbox"> Remember Me
    </label>
    </div>
    <div id="login-response" class="text-danger">
      Enter Credentials To Login!
    </div>
    <button type="submit" class="btn btn-success btn-block login-me">Login Me</button>
    <article id="login-toggle">
      New User? Click Here To Register!
    </article>
    </form>
</section>

这是我用来检索表单数据以存储在 JSON 中并进行提交的 jQuery 代码。

var data = $('#login-form')[0];
console.log(data);
$('#login-form').submit();

然而代码的输出是这样的：

<form id="login-form" method="post" action="login.php" class="col-xs-12 col-sm-offset col-sm-5 col-md-offset-4 col-md-4">
    <div class="form-group">
      <label for="login-email">Email-ID</label>
      <input type="email" required="" class="form-control" id="login-email" placeholder="Enter Email-ID Here">
    </div>
    <div class="form-group">
      <label for="login-pass">Password</label>
      <input type="password" required="" class="form-control" id="login-pass" placeholder="Enter Password Here">
      <div class="pull-right" data-toggle="modal" data-target="#forgotPass">
          Forgot Pass?
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="checkbox">
    <label>
      <input type="checkbox"> Remember Me
    </label>
    </div>
    <div id="login-response" class="text-danger" style="display: none;">
      Enter Credentials To Login!
    </div>
    <button type="submit" class="btn btn-success btn-block login-me">Login Me</button>
    <article id="login-toggle">
      New User? Click Here To Register!
    </article>
    </form>

它将整个代码作为输出而不是存在的值，也没有提交表单。

Answer 1

有两种解决方案：[我在js文件下面添加了textarea以形成检查]

1 不要使用名称并从 html 直接创建 json：

<script type="text/javascript">
jQuery(document).ready(function($){ 
function validateForm() { //custom function to validarte a form
  var isValid = true;
  $('input').each(function() {
    if ( $(this).val() === '' )
      isValid = false;
  });
  return isValid;
}

var jsoninput = $('#json');
var submit = $('button[type="submit"]');
var form = $('form');
var users = [];
var user = {};
submit.click(function(e){
  e.preventDefault();
  if(validateForm()) {
    $('input').each(function(e) {
      var type = $(this).attr('type');
      var value = $(this).val();
      user[type] = value; 
    })
    users.push(user);
    console.log(users);
    users = JSON.stringify(users);
    jsoninput.html(users);
    // form.submit(); uncomment this if u like to submit the form
  } else  {
    alert('form is invalid fill some fields');
  }
});
});
</script>

2 使用名称并序列化并更改为json：

<script type="text/javascript">
jQuery(document).ready(function($){ 
//this solutions uses name attribute and serialization to create and json object
var json = $('#json');
var form = $('form');
var group = $('.form-group input'); // specify which group u d like to serialize;
var submit = $('button[type="submit"]');
form.submit(function(e){
  e.preventDefault(); // prevebt form submition if u done ur work remove this line;
  var user = group.serializeArray();
  var loginFormObject = {};
  for (var i = user.length - 1; i >= 0; i--) {
    var name = user[i].name;
    var value = user[i].value;
    loginFormObject[name] = value;
  }
  loginFormObject = JSON.stringify(loginFormObject);
  console.log(loginFormObject);
  json.text(loginFormObject);
});
});
</script>

3 HTML 表单：

<section id="login" class="main-box container-fluid col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form id="login-form" method="post" action="login.php" class="col-xs-12 col-sm-offset col-sm-5 col-md-offset-4 col-md-4">
  <textarea style="width:100%;height: 200px;" id="json" type="" name="json-to-database"></textarea>
  <div class="form-group">
    <label for="login-email">Email-ID</label>
    <input type="email" required class="form-control" id="login-email" placeholder="Enter Email-ID Here" name="email">
  </div>
  <div class="form-group">
    <label for="login-pass">Password</label>
    <input type="password" required class="form-control" id="login-pass" placeholder="Enter Password Here" name="password">
    <div class="pull-right" data-toggle="modal" data-target="#forgotPass">
      Forgot Pass?
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" name="remember"> Remember Me
    </label>
  </div>
  <div id="login-response" class="text-danger">
    Enter Credentials To Login!
  </div>
  <button type="submit" class="btn btn-success btn-block login-me">Login Me</button>
  <article id="login-toggle">
    New User? Click Here To Register!
  </article>
</form>
  </section>

Answer 2

在每个<input> 元素中添加name 属性。

name 属性定义表单控件的名称，并在提交表单时与表单控件的值一起提交。它是与用于表单提交的元素关联的名称/值对的名称部分。