Get bootstrap modal value and set to textfield - php

Question

I have a bootstrap modal that being filled with MySQL data. The problem that I was facing was when I click the button after checking the checkboxes the data was never sent to a textbox.
Here is my modal:
<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">×</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>
And here is the trigger and the textbox that supposed to be filled:
<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>
I tried to use this 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 + '');
});
Kindly help me please because I am stuck in this for days now...
I change my jscript code to this
$('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;
});
But it still not working....

Answer 1

I found my solution my experimenting and this is the outcome of that.
<!-- 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">×</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>
The javascript that solves my problem.
var arr = [];
$('#inputs input').change(function() {
if (this.checked) {
arr.push(this.value);
}
else {
arr.splice(arr.indexOf(this.value), 1);
}
$('#phoneNumber').val(arr + '');
});