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 ########## -->

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

2 个答案: