Question

我有一个充满MySQL数据的bootstrap模式。我遇到的问题是，在选中复选框后单击按钮时，数据从未发送到文本框。

这是我的模态：

<div class="modal fade" id="phoneList" tabindex ="-1" role="dialog" aria-labeledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       <h4 class="modal-title">Contact List</h4>
        </div>
         <div class="modal-body">

         <form class="form-horizontal" name="formPbook"/>
         <table class="table table-striped table-hover table-bordered">
         <thead>
          <tr>

          <th><input type="checkbox" class="form-control" name="chk_all" id="chk_all" onClick="CheckAll();"/>All</th>
           <th>Phone Number</th>
            <th>Name</th>
             </tr>
              </thead>
               <tbody>
                <tr>
          <?php
          include('function.php');

          try{
            $query = $conn->prepare("SELECT * FROM phonebook");
            $query->execute();
          }
          catch(PDOException $e){
            echo $e->getMessage();
            exit;
          }
          while($rs = $query->fetch())
          {
            extract($rs);
            ?>
                <td><input type="checkbox" name="select_all[]" value="<?php echo $PhoneNumber;?>" /></td>
                <td><?php echo $PhoneNumber;?></td>
                 <td><?php echo $Name;?></td>
                  </tr>
            <?php
          }
          ?>
          </tbody>
           </table>
         <div class="form-group">
          <div class="col-md-6">
           <button type="submit" id="btnselect" name="btnselect" class="btn btn-success pull-right">ACCEPT</button>
           </div>
            </div>
            </div>
             </div>
              </div>
                </form>

这是触发器和应该填充的文本框：

<form name="sentMessage" id="contactForm" novalidate autocomplete="off">
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Phone Number</label>
                            <input type="tel" class="form-control" placeholder="09**********" id="phoneNumber" required data-validation-required-message="Please enter your phone number.">
                            <p class="help-block text-danger"></p>
                        </div>
                        <button type="button" class="btn btn-success" id="fromContact" name="fromContact"
                        data-target="#phoneList" data-toggle="modal">Select from PhoneBook</button>
                        <button type="button" name="addPhoneBook" id="addPhoneBook" class="btn btn-default" data-toggle="modal" data-target="#addContact">Add Contact</button>
                    </div>
                    <div class="row control-group">
                        <div class="form-group col-xs-12 floating-label-form-group controls">
                            <label>Message</label>
                            <textarea rows="10" cols="45" class="form-control" placeholder="Message" id="smsMessage" required data-validation-required-message="Please enter a message."></textarea>
                            <p class="help-block text-danger"></p>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="form-group col-xs-12">
                            <button type="submit" id="sendMessage" name="sendMessage" class="btn btn-success btn-lg">Send</button>
                        </div>
                        <div id="result">
                         <img src="img/hourglass.gif" id="loading" style="display:none" class="col-lg"/>
                        </div>
                        <div id="msg"></div>
                    </div>
                </form>

我尝试使用这个jquery：

var arr = [];
$('#inputs input').change(function() {
if (this.checked) {
arr.push(this.value);
}
else {
 arr.splice(arr.indexOf(this.value), 1);
}
$('#target').val(arr + '');
});

请帮助我，因为我已经被困在这几天了......

我将我的jscript代码更改为此

$('formPbook').submit(function(){
        var arr[];
         $('input:checked[name=select_all[]]').each(function(){
          arr.push($(this).val());
         });
         $('#phonenum').val(arr.join(''));
          alert($('honenum').val());
           return false;
      });

但它仍然没有用......

Answer 1

我发现我的解决方案是我的实验，这就是结果。

<!-- Select Phone Numbers from phonebook -->
 <div class="modal fade" id="phoneList" tabindex ="-1" role="dialog" aria-labeledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       <h4 class="modal-title">Contact List</h4>
        </div>
         <div class="modal-body">
         <div id="inputs">
         <table class="table table-striped table-hover table-bordered">
         <thead>
          <tr>
          <th><input type="checkbox" class="form-control" name="chk_all" id="chk_all" onClick="CheckAll();"/>All</th>
           <th>Phone Number</th>
            <th>Name</th>
             </tr>
              </thead>
               <tbody>
                <tr>
          <?php
          include('function.php');

          try{
            $query = $conn->prepare("SELECT * FROM phonebook");
            $query->execute();
          }
          catch(PDOException $e){
            echo $e->getMessage();
            exit;
          }
          while($rs = $query->fetch())
          {
            extract($rs);
            ?>
                <td><input type="checkbox" name="select_all[]" value="<?php echo $PhoneNumber;?>" /></td>
                <td><?php echo $PhoneNumber;?></td>
                 <td><?php echo $Name;?></td>
                  </tr>
            <?php
          }
          ?>
          </tbody>
           </table>
            </div>
             </div>
               </div>
                </div>
                 </div>
                  </div>

解决我问题的JavaScript。

 var arr = [];
     $('#inputs input').change(function() {
if (this.checked) {
arr.push(this.value);
}
else {
arr.splice(arr.indexOf(this.value), 1);
}
$('#phoneNumber').val(arr + '');
});

获取引导模态值并设置为textfield

1 个答案: