Question

我使用Bootstrap3进行前端开发，使用PHP进行后端处理。我试图在我的一个页面（用户配置文件）中使用x-editable插件，其中我有几十个带有可编辑字段的表单。每个表单都是为了接受注册用户的不同细节，因此具有所有类型的输入（文本，日期，数字，电子邮件等）。

我的要求是：

假设我有10个不同的片段，每个片段都有一个表单来接受一组特定的信息[例如基本细节或联系方式或爱好等]。我想为一个表单设置一个编辑按钮，使其所有字段都可编辑，单个保存按钮以保存更新的数据（验证后）和取消按钮。
我想发送几个隐藏字段和表单。
我已经有一个高度定制的Validation插件（）非常适合我，我可以使用它而不是内置支持吗？因为，我在该插件中做了很多改动以满足我的要求，我不想再次经历这个循环。

以下是我想要的演示

<div class="container">
  <h2>Contact Information <button class="btn btn-default btn-xs pull-right">    <i class="glyphicon glyphicon-pencil"></i></button></h2>
  <form class="form-horizontal" role="form">
<div class="form-group">
      <label class="control-label col-sm-2" for="name">Name:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name" required max-length="50" placeholder="Enter Name">
      </div>
    </div>  
<div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" placeholder="Enter Email">
      </div>
    </div>   
<div class="form-group">
      <label class="control-label col-sm-2" for="number">Phone Number:</label>
      <div class="col-sm-10">
        <input type="number" class="form-control" id="number" required max-length="15" placeholder="Enter Phone Number">
      </div>
    </div>   
<div class="form-group">
      <label class="control-label col-sm-2" for="address">Address:</label>
      <div class="col-sm-10">
        <textarea class="form-control" id="address" placeholder="Enter Address"></textarea>
      </div>
    </div>
    <div class="form-group text-right">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-default">Cancel</button>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>

查看此表单的JSFiddle。如果有人可以为此做至少x可编辑的工作，我将会很有帮助。

P.S。：我是JSFiddle的新手，所以我不知道如何在那里进行基本的可编辑工作。下次我会发布一个完全正是我尝试过的小提琴而不是基本的html。提前致谢。

使用X-editable可以在现有bootstrap3水平格式中编辑多个字段

0 个答案: