在模态窗口 Bootstrap / jQuery 上显示表单条目

Question

在用户提交之前，我正在使用 Bootstrap Modal 创建一个表单确认窗口。

这里是html部分：

<form role="form">
    <div class="form-group">
      <label for="Company" class="col-sm-3 control-label">Company:</label>
      <div class="col-sm-9">
        <input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
      </div>
    </div>

    <div class="form-group">
      <label for="Department" class="col-sm-3 control-label">Department:</label>
      <div class="col-sm-9">
        <input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
      </div>
    </div>

    <div class="form-group">
      <label for="Username" class="col-sm-3 control-label">Name:</label>
      <div class="col-sm-9">
        <input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
      </div>
    </div>

    <div class="form-group">
      <label for="Address" class="col-sm-3 control-label">Address:</label>
      <div class="col-sm-9">
        <input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
      </div>
    </div>

    <div class="form-group">
      <label for="TEL" class="col-sm-3 control-label">TEL:</label>
      <div class="col-sm-9">
        <input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
      </div>
    </div>

    <div class="form-group">
      <label for="Email" class="col-sm-3 control-label">Email:</label>
      <div class="col-sm-9">
        <input type="text" name="Email" id="Email" size="50" maxlength="100" class="form-control" placeholder="Email">
      </div>
    </div>
    <input type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">
  </form>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
        </div>
        <div class="modal-body">
          <div class="row">
          <div class="entryname col-xs-3 ">Company:</div>
          <div class="entrydata col-xs-9" id="mCompany"></div>
          </div>
          <div class="row">
          <div class="entryname col-xs-3">Department:</div>
          <div class="entrydata col-xs-9" id="mDepartment"></div>
          </div>
          <div class="row">
          <div class="entryname col-xs-3">Name:</div>
          <div class="entrydata col-xs-9" id="mUsername"></div>
          </div>
          <div class="row">
          <div class="entryname col-xs-3">Address:</div>
          <div class="entrydata col-xs-9" id="mAddress"></div>
          </div>
          <div class="row">
          <div class="entryname col-xs-3">TEL:</div>
          <div class="entrydata col-xs-9" id="mTel"></div>
          </div>
          <div class="row">
          <div class="entryname col-xs-3">Email:</div>
          <div class="entrydata col-xs-9" id="mEmail"></div>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="modal-footer">
          <div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
          <div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
        </div>
      </div>
    </div>
  </div>

这里是 jQuery 部分：

$('#submitBtn').click(function() {
  $('#mCompany').text($('#Company').val());
  $('#mDepartment').text($('#Department').val());
  $('#mUsername').text($('#Username').val());
  $('#mAddress').text($('#Address').val());
  $('#mTEL').text($('#TEL').val());
  $('#mEmail').text($('#Email').val());
});

您可以查看并尝试使用它 link to JSFiddle.

并非所有字段都是必需的，我想要做的是只显示带有数据的条目。

例如在下图中，我不希望出现红色边框部分。

Example Screen Shot

JSFiddle 上的示例只有 6 个字段，但我的表单有 30 多个字段。我想知道是否有办法只显示包含数据的字段。

Answer 1

从 HTML 中删除下面的部分

<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTel"></div>
</div>

从 jquery 中删除下面的部分

$('#mAddress').text($('#Address').val());
$('#mTEL').text($('#TEL').val());

Answer 2

我做了一些改进：

 
    var all = "";
    $('#submitBtn').click(function () {
    /* when the button in the form, 
    display the entered values in the modal */
    //console.log($("from input"));
    all = "";
    $.each($("form input"),function(i,v){
    var id= $(this).attr('id');
    	//console.log(id);
      //console.log("#m"+id);
    	$("#m"+id).text($(this).val());
      all = all + $(this).val();
    });
    hideEmptyInputs();    
  });
  $('#myModal').on('show.bs.modal', function (e) {
          if(all == ""){
          	e.preventDefault();
          }
    })
    
  function hideEmptyInputs(){
  	//console.log($("#myModal div"));
  	//console.log($("#myModal div[id^=m]"));
    $.each($("#myModal div[id^=m]"),function(i,v){
    	//console.log($(this).text());
      var value = $(this).text();
      if(value == ""){
      	//Hide if empty
        $(this).parent().css('display','none');
      }else{
        $(this).parent().css('display','block');      
      }
    });
  	//console.log("algo");
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form role="form">
        <div class="form-group">
          <label for="Company" class="col-sm-3 control-label">Company:</label>
          <div class="col-sm-9">
            <input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
          </div>
        </div>

        <div class="form-group">
          <label for="Department" class="col-sm-3 control-label">Department:</label>
          <div class="col-sm-9">
            <input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
          </div>
        </div>

        <div class="form-group">
          <label for="Username" class="col-sm-3 control-label">Name:</label>
          <div class="col-sm-9">
            <input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
          </div>
        </div>

        <div class="form-group">
          <label for="Address" class="col-sm-3 control-label">Address:</label>
          <div class="col-sm-9">
            <input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
          </div>
        </div>

        <div class="form-group">
          <label for="TEL" class="col-sm-3 control-label">TEL:</label>
          <div class="col-sm-9">
            <input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
          </div>
        </div>
        <button type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">Submit</button>
</form>
<!-- ########## Start Modal Section ########## -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
            </div>
            <div class="modal-body">
              <div class="row">
              <div class="entryname col-xs-3 ">Company:</div>
              <div class="entrydata col-xs-9" id="mCompany"></div>
              </div>
              <div class="row">
              <div class="entryname col-xs-3">Department:</div>
              <div class="entrydata col-xs-9" id="mDepartment"></div>
              </div>
              <div class="row">
              <div class="entryname col-xs-3">Name:</div>
              <div class="entrydata col-xs-9" id="mUsername"></div>
              </div>
              <div class="row">
              <div class="entryname col-xs-3">Address:</div>
              <div class="entrydata col-xs-9" id="mAddress"></div>
              </div>
              <div class="row">
              <div class="entryname col-xs-3">TEL:</div>
              <div class="entrydata col-xs-9" id="mTEL"></div>
              </div>
              <div class="row">
              <div class="entryname col-xs-3">Email:</div>
              <div class="entrydata col-xs-9" id="mEmail"></div>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="modal-footer">
              <div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
              <div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
            </div>
          </div>
        </div>
      </div>
      <!-- ########## End Modal Section ########## -->

您可以添加一些类来了解您想在模态中显示哪些字段以及不显示哪些字段......我认为也可以将动态添加到模态中......

动态添加输入：

 
    var all = "";
    $('#submitBtn').click(function () {
    /* when the button in the form, 
    display the entered values in the modal */
    //console.log($("from input"));
    all = "";
    
      $("#modalBody").html('');
    $.each($("form input"),function(i,v){
    var id= $(this).attr('id');
    if($(this).hasClass('add')){
      all = all + $(this).val();
      var input = '<div class="row">'
      + '<div class="entryname col-xs-3">' + id + ':</div>'
      + '<div class="entrydata col-xs-9" id="m' + id +'">' + $(this).val(); + '</div>'
      + '        </div>';
      
      //console.log(input);
      
      $("#modalBody").append(input);
      
    }
    	//console.log(id);
      //console.log("#m"+id);
    	//$("#m"+id).text($(this).val());
     // all = all + $(this).val();
    });
    hideEmptyInputs();    
  });
  $('#myModal').on('show.bs.modal', function (e) {
          if(all == ""){
          	e.preventDefault();
          }
    })
    
  function hideEmptyInputs(){
  	//console.log($("#myModal div"));
  	//console.log($("#myModal div[id^=m]"));
    $.each($("#myModal div[id^=m]"),function(i,v){
    	//console.log($(this).text());
      var value = $(this).text();
      if(value == ""){
      	//Hide if empty
        $(this).parent().css('display','none');
      }else{
        $(this).parent().css('display','block');      
      }
    });
  	//console.log("algo");
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form role="form">
        <div class="form-group">
          <label for="Company" class="col-sm-3 control-label">Company:</label>
          <div class="col-sm-9">
            <input type="text"  name="Company" id="Company" size="50" maxlength="100" class="form-control add" placeholder="Companyt">
          </div>
        </div>

        <div class="form-group">
          <label for="Department" class="col-sm-3 control-label">Department:</label>
          <div class="col-sm-9">
            <input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control add" placeholder="Department">
          </div>
        </div>

        <div class="form-group">
          <label for="Username" class="col-sm-3 control-label">Name:</label>
          <div class="col-sm-9">
            <input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control add" placeholder="Username">
          </div>
        </div>

        <div class="form-group">
          <label for="Address" class="col-sm-3 control-label">Address:</label>
          <div class="col-sm-9">
            <input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
          </div>
        </div>

        <div class="form-group">
          <label for="TEL" class="col-sm-3 control-label">TEL:</label>
          <div class="col-sm-9">
            <input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control add" placeholder="TEL">
          </div>
        </div>
        <button type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">Submit</button>
</form>
<!-- ########## Start Modal Section ########## -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
            </div>
            <div class="modal-body">
            <div id="modalBody"></div>
              <div class="clearfix"></div>
            </div>
            <div class="modal-footer">
              <div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
              <div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
            </div>
          </div>
        </div>
      </div>
      <!-- ########## End Modal Section ########## -->