将按钮的 ID 传递到我的模式的文本框
passing button's ID to my modal's textbox
这里是新手。我有一个 insert function 并且工作正常。但是,我想要完成的更多工作是 将我的按钮的 eventID 值传递到我的模式的输入类型文本框 。任何帮助将不胜感激。我提供了以下代码、更多解释和屏幕截图。谢谢你,祝你有美好的一天。
查看:
<div class="modal fade" id="createModall" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form id="insertParticipant">
<div class="form-group">
<input type="number" name="eventID" id="eventID" value="Pass the button's eventID value here"/>
</div>
<div class="form-group">
<label for="description">Entry Number</label>
<input type="number" class="form-control" id="entry number" name="entryID" value="<?php echo $last_id ?>" readonly placeholder="">
</div>
<div class="form-group">
<label for="description">Entry Name</label>
<input type="text" class="form-control" id="entryName" name="entryName" placeholder="" >
</div>
<div class="form-group">
<label for="description">Owner/Financier</label>
<input type="text" class="form-control" id="owner" name="owner" placeholder="" >
</div>
<div class="form-group">
<label for="description">No Fights</label>
<input type="number" class="form-control" id="noOfFight" name="noOfFight" placeholder="">
</div>
<div class="form-group">
<label for="description">Score/Level</label>
<input type="number" class="form-control" id="score" name="score" placeholder="" >
</div>
<!-- tapos ng add entries -->
<!-- dito ung table -->
<div class="card card-danger card-outline" style="width: 100%;">
<div class="card-header">
<div class="stag">
<center> STAG/COCK ENTRY DETAILS</center>
</div>
</div>
<div class="card-body table-responsive " style="display: inline-block;">
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input id="lightBand" name="lightBand1" type="number" value="" class="auto"/>
</td>
<td class="labelcell">
<input id="weight" name="weight1" type="number" />
</td>
<td class="labelcell">
<input id="wingBand" name="wingBand1" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>
</div>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</ol>
</div>
</form>
</div>
</div> // please ignore the missing divs. :(( thank you
Ajax
// This is my insert function using ajax
<script type="text/javascript">
$("#insertParticipant").submit(function(event) {
event.preventDefault();
$.ajax({
url: "<?php echo base_url('transaction/createParticipant'); ?>",
data: $("#insertParticipant").serialize(),
type: "post",
async: false,
dataType: 'json',
success: function(response){
$('#insertParticipant')[0].reset();
window.location.reload();
},
error: function()
{
alert("error");
}
});
});
</script>
//this is my function for opening the modal
function add_person()
{
save_method = 'add';
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
$('#createModall').modal('show'); // show bootstrap modal
$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
}
控制器
public function ajax_list()
{
$list = $this->transactions->get_datatables();
$data = array();
$no = $_POST['start'];
foreach ($list as $person) {
$no++;
$row = array();
$row[] = $person->eventID;
$row[] = $person->description;
$row[] = $person->derbyDate;
$row[] = $person->fightType;
$row[] = $person->host;
$row[] = $person->venue;
$row[] = $person->createdBy;
$row[] = $person->dateCreated;
$row[] = $person->updatedBy;
$row[] = $person->dateUpdated;
//This is where the value of my row is getting stored. $person->eventID
$row[] = '
<a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Add" onclick="add_person('."'".$person->eventID."'".')"><i class="glyphicon glyphicon-search"></i> Add</a>
';
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->transactions->count_all(),
"recordsFiltered" => $this->transactions->count_filtered(),
"data" => $data,
);
//output to json format
echo json_encode($output);
}
您已经在函数内部传递了 id
即:onclick="add_person('."'".$person->eventID."'".')"
所以在定义函数时只需将该 ID 作为参数并使用 $("#eventID").val(id)
在您的输入中设置该值-盒子 。即:
function add_person(id){
$("#eventID").val(id)
//other codes...
}
这里是新手。我有一个 insert function 并且工作正常。但是,我想要完成的更多工作是 将我的按钮的 eventID 值传递到我的模式的输入类型文本框 。任何帮助将不胜感激。我提供了以下代码、更多解释和屏幕截图。谢谢你,祝你有美好的一天。
查看:
<div class="modal fade" id="createModall" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form id="insertParticipant">
<div class="form-group">
<input type="number" name="eventID" id="eventID" value="Pass the button's eventID value here"/>
</div>
<div class="form-group">
<label for="description">Entry Number</label>
<input type="number" class="form-control" id="entry number" name="entryID" value="<?php echo $last_id ?>" readonly placeholder="">
</div>
<div class="form-group">
<label for="description">Entry Name</label>
<input type="text" class="form-control" id="entryName" name="entryName" placeholder="" >
</div>
<div class="form-group">
<label for="description">Owner/Financier</label>
<input type="text" class="form-control" id="owner" name="owner" placeholder="" >
</div>
<div class="form-group">
<label for="description">No Fights</label>
<input type="number" class="form-control" id="noOfFight" name="noOfFight" placeholder="">
</div>
<div class="form-group">
<label for="description">Score/Level</label>
<input type="number" class="form-control" id="score" name="score" placeholder="" >
</div>
<!-- tapos ng add entries -->
<!-- dito ung table -->
<div class="card card-danger card-outline" style="width: 100%;">
<div class="card-header">
<div class="stag">
<center> STAG/COCK ENTRY DETAILS</center>
</div>
</div>
<div class="card-body table-responsive " style="display: inline-block;">
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input id="lightBand" name="lightBand1" type="number" value="" class="auto"/>
</td>
<td class="labelcell">
<input id="weight" name="weight1" type="number" />
</td>
<td class="labelcell">
<input id="wingBand" name="wingBand1" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>
</div>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</ol>
</div>
</form>
</div>
</div> // please ignore the missing divs. :(( thank you
Ajax
// This is my insert function using ajax
<script type="text/javascript">
$("#insertParticipant").submit(function(event) {
event.preventDefault();
$.ajax({
url: "<?php echo base_url('transaction/createParticipant'); ?>",
data: $("#insertParticipant").serialize(),
type: "post",
async: false,
dataType: 'json',
success: function(response){
$('#insertParticipant')[0].reset();
window.location.reload();
},
error: function()
{
alert("error");
}
});
});
</script>
//this is my function for opening the modal
function add_person()
{
save_method = 'add';
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
$('#createModall').modal('show'); // show bootstrap modal
$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
}
控制器
public function ajax_list()
{
$list = $this->transactions->get_datatables();
$data = array();
$no = $_POST['start'];
foreach ($list as $person) {
$no++;
$row = array();
$row[] = $person->eventID;
$row[] = $person->description;
$row[] = $person->derbyDate;
$row[] = $person->fightType;
$row[] = $person->host;
$row[] = $person->venue;
$row[] = $person->createdBy;
$row[] = $person->dateCreated;
$row[] = $person->updatedBy;
$row[] = $person->dateUpdated;
//This is where the value of my row is getting stored. $person->eventID
$row[] = '
<a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Add" onclick="add_person('."'".$person->eventID."'".')"><i class="glyphicon glyphicon-search"></i> Add</a>
';
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->transactions->count_all(),
"recordsFiltered" => $this->transactions->count_filtered(),
"data" => $data,
);
//output to json format
echo json_encode($output);
}
您已经在函数内部传递了 id
即:onclick="add_person('."'".$person->eventID."'".')"
所以在定义函数时只需将该 ID 作为参数并使用 $("#eventID").val(id)
在您的输入中设置该值-盒子 。即:
function add_person(id){
$("#eventID").val(id)
//other codes...
}