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

Posted 2023-05-09

【中文标题】如何通过 Bootstrap 表单获取表单数据并将其转换为 JSON

【英文标题】：How to get form data through the Bootstrap forms and convert it into JSON

【发布时间】：2017-11-19 23:41:18

【问题描述】：

以下是我的带有引导程序的 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>

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

【问题讨论】：

$('#login-form')[0] 返回匹配的 DOM 节点。要获取“表单数据”，您必须使用 .serialize()

我使用它返回一个空数组。你可以试试

因为您的输入元素都没有name

【参考方案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>

【参考方案2】：

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

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