get a item ID by its child (vanilla JS) - javascript

I want to check if a form has an option CAD (in 7th level), if it has, then get the form id.
// first level
<form id="15" method="post" action="/open a new page" target="_blank">
//second level- 1
<div>
<input type="hidden" id="CHECK" name="CHECK">
</div>
//secode leve - 2
<table cellpadding="0" cellspacing="0" border="0" width="100%">
// 3rd level
<tbody>
//4th level
<tr>
// 5th level
<td>
<input type="hidden" name="name" value="Frank">
<input type="hidden" name="identifier" value="12345">
<input type="hidden" name="code" value="299 ">
<input type="hidden" name="type" value="060201">
<input type="hidden" name="claim" value="4567">
<input type="hidden" name="departement" value="IT">
<input type="hidden" name="city" value="S25">
<input type="hidden" name="num" value="28936">
<input type="hidden" name="typeClient" value="2">
<input type="hidden" name="numTel" value="4444">
<input type="hidden" name="prod" value="MMM">
<input type="hidden" name="label" value="doc">
//6th level
<select name="docToSeize" style="width:150px" class="form1">
// 7th levle
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</td>
<td valign="top">
<input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
</td>
</tr>
</tbody>
</table>
</form>


You can use the function querySelectorAll to get the options and the function closest to find the parent form.
Array.prototype.forEach.call(document.querySelectorAll('[name="docToSeize"] option'), function(opt) {
if (opt.textContent.trim() === 'CAD') {
console.log(opt.closest('form').getAttribute('id'));
return;
}
});
form {
display: none
}
<form id="15" method="post" action="/open a new page" target="_blank">
//second level- 1
<div>
<input type="hidden" id="CHECK" name="CHECK">
</div>
//secode leve - 2
<table cellpadding="0" cellspacing="0" border="0" width="100%">
// 3rd level
<tbody>
//4th level
<tr>
// 5th level
<td>
<input type="hidden" name="name" value="Frank">
<input type="hidden" name="identifier" value="12345">
<input type="hidden" name="code" value="299 ">
<input type="hidden" name="type" value="060201">
<input type="hidden" name="claim" value="4567">
<input type="hidden" name="departement" value="IT">
<input type="hidden" name="city" value="S25">
<input type="hidden" name="num" value="28936">
<input type="hidden" name="typeClient" value="2">
<input type="hidden" name="numTel" value="4444">
<input type="hidden" name="prod" value="MMM">
<input type="hidden" name="label" value="doc"> //6th level
<select name="docToSeize" style="width:150px" class="form1">
// 7th levle
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</td>
<td valign="top">
<input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
</td>
</tr>
</tbody>
</table>
</form>


Select the form, then select the options inside it and iterate over them.
const form = document.querySelector('form');
const options = [...form.querySelector('select[name=docToSeize]').children];
if (options.some(option => option.textContent.trim() === 'CAD')) console.log(form.id);
<form id="15" method="post" action="/open a new page" target="_blank">
<select name="docToSeize" style="width:150px" class="form1">
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</form>

Related

How to find the every td input and its respective id, value by the name

From the following code I have to find the following details
Find the first td
Find the f01 name id and its value e.g apex_date_01_00,null
Find the f30 name id and its value e.g id30_14,2
And this should be repeat for the all the tds which headers="ATTR_VALUE"
Code
<html>
<body>
<table summary="Attribute Details">
<tr>
<td headers="ATTR_VALUE"> <input type="hidden" name="f24" value="" id="id24_14"><span style="white-space: nowrap;"> <input type="text" style="width:100px" id="apex_date_01_00" name="f01" maxlength="11" size="20" value="" autocomplete="off" class="hasDatepicker"> </span> <input type="hidden" name="f06" value="424349"> <input type="hidden" name="f07" value="296069"> <input type="hidden" name="f08" value="LV FEEDERWAY 01 DETAILS"> <input type="hidden" name="f09" value="REPLACED DATE - PHASE L1"> <input type="hidden" name="f10" value="D_ATTRIBUTE7"> <input type="hidden" name="f15" value="U"> <input type="hidden" name="f30" value="2" id="id30_14"> </td>
</tr>
<tr>
<td headers="ATTR_VALUE"> <input type="hidden" name="f24" value="" id="id24_17"><span style="white-space: nowrap;"> <input type="text" style="width: 100px;" id="apex_date_01_03" name="f01" maxlength="11" size="20" value="" autocomplete="off" class="hasDatepicker"></span> <input type="hidden" name="f06" value="424349"> <input type="hidden" name="f07" value="296069"> <input type="hidden" name="f08" value="LV FEEDERWAY 01 DETAILS"> <input type="hidden" name="f09" value="REPLACED DATE - PHASE L2"> <input type="hidden" name="f10" value="D_ATTRIBUTE8"> <input type="hidden" name="f15" value="U"> <input type="hidden" name="f30" value="2" id="id30_17"> </td>
</tr>
<tr>
<td headers="ATTR_VALUE"> <input type="hidden" name="f24" value="" id="id24_20"><span style="white-space: nowrap;"> <input type="text" style="width:100px" id="apex_date_01_06" name="f01" maxlength="11" size="20" value="" autocomplete="off" class="hasDatepicker"></span> <input type="hidden" name="f06" value="424349"> <input type="hidden" name="f07" value="296069"> <input type="hidden" name="f08" value="LV FEEDERWAY 01 DETAILS"> <input type="hidden" name="f09" value="REPLACED DATE - PHASE L3"> <input type="hidden" name="f10" value="D_ATTRIBUTE9"> <input type="hidden" name="f15" value="U"> <input type="hidden" name="f30" value="1" id="id30_20"> </td>
</tr>
</table>
</body>
</html>

You need to loop over each td with headers 'ATTR_VALUE'
$('td[headers="ATTR_VALUE"]').each(function(){
//find input with name=f01
var f01id = $(this).find('input[name="f01"]').attr('id');
var f01value = $(this).find('input[name="f01"]').val();
//find input with name=f30
var f30id = $(this).find('input[name="f30"]').attr('id');
var f30value = $(this).find('input[name="f30"]').val();
});

Try this code
$('td[headers="ATTR_VALUE"]').each(function(){
$('input').each(function(){
if($(this).attr('name')=="f01" || $(this).attr('name')=="f30"){
alert($(this).attr('id')+','+$(this).val());
}
})
})

Find first td element:
document.querySelector('td')
find All 'td' of table:
var arr = document.querySelectorAll('td')
$.each(arr,function(i,data){
var f01id = $(this).find('input[name="f01"]').attr('id');
var f01value = $(this).find('input[name="f01"]').val();
//find input with name=f30
var f30id = $(this).find('input[name="f30"]').attr('id');
var f30value = $(this).find('input[name="f30"]').val();
console.log(f01id)
console.log(f01value)
console.log(f30id)
console.log(f30value)
})

Styling Dynamic Rows - Fluid

I have a small set of rows for a program i'm creating. Im trying to create a set of fields that a user can fill in, some time we need more rows than one so i created a javascript dynamically add row set.
I'm trying to style the fields for a fluid layout (between a pc and tablet). Im having difficulty getting them to work with both layout sizes. Secondly if i try to add headings (of some description) to the rows i can never get them to line up at all.
Any Suggestions? I have a link to some of my code here --> https://jsfiddle.net/c92qvuxe/
<div id="materials">
<!-- Start of Table -->
<form name="Add_Units" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="row">
<input name="Page_0" type="text" value=""/>
<input name="Weight_0" type="text" value=""/>
<select name="Finish_0">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_0" type="text" value=""/>
<input name="Grain_0" type="text" value=""/>
<select name="Size_0">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
</select>
<input name="Supplier_0" type="text" value=""/>
<input name="Stock_0" type="checkbox" value="1"/>
<input name="SheetQty_0" type="text" value=""/>
</div>
<div id="newrow" style="display: none;">
<input name="Page_" type="text" value="" size="5" maxlength="55" />
<input name="Weight_" type="text" value="" size="10" maxlength="55" />
<select name="Finish_">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_" type="text" value="" size="10" maxlength="55" />
<input name="Grain_" type="text" value="" size="10" maxlength="55" />
<select name="Size_">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
<input name="Supplier_" type="text" value="" size="10" maxlength="55" />
<input name="Stock_" type="checkbox" value="1" size="10" />
<input name="SheetQty_" type="text" value="" size="10" maxlength="55" />
</div>
<p>
<input type="button" id="add_row()" onclick="add_row()" value="Add Row" />
<!--<input type="submit" name="Add_Unit" value="Save Units" />-->
</p>
<p> </p>
</fieldset>
</form>
<br />

Search table with select2 dropdowns in one column

I am creating a table with one column consisting of select2 dropdowns. Refer fig below :
HTML code looks like this :
<table class="table table-hover table-borderless" id="tabpro">
<tbody class="list">
<tr class="t-row">
<td class="name" style="width: 370px;padding-left:50px;">
<h5>BR-2C-4567</h5>
</td>
<td class="driver-name">
<form class="edit_truck" id="edit_truck_1" action="/trucker/trucks/1/update_driver.1" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="c113UiPfI8Jk72/iivm9qJhIys8udhgaynEJUaMHjkTqpZIm+9R1VYbe1QN5+0jrGReMOb2E9w75fsvI37Mh/w==" />
<span class="select2box">
<select class="select-example" name="truck[driver_id]" id="truck_driver_id">
<option value="">No drivers selected</option>
<option value="1">Shubham</option>
<option selected="selected" value="2">XYZ</option>
</select>
</span>
<input type="submit" name="commit" value="Update Driver" class="btn btn-default" />
</form>
</td>
</tr>
<tr class="t-row">
<td class="name" style="width: 370px;padding-left:50px;">
<h5>sasadga</h5>
</td>
<td class="driver-name">
<form class="edit_truck" id="edit_truck_2" action="/trucker/trucks/2/update_driver.2" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="yy8hpB+cBT2bcyyYBn+ZmLHUT+nBVGg0QPwytmtZ8QVS18TQx5dTqnlClnn1fWzbMIsJH1KmhyBz8/AvF+1evg==" />
<span class="select2box">
<select class="select-example" name="truck[driver_id]" id="truck_driver_id">
<option value="">No drivers selected</option>
<option selected="selected" value="1">Shubham</option>
<option value="2">XYZ</option>
</select>
</span>
<input type="submit" name="commit" value="Update Driver" class="btn btn-default" />
</form>
</td>
</tr>
....
</table>
I'm able to search Vehicles using listjs plugin. But how to search drivers ?
I tried using this code but it doesn't work.(I'm javascript, jQuery beginner).
$('.searchDriver').keyup(function(){
var srchTerm = $(this).val(),
rows = $('tbody.list').find('tr'),
opt = $('.select2box').find('select option:selected');
if (srchTerm.length > 0) {
rows.stop().hide();
if($('.select2box').find('select option:selected').text().indexOf('x') == -1){
opt.closest('tr').stop().show();
}
}else {
rows.stop().show();
}
});
Please share a working example/ guide me to accomplish this task.

What's the issue in getting the values from dynamically appended table row fields in post array after submitting the form?

I've an HTML form. This form is containing HTML table. The actual HTML table is very large. For your reference I'm showing below the HTML code of a form with table containing only two rows:
<form action="rebates.php" role="form" method="post">
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer </label>
<div class="col-lg-7">
<select id="company_name" name="company_name" class="form-control">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<label for="product_id" class="col-lg-3">Product </label>
<div class="col-lg-7">
<select id="product_id" name="product_id" class="form-control">
<option value="" selected='selected'>Select Product</option>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
</select>
</div>
</div>
</div>
</div>
<br/>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
<button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
<br/>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle" >Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody>
<tr id="Row2">
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td>
<input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
</td>
</tr>
<tr>
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
</tr>
</tbody>
</table>
<button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
I'm dynamically appending rows to the table by clicking on a button(the button is present in a tag, you can see in above code). The various JQuery code snippets I tried for adding rows dynamically are as follows. All are working:
/*JQuery for appending rows at the end of table*/
<script language="javascript">
$( document ).ready(function() {
$('.btnAdd').click(function () {
var count = 1,
first_row = $('#Row2');
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
while (count-- > 0) first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
//while (count-- > 0) $('#blacklistgrid > tbody:last').append(first_row.clone().removeAttr('id'));
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid').attr('id','Row' + $('#blacklistgrid tr').length);
});
});
</script>
From above code snippets you can suggest me the most optimum one. Now the issue I'm facing is if I append one or more rows at the end of table, fill data in the textfields of each appended row and submit the form by clicking on Submit button, in $_POST on rebates.php I'm not getting the data from appended rows. I'm getting the data only from the rows which are previously present when the page loads. So can anyone help me in getting the values from the dynamically appended rows also? Thanks for spending some of your valuable time in understanding my issue. Waiting for your precious replies. Still, if you need any further information regarding the question I can provide you the same.
I'm using following jQuery libraries:
<script src="http://localhost/smart-rebate-web/web/js/libs/jquery-1.9.1.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/libs/jquery-ui-1.10.0.custom.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/libs/bootstrap.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/plugins/validate/jquery.validate.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/Application.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/demo/validation.js"></script>

Here is what i tested and works fine:
the .html file :
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var first_row = $('#Row2').clone();
$('.btnAdd').click(function () {
var count = 1;
first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
});
});
</script>
</head>
<body>
<form action="formdata.php" role="form" method="post">
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer </label>
<div class="col-lg-7">
<select id="company_name" name="company_name" class="form-control">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<label for="product_id" class="col-lg-3">Product </label>
<div class="col-lg-7">
<select id="product_id" name="product_id" class="form-control">
<option value="" selected='selected'>Select Product</option>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
</select>
</div>
</div>
</div>
</div>
<br/>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
<button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
<br/>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle" >Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody>
<tr id="Row2">
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td>
<input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
</td>
</tr>
<tr>
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
</tr>
</tbody>
</table>
<button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
</body>
</html>
formdata.php
<?php
print_r($_POST);
?>
Sample data returned :
Array
(
[company_name] =>
[product_id] => 5
[pack] => Array
(
[0] => a
[1] => b
[2] => c
[3] => d
)
[quantity] => Array
(
[0] => 2
[1] => 4
[2] => 2
[3] => 2
)
[volume] => Array
(
[0] => 750
[1] => 750
[2] => 750
[3] => 750
)
[units] => Array
(
[0] => 7
[1] => 5
[2] => 7
[3] => 7
)
[amount] => Array
(
[0] => 3.00
[1] => 7.00
[2] => 3.00
[3] => 3.00
)
)
As you can see, it adds all the informations you are appending with jQuery

Forced selection in hidden / Backend using Javascript OR JQuery

I have regular form like this.
<form action="/domainchecker.php" method="post">
<input type="text" name="domain" size="20">
<fieldset>
<select name="ext">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.us</option>
<option>.info</option>
<option>.biz</option>
<option>.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>
<input type="submit" value="Go">
</form>
This selectbox enables to select only one option.
What I want is Forced selection in hidden / backend for the first 5 options regardless user select it or not.
How can I achieve this using JavaScript OR JQuery ?
Thanks.

Since you are using PHP you can try this:
<form action="/domainchecker.php" method="post">
<input type="hidden" name="ext[]" value=".com">
<input type="hidden" name="ext[]" value=".net">
<input type="hidden" name="ext[]" value=".org">
<input type="hidden" name="ext[]" value=".us">
<input type="hidden" name="ext[]" value=".info">
<input type="text" name="domain" size="20">
<fieldset>
<select name="ext[]">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.us</option>
<option>.info</option>
<option>.biz</option>
<option>.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>
<input type="submit" value="Go">
</form>
Note the brackets in the fields' names. In your PHP script you'll need something like:
$extensions = $_POST['ext'];
foreach ($extensions as $ext) {
#do something
}
Note that the $extensions array will contain duplicates if the user selected one of the first 5 entries in the dropdown.
You can also use checkboxes instead of a dropdown like this:
<form action="/domainchecker.php" method="post">
<input type="text" name="domain" size="20">
<fieldset>
<input type="checkbox" name="ext[]" value=".com" selected="true">
<input type="checkbox" name="ext[]" value=".net" selected="true">
<input type="checkbox" name="ext[]" value=".org" selected="true">
<input type="checkbox" name="ext[]" value=".us" selected="true">
<input type="checkbox" name="ext[]" value=".info" selected="true">
<input type="checkbox" name="ext[]" value=".biz">
<input type="checkbox" name="ext[]" value=".mobi">
<input type="checkbox" name="ext[]" value=".name">
<input type="checkbox" name="ext[]" value=".tv">
<input type="checkbox" name="ext[]" value=".me">
</select>
</fieldset>
<input type="submit" value="Go">
</form>
The PHP is the same, without the duplicate issue

Add them server-side.

you can't do multiple selection on your select if attribute multiple is not set
like this, then have default selection by setting the option's attribute selected="selected"
<fieldset>
<select name="ext" size="5" multiple="multiple" >
<option>.com</option>
<option>.net</option>
<option selected="selected">.org</option>
<option selected="selected">.us</option>
<option selected="selected">.info</option>
<option>.biz</option>
<option selected="selected">.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>

Categories