How can I append a select box with same option and different name.
I have a loop, where my php reads a sql table, and for each row, it creates a option tag
this is the function to append:
$(function(){
$('#add').click(function(){
var select = $('span[id=combo]').html();
$('#allCombo').append('<br/><span id="combo">'+select+'</span>');
});
});
this is the select box:
<span id="allCombo">
<span id="combo" name="combo">
<select name="item">
<?php foreach ($items as $item) { ?>
<option value="<?php echo $item->item_id; ?>">
<?php echo $item->item_name; ?></option>
<?php } ?>
</select>
</span>
</span>
Can anyone help me.
thanks before.
$(function(){
$('#add').click(function(){
var select = $('#combo').html();
$('<br/><span id="combo">'+select+'</span>').appendTo('#allCombo').find.('select').attr('name', 'uniqueName');
});
});
Use item[] as name . PHP will convert this to an array, so the selected values are in an array stored at $_POST['item'].
But more important is to not duplicate IDs. I suggest to remove the inner span completely, as
you cannot have duplicate IDs and
span tags have no name attribute
so there is no need to keep this tag.
<span id="allCombo">
<select name="item[]">
<?php foreach ($items as $item): ?>
<option value="<?php echo $item->item_id; ?>">
<?php echo $item->item_name; ?>
</option>
<?php endforeach; ?>
</select>
</span>
The JS code would be:
$(function(){
$('#add').click(function(){
$('#allCombo')
.append('<br />')
.append($('#allCombo select').first().clone());
});
});
var newSelect = $('select[name=item]').clone().attr('name', 'newselect');
$('#allCombo').append(newSelect);
You can always use the clone method:
var new_combo $('span#combo').clone();
new_combo.attr('name', 'second_combo');
new_combo.attr('id', 'second_combo'); // for valid html
$('#allCombo').append(new_combo);
Related
The options for the select menu are created from a database. I want to print the value of the selected option on the input. The code below only prints the first option value. I want to print them all. thanks.
<?php
$sql2 = "select * from add_meta";
$sonuc2= $conn->query($sql2);
if($sonuc2->num_rows>0){
while($kayitlar2 = $sonuc2->fetch_object()){
if($kayitlar2->isim!="Renk")
{
?>
<select id="selectid" name="<?php $kayitlar2->isim; ?>" class="sec" onchange="degergoster()" >
<option id="barkodd" value="" style="display:none;"><?php echo $kayitlar2->isim; ?> seçin</option>
<?php
$sql = "select * from add_barkod where kat_list in('$kayitlar2->isim')";
$sonuc= $conn->query($sql);
if($sonuc->num_rows>0){
while($kayitlar = $sonuc->fetch_object()){
?>
<option name="selectname1" value="<?php echo $kayitlar->ekle_hane;?>"><?php echo $kayitlar->ekle_isim; }} ?></option>
</select>
<?php
} }}
?>
<input id="e" name="varyantkod" class="sec">
Javascript code:
function degergoster() {
var selectkutu = document.getElementById("selectid");
var selectkutu_value = selectkutu.options[selectkutu.selectedIndex].value;
document.getElementById("e").value=selectkutu_value;
}
just get the value of the select object and add that to the value of the input
change
document.getElementById("selectid");
to
document.getElementById("selectid").value;
This should work
I want to display the data selection based on the retrieval of the foreach using chosen jquery, I have added remove () and chosen () and the chosen format does not work, how do I remove and update the chosen, is my syntax wrong? please help ... sorry if something unclear can be asked to me ..
This is my syntax for chosen
$('#acctAccessed').change(function(){
$('#acctAccessed').find('option').remove();
var opt = '';
<?php foreach ($data_from_ctr['account'] as $data) :?>
$('#acctAccessed').append('<option value="'<?php echo $data['idMst'] ?>'">'<?php echo $data['giroOB']; ?>'</option>');
<?php //endforeach ?>;
$(".chosen-select").trigger("chosen:updated");
});
This is a table format that I want to make chosen
<tr class="odd">
<td width="150"><strong>Account Access</strong></td>
<td width="10">:</td>
<td colspan="2">
<select id="acctAccessed" name="acctAccessed[]" multiple="multiple" class="chosen-select" style="width:350px;" data-placeholder="Select account">
</select>
<input id="chkall" type="checkbox" >Select All</input>
</td>
$('#acctAccessed').change(function(){
$('#acctAccessed').empty()
var opt = '';
<?php foreach ($data_from_ctr['account'] as $data) :?>
$('#acctAccessed').append('<option value="'<?php echo $data['idMst'] ?>'">'<?php echo $data['giroOB']; ?>'</option>');
<?php //endforeach ?>;
//$(".chosen-select").trigger("chosen:updated");
$("#acctAccessed").val($("#acctAccessed option:first").val());
});
try it
Please try this. I have rearrange your code and do some changes.
$('#acctAccessed').change(function(){
var opt = '';
<?php foreach ($data_from_ctr['account'] as $data) :?>
opt += '<option value="'<?php echo $data['idMst'] ?>'">'<?php echo $data['giroOB']; ?>'</option>';
<?php endforeach; ?>;
$('#acctAccessed').html(opt);
$(".chosen-select").trigger("chosen:updated");
});
I have a form that has some text fields and 2 drop-down lists, from the first drop-down list I need to fetch the selected value and store it in a PHP variable so I can use that variable to fetch another set of data into the 2nd drop-down. I do not want to use the submit button.
I have tried using ajax, I am getting the value as chosen in the console, but not able to fetch the same into a PHP variable.
//1st Drop-down
<dl>
<dt>Project ID</dt>
<dd>
<!-- Function to select the dropdown value -->
<script type="text/javascript" src="<?php echo
url_for('/public/js/jquery.js'); ?>"></script>
<script type="text/javascript">
function fetch_select(val)
{
console.log(val);
$.ajax({
type: "POST",
url: "/flat_booking_again/adminsAccess.php",
data: {
get_option:val
}, success: function(response){
console.log(response);
document.getElementById("new_select").innerHTML=response;
//alert(get_option);
}
});
}
</script>
<select name = "project_id" style ="width:150px" onchange="fetch_select(this.value);">
<option>
<?php
$result = find_projects_without_admins();
foreach($result as $row) { ?>
<option value="<?php echo $row['project_id']; ?>" selected="selected"><?php echo $row['project_id']; ?></option>
<?php }?>
</option>
</select>
</dd>
</dl>
<dl>
//I need to use the fetched data from above to populate this drop-down
<dt>Block ID</dt>
<dd>
<select id="new_select" name="block_id" style ="width:150px">
<option>
<?php
echo $_POST['get_option'] . "hellllllllllllo"; //Not able to fetch value
if(isset($_POST['get_option'])){
$projectId = $_POST['get_option'];
$result = find_blocks_without_admins($projectId);
foreach($result as $row) { ?>
<option value="<?php echo $row['block_id']; ?>" selected="selected"><?php echo $row['block_id']; ?></option>
<?php }
}
?>
</option>
</select>
I am really new to PHP and AJAX sp pardon me for any silly mistakes. I know this may sound like a repeated question, but I am stuck with this bug for long, any help is really appreciated. Thanks !
Change your code with this.
<dl>
<dt>Project ID</dt>
<dd>
<!-- Function to select the dropdown value -->
<script type="text/javascript" src="<?php echo url_for('/public/js/jquery.js'); ?>"></script>
<script type="text/javascript">
function fetch_select(val)
{
console.log(val);
$.ajax({
type: "POST",
url: "/flat_booking_again/adminsAccess.php",
data: {
get_option:val
}, success: function(response){
console.log(response);
document.getElementById("new_select").innerHTML=response;
//alert(get_option);
}
});
}
</script>
<select name = "project_id" style ="width:150px" onchange="fetch_select(this.value);">
<option>
<?php
$result = find_projects_without_admins();
foreach($result as $row) { ?>
<option value="<?php echo $row['project_id']; ?>" selected="selected"><?php echo $row['project_id']; ?></option>
<?php }?>
</option>
</select>
</dd>
</dl>
<dl>
//I need to use the fetched data from above to populate this drop-down
<dt>Block ID</dt>
<dd>
<select id="new_select" name="block_id" style ="width:150px"></select>
<?php
//echo $_POST['get_option'] . "hellllllllllllo"; //Not able to fetch value
if(isset($_POST['get_option'])){
$projectId = $_POST['get_option'];
$result = find_blocks_without_admins($projectId);
$html = '';
foreach($result as $row) { ?>
$html.="<option value='".$row['block_id']."' selected='selected'>".$row['block_id']."</option>";
}
echo $html;
}
?>
I have a drop down in PHP. I have some fields from database. Now I have an edit button besides that dropdown in which i want to pass the id the of selected option in dropdown! How can I do this?
<tr>
<td>Base INI File</td>
<td>
<select required name="base_ini_id" id="base_ini_id" class="form-control">
<option value="">Select</option>
<?php foreach($base as $value) { ?>
<option id="emp" class="specialLink" value="<?php echo $value->base_ini_filename;?>"><?php echo $value->base_ini_filename;?></option>
<?php } ?>
</select>
</td>
<?php foreach($customs as $custom) ?>
<td>
<?php echo btn_edit('customer/upload_ini/edit_ini_old/' . $custom->id); ?>
</td>
>
</tr>
Looks like this :
As you can see I have a button in a td besides the dropdown and I want to link that to the id of the selected option from dropdown using AJAX or jQuery. I have no knowledge of AJAX, but due to requirement I have to implement this.
Try this Code. I call sample url from your recruitment. Change as it yours
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<td>
<select required name="base_ini_id" id="base_ini_id" class="form-control">
<option value="">Select</option>
<?php foreach($base as $value) { ?>
<option id="emp" class="specialLink" value="<?php echo $value->id;?>"><?php echo $value->base_ini_filename;?></option>
<?php } ?>
</select>
</td>
<td>
<a id="edit_link" href=""><button>Edit</button> </a>
</td>
<script type="text/javascript">
$(document).ready(function()
{
$('#base_ini_id').change(function() {
var id=$("#base_ini_id").val();
$("#edit_link").attr("href", "customer/user/edit/"+id);
});
});
</script>
I suggest you don't use id because there may be multiple records in table. For your knowledge id is unique, however you can use class for that.
<tr>
<td>Base INI File</td>
<td>
<select required name="base_ini_id" class="form-control base_ini_id">
<option value="">Select</option>
<?php foreach($base as $value) { ?>
<option id="emp" class="specialLink" value="<?php echo $value->base_ini_filename;?>"><?php echo $value->base_ini_filename;?></option>
<?php } ?>
</select>
</td>
<td>
<span onclick="btn_edit(this);">Edit</span>
</td>
</tr>
Use following JavaScript function to get the selected option
<script type="text/javascript">
function btn_edit(control)
{
var selected_option = $(control).parent().prev().find('.base_ini_id').val();
// Use selected option variable to pass data in your php file
$.ajax({
type: "post",
url: "customer/upload_ini/edit_ini_old/"+selected_option ,
cache: false,
success: function(change)
{
// Do here what you want...
}
});
}
</script>
Here parent() funtion returns parent element of $(control) element.
prev() function return previous element of particular element.
find() function finds class, id or element from specified element.
You can get selected option value in selected_option variable
hope you got me !!
UPDATE
Use following code
<tr>
<td>Base INI File</td>
<td>
<select required onchange="option_change(this);" name="base_ini_id" class="form-control base_ini_id">
<option value="">Select</option>
<?php foreach($base as $value) { ?>
<option id="emp" class="specialLink" value="<?php echo $value->base_ini_filename;?>"><?php echo $value->base_ini_filename;?></option>
<?php } ?>
</select>
</td>
<td>
<a href = "" class="edit_link">Edit</span>
</td>
</tr>
<script type="text/javascript">
function option_change(select)
{
var selected_val = $(select).val();
var link = "customer/upload_ini/edit_ini_old/"+selected_option;
$(select).parent().next().find('.edit_link').attr('href', link);
}
</script>
This will update the href attribute of edit anchor after option change. If you click on edit without select option page will refresh only you can manage something as you want there..
// JQuery script
<script>
$(function(){
$('.select-change').click(function(){
????
//what would come here to put textbox's text of con_name_class inside dropdown1 dropdownlist!!
});
});
</script>
Now the PHP and HTML code
<?PHP
connection...blah blah
while($record=sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
$recordx = $record['x'];
$recordy = $record['y'];
$recordz = $record['z'];
}
?>
<input type="text" class="con_name_class" id="<? php somefunction_which_echos_out_a_text ?>" value="<? php
SAMEfunction_which_echos_out_a_text ?>" />
<input class = "select-change" type="button" id="<? php echo $recordx; ?>" value = "<? php echo $recordx; ?>" /><br>
<? PHP
}
function xyz(){ // I am calling it some where!!
connection...blah blah
echo "<select name = "dropdown1" id="dropdown1">";
echo "<option value="NULL">Select one</option>";
while($rec=sqlsrv_fetch_array($stmtxyz, SQLSRV_FETCH_ASSOC)){
echo "<option value='".$rec['con_code']."')>".$rec['con_name']."</option>";
}
</select>
}
?>
How can I map the textbox's text into the dropdown1 and select it?
You may something like
$(function() {
$("#textboxID").on("change",function(){
$("#selectBoxID").val($(this).val());
//Set the option from dropdown list by textbox's value
})
});
Here's the plunker
Cheers!
I am modifyng NLN's code.You can give a specific part in name like "textbox_"
<input type="text" class="con_name_class" id="textbox_<? php somefunction_which_echos_out_a_text ?>" value="<? php SAMEfunction_which_echos_out_a_text ?>" />
Then use this script
$(function() {
$(input[id^="textbox_"]).on("change",function(){
$("#selectBoxID").val($(this).val());
//Set the option from dropdown list by textbox's value
})
});
I did it with javascript function..not jquery..because of my ID problem for the textbox. Call the below function at onClick of the textbox and pass parameters.Thanks!
Here-
function xyz(par){
var dd1= document.getElementbyId('dropdown1');
var opts = dd1.options.length;
for (var i =0; i<opts; i++){
if(document.getElementbyId('dropdown1').options[i].value == par){
getElementbyId('dropdown1').selectedIndex = i;
break;
}
}
}