<div id="minus_vacancies">
<h4>Mínimo de vagas</h4>
<div>
<input type="button" id="decrease_btn" name="decrease_btn" value="-" onclick="subtractVacancies(this)">
</div>
<div>
<input id="vacancies_qtt" type="text" name="vacancies_qtt" value="0" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
</div>
<div>
<input type="button" id="increase_btn" name="increase_btn" value="+" onclick="addVacancies(this)">
</div>
</div>
Hey! I am making a Decrement/Increment buttons with the value on the middle. The buttons work fine but I can´t see the number. Its not displaying the value="0" of the vacancies_qtt
Why?
Thanks in advance
A possible solution for addVacancies() and subtractVacancies():
function addVacancies(){
let num = document.getElementById("vacancies_qtt");
num.value++;
}
function subtractVacancies(){
let num = document.getElementById("vacancies_qtt");
num.value--;
}
function addVacancies() {
cur = parseInt($("#vacancies_qtt").val())+1;
$("#vacancies_qtt").val(cur);
}
function subtractVacancies() {
cur = parseInt($("#vacancies_qtt").val())-1;
$("#vacancies_qtt").val(cur);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="minus_vacancies">
<h4>Mínimo de vagas</h4>
<div>
<input type="button" id="decrease_btn" name="decrease_btn" value="-" onclick="subtractVacancies(this)">
</div>
<div>
<input id="vacancies_qtt" type="text" name="vacancies_qtt" value="0" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
</div>
<div>
<input type="button" id="increase_btn" name="increase_btn" value="+" onclick="addVacancies(this)">
</div>
</div>
Try this out
Related
I'm not sure if I worded the title correctly to describe my issue.
I am constructing a custom phone number 'field' within a form on my website, which is actually composed of 10 individual fields (digits), all grouped within a particular div (Id=numberContainer).
Currently, I am using some script to force the cursor to start at the first field (Id=userPhone_digit-01), no matter which field within the group the user clicks on.
The code also advances the cursor to the next 'digit' after data is entered into each field.
The code seems to work fine for all of that so far.
However, I would like to expand or modify the code, to have the cursor also start on the first field (Id=userPhone_digit-01) when the user clicks anywhere at all within the entire div (Id=numberContainer) or any elements within the div.
I have experimented with several 'tweaks', including some 'onfocus' things. But so far, I can't seem to get anything to work.
I have included a very stripped down version of the form, containing only the 'phone number' field(s).
I also left the link to the CSS in the 'head' section'.
I left out my failed attempts at tweaking the code and left in only what is currently working.
If anyone has any suggestions, it would be greatly appreciated.
Thanks, Maddison
HTML
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.jamiesexton.com/css/forcefield3.css">
</head>
<body>
<div class="pageContainer">
<div class="blankSpace"></div>
<div class="formContainer">
<form id="requestForm" action="/formHandler.php" method="post" enctype="multipart/form-data">
<div class="center_Wrapper">
<div class="formHeader">- THE FORM -</div>
</div>
<div class="phoneNumber_Container">
<div class="left_Wrapper">
<div class="section_Header">Phone Number</div>
<button class="phoneReset_button" title="Reset"><img src="/images/refreshbutton.png"
width="20px" height="20px"></button>
</div>
<!-- //////////////////// Start 'numberContainer' Div //////////////////// -->
<div Id="numberContainer" class="phoneField_Wrapper">
<div class="leftSpace"><img
src="https://www.jamiesexton.com/images/smallflag.jpg" width="40px"
height="24px"></div>
<p class="plusOne">+1</p>
<p class="phoneNumber_Parentheses_Left">(</p>
<input type="number" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField"
minlength="1" maxlength="1" tabindex="2" required>
<input type="number" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField"
minlength="1" maxlength="1" tabindex="3" required>
<input type="number" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField"
minlength="1" maxlength="1" tabindex="4" required>
<p class="phoneNumber_Parentheses_Right">)</p>
<input type="number" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField4"
minlength="1" maxlength="1" tabindex="5" required>
<input type="number" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField"
minlength="1" maxlength="1" tabindex="6" required>
<input type="number" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField"
minlength="1" maxlength="1" tabindex="7" required>
<p class="phoneNumber_Dash">-</p>
<input type="number" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField"
minlength="1" maxlength="1" tabindex="8" required>
<input type="number" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField"
minlength="1" maxlength="1" tabindex="9" required>
<input type="number" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField"
minlength="1" maxlength="1" tabindex="10" required>
<input type="number" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField"
minlength="1" maxlength="1" tabindex="11" required>
<div class="rightSpace"></div>
</div>
<!-- //////////////////// End 'numberContainer' Div //////////////////// -->
</div>
<!-- Start Force-Field/Next-Field Script -->
<script>
const
forceField = document.querySelector('#requestForm')
, f_nums = [...forceField.querySelectorAll('#numberContainer input')]
;
forceField.oninput = e =>
{
if ( e.target.matches('#numberContainer input[maxlength="1"]')
&& e.target.value.length===1
){
let nextOneIndx = f_nums.findIndex(el=>el===e.target) +1;
if (nextOneIndx < f_nums.length)
{
f_nums[nextOneIndx].focus();
}
else
{
let nextTab = +e.target.getAttribute('tabindex') +1;
forceField.querySelector(`[tabindex="${nextTab}"]`).focus();
}
}
}
forceField.onclick = e =>
{
if ( e.target.matches('#numberContainer input[maxlength="1"]')
&& e.target.value.length===0
){
let freeOne = f_nums.find(el=>el.value===''); // find 1st input free
if (freeOne) freeOne.focus()
}
}
</script>
<!-- End Force-Field/Next-Field Script -->
<!-- Start Clear-Number-Fields Script -->
<script>
let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('.phoneField,.phoneField4');
btnClear.addEventListener('click', () => {
inputs.forEach(input => input.value = '');
});
</script>
<!-- End Clear-Number-Fields Script -->
<div class="submitButton_Container">
<div class="center_Wrapper" ><input type="submit" class="submit__button" value="Submit"></div>
</div>
</form>
</div>
</div>
</body>
</html>
Query the numberContainer so you add an onclick event listener. Then onclick get the closest numberContainer, just in case event target is a child of the numberContainer element, we can then query the first input element using the number container element like this e.target.closest('#numberContainer').querySelector('#userPhone_digit-01')
Then any time the user clicks anywhere on the number container element, the first input will focus.
const numCont = document.getElementById('numberContainer')
numCont.onclick = e => e.target.closest('#numberContainer').querySelector('#userPhone_digit-01').focus()
const forceField = document.querySelector('#requestForm'),
f_nums = [...forceField.querySelectorAll('#numberContainer input')];
const numCont = document.getElementById('numberContainer')
numCont.onclick = e => e.target.closest('#numberContainer').querySelector('#userPhone_digit-01').focus()
forceField.oninput = e => {
if (e.target.matches('#numberContainer input[maxlength="1"]') &&
e.target.value.length === 1
) {
let nextOneIndx = f_nums.findIndex(el => el === e.target) + 1;
if (nextOneIndx < f_nums.length) {
f_nums[nextOneIndx].focus();
} else {
let nextTab = +e.target.getAttribute('tabindex') + 1;
forceField.querySelector(`[tabindex="${nextTab}"]`).focus();
}
}
}
forceField.onclick = e => {
if (e.target.matches('#numberContainer input[maxlength="1"]') &&
e.target.value.length === 0
) {
let freeOne = f_nums.find(el => el.value === ''); // find 1st input free
if (freeOne) freeOne.focus()
}
}
let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('.phoneField,.phoneField4');
btnClear.addEventListener('click', () => {
inputs.forEach(input => input.value = '');
});
<link rel="stylesheet" href="https://www.jamiesexton.com/css/forcefield3.css">
<div class="pageContainer">
<div class="blankSpace"></div>
<div class="formContainer">
<form id="requestForm" action="/formHandler.php" method="post" enctype="multipart/form-data">
<div class="center_Wrapper">
<div class="formHeader">- THE FORM -</div>
</div>
<div class="phoneNumber_Container">
<div class="left_Wrapper">
<div class="section_Header">Phone Number</div>
<button class="phoneReset_button" title="Reset"><img src="/images/refreshbutton.png"
width="20px" height="20px"></button>
</div>
<!-- //////////////////// Start 'numberContainer' Div //////////////////// -->
<div id="numberContainer" class="phoneField_Wrapper">
<div class="leftSpace"><img src="https://www.jamiesexton.com/images/smallflag.jpg" width="40px" height="24px"></div>
<p class="plusOne">+1</p>
<p class="phoneNumber_Parentheses_Left">(</p>
<input type="number" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" minlength="1" maxlength="1" tabindex="2" required>
<input type="number" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" minlength="1" maxlength="1" tabindex="3" required>
<input type="number" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" minlength="1" maxlength="1" tabindex="4" required>
<p class="phoneNumber_Parentheses_Right">)</p>
<input type="number" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField4" minlength="1" maxlength="1" tabindex="5" required>
<input type="number" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" minlength="1" maxlength="1" tabindex="6" required>
<input type="number" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" minlength="1" maxlength="1" tabindex="7" required>
<p class="phoneNumber_Dash">-</p>
<input type="number" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" minlength="1" maxlength="1" tabindex="8" required>
<input type="number" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" minlength="1" maxlength="1" tabindex="9" required>
<input type="number" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" minlength="1" maxlength="1" tabindex="10" required>
<input type="number" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" minlength="1" maxlength="1" tabindex="11" required>
<div class="rightSpace"></div>
</div>
<!-- //////////////////// End 'numberContainer' Div //////////////////// -->
</div>
<div class="submitButton_Container">
<div class="center_Wrapper"><input type="submit" class="submit__button" value="Submit"></div>
</div>
</form>
</div>
</div>
So I was trying to build this tool to give each player a role in a Video game. And thats working and all but I now want to get the editable player name in blank input next to the assigned role. This must not be an input but I tought that it could work but i literally have no idea how to do this. In any way. So where do I start guys ?
const otherList = [
`Midlane`,
`Jungle`,
`Support`,
`ADC`,
`Toplane`,
];
$('form').on('submit', function(e) {
e.preventDefault();
const names = [...document.querySelectorAll('input:not(.name2)')].map(x => x.value);
const tasks = shuffleArray(otherList);
$('output').html(
names.map((n, idx) => `${n} => ${tasks[idx]}`).join('<br />')
);
});
function shuffleArray(inputArray) {
const array = [...inputArray];
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
var test = Array("Test1","Test2","Test3","Test4","Test5");
function randomTest() {
var randomTest = test[Math.floor(Math.random() * test.length)];
document.getElementById('randomTest').value = randomTest;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input id="n1" type="text" class="name" placeholder="Name 1" required="" value="Player 1"> <br>
<input type="text" class="name" placeholder="Name 2" required="" value="Player 2"> <br>
<input type="text" class="name" placeholder="Name 3" required="" value="PLayer 3"> <br>
<input type="text" class="name" placeholder="Name 4" required="" value="Player 4"> <br>
<input type="text" class="name" placeholder="Name 5" required="" value="Player 5"> <br>
<br>
<button class="button button2" type="submit">Assign role</button>
<br><br>
</form>
<output></output>
<div>
<br><br>
Toplane
<br><br>
<input class="name2" name="randomTest" id="randomTest">
<br><br>
Midlane
<br><br>
<input class="name2" name="randomTest" id="randomTest">
<br><br>
Jungle
<br><br>
<input class="name2" name="randomTest" id="randomTest">
<br><br>
Adc
<br><br>
<input class="name2" name="randomTest" id="randomTest">
<br><br>
Support
<br><br>
<input class="name2" name="randomTest" id="randomTest">
<br><br>
</div>
You could try: editablecontent:
<form onsubmit='return editinput()'>
<div id="editableplayer" contenteditable="true">player name</div>
<input id="geteditablecontent" hidden>
</form>
Than js
function editinput(){
document.getElementById("geteditablecontent").value = document.getElementById("editableplayer").innerText;
return true;
}
I've got this:
var strBox = document.getElementById("txtSTR");
var strModBox = document.getElementById("txtSTRMod");
var refBox = document.getElementById("txtREF");
var refModBox = document.getElementById("txtREFMod");
var fortBox = document.getElementById("txtFOR");
var forModBox = document.getElementById("txtFORMod");
var intBox = document.getElementById("txtINT");
var intModBox = document.getElementById("txtINTMod");
These vars all point to text boxes (read only) in my HTML document.
They rely on populating their .value with the following array:
//0-STR, 1-REF, 2-FOR, 3-INT, 4-JUD, 5-CHA, 6-WIL, 7-TOU
var charAttsAR = ["8","8","8","8","8","8","8","8"];
They are populated with the relevant array entry manually from a function called popDefDat() like this:
strBox.value = charAttsAR[0];
strModBox.value = modSetter(charAttsAR[0]);
refBox.value = charAttsAR[1];
refModBox.value = modSetter(charAttsAR[1]);
fortBox.value = charAttsAR[2];
forModBox.value = modSetter(charAttsAR[2]);
intBox.value = charAttsAR[3];
intModBox.value = modSetter(charAttsAR[3]);
....and so on
My issue is that strBox, strModBox, refBox and refModBox all initialise their data fine. However, at fortBox, it throws "fortBox is null" and I have no idea why. The code is identical, I have my script loaded just before the end of my tag and I also have:
//initialise default data when page loads
window.onload = popDefDat()
Honestly, I'm stuck. Any advice appreciated.
Here's the html too:
<form id="form3" name="form3" method="post" onsubmit="return false" action="">
<p><label></label>
<label for="lblHeadATT"></label>
<input name="lblHeadATT" type="text" disabled="disabled" id="lblHeadATT" value="Points" readonly="readonly" />
<label for="lbHeadMOD"></label>
<input name="lbHeadMOD" type="text" disabled="disabled" id="lbHeadMOD" value="Mod" readonly="readonly" />
<label for="txtPointBuy"></label>
<input name="txtPointBuy" type="text" id="txtPointBuy" readonly="readonly" />
<p>Strength:
<label for="txtSTR"></label>
<input name="txtSTR" type="text" id="txtSTR" readonly="readonly" />
<label for="txtSTRMod"></label>
<input name="txtSTRMod" type="text" id="txtSTRMod" readonly="readonly" />
<input type="button" name="Btn_StrMinus" id="Btn_StrMinus" value="-" onclick="FNCstrSub()" />
<input type="button" name="Btn_StrPlus" id="Btn_StrPlus" value="+" onclick="FNCstrPlus()"/>
<p>Reflex:
<label for="txtREF"></label>
<input name="txtREF" type="text" id="txtREF" readonly="readonly" />
<label for="txtREFMod"></label>
<input name="txtREFMod" type="text" id="txtREFMod" readonly="readonly" />
<input type="button" name="Btn_RefMinus" id="Btn_RefMinus" value="-" onclick="FNCrefSub()" />
<input type="button" name="Btn_RefPlus" id="Btn_RefPlus" value="+" onclick="FNCrefPlus()"/>
<p>Fortitude:
<label for="txtREF"></label>
<input name="txtFOR" type="text" id="txtREF" readonly="readonly" />
<label for="txtFORMod"></label>
<input name="txtFORMod" type="text" id="txtFORMod" readonly="readonly" />
<input type="button" name="Btn_ForMinus" id="Btn_ForMinus" value="-" onclick="FNCforSub()" />
<input type="button" name="Btn_ForPlus" id="Btn_ForPlus" value="+" onclick="FNCforPlus()"/>
</p>
<p>Intellect:
<label for="txtINT"></label>
<input name="txtINT" type="text" id="txtINT" readonly="readonly" />
<label for="txtINTMod"></label>
<input name="txtINTMod" type="text" id="txtINTMod" readonly="readonly" />
<input type="submit" name="Btn_IntMinus" id="Btn_IntMinus" value="-" onclick="FNCintSub()"/>
<input type="submit" name="Btn_IntPlus" id="Btn_IntPlus" value="+"onclick="FNCintPlus()" />
I've yet to write the tags for the other text boxes and buttons as I was hoping to solve this before carrying on.
Thanks
I have a form like this one below, which contains steps and each steps contains multiple courses.
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name">
<input type="text" class="si-step-input" name="step-id">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name">
<input type="text" class="si-step-input" name="course-id">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>
How do i append these properly when i click on the "Add step" and "Add course" buttons ?
i need to add them in this format
targetCourse: [{
step-name:
step-id:
course: [{
course-name:
course-id:
}]
}]
You can extract all steps using querySelectorAll. Then, iterate through all steps in this collection and gather name, id and courses using querySelector.
Array.prototype.map will make iteration easier.
var stepElements = document.querySelectorAll('.si-steps');
var result = [].map.call(stepElements, function(stepElement) {
var courseElements = stepElement.querySelectorAll('.si-courses');
var coursesInfo = [].map.call(courseElements, function(courseElement) {
return {
'course-name': courseElement.querySelector("[name='course-name']").value,
'course-id': courseElement.querySelector("[name='course-id']").value
};
});
return {
'step-name': stepElement.querySelector("[name='step-name']").value,
'step-id': stepElement.querySelector("[name='step-id']").value,
'course': coursesInfo
};
});
document.getElementById('result').innerText = JSON.stringify(result, null, 4);
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name" value="step1">
<input type="text" class="si-step-input" name="step-id" value="1">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name" value="course1">
<input type="text" class="si-step-input" name="course-id" id="c1">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name" value="step2">
<input type="text" class="si-step-input" name="step-id" value="2">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name" value="course3">
<input type="text" class="si-step-input" name="course-id" id="c3">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>
<div>
<pre id="result">
</pre>
</div>
Note that Add course and Add step buttons are not implemented. Scroll down the snippet to see result.
I created a filterable drop Down List using JavaScript. This is the List Box Coding.
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" style="display:none;" >
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>
I created 4 Text Field and a arrow character. If i click the arrow character , I'll show the list at the bottom of the control.
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
In the display List function I'm getting the corresponded textbox position and displayed the List Control under the Text Box. Okie. Now my problem is If i select any option in the text box, I need to display the selected value to the textbox which the listbox shown under. After selecting the value from the list box, How i find in which text box showing the List ? Dynamically how can i find the text box id ?
This is my JS code for displaying the Listbox to the corresponding TextBox.
function displayList(ele,txt)
{
vis=document.getElementById(ele);
obj=document.getElementById(txt);
if (vis.style.display==="none")
vis.style.display="block";
else
vis.style.display="none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
Note : I can call this function at the click event of arrow button. I can easily pass the text Field Id. But in the case ListBox action i can't send the particular ID of the Text Field.
If you have no opposition to using jquery you can using the jquery UI built-in autocomplete which will do pretty much what you're looking for. For more advanced and nicer plugins you can try chosen
Try this.
<script>
var targetInput=null;
function displayList(ele,txt) {
vis=document.getElementById(ele);
obj=document.getElementById(txt);
targetInput = obj;
if (vis.style.display==="none") {
vis.style.display = "block";
} else {
vis.style.display = "none";
vis.style.position = "absolute";
//alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);
vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
vis.style.left = getElementPosition(txt).left;
}
}
function selectList(txt) {
if (!targetInput) return;
targetInput.value = txt.value;
txt.style.display = 'none';
}
</script>
<div id="div_name" style="float:left;z-index: 20;">
<input name="t1" type="text" id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
<input type="button" class="rightselect" onclick="displayList('d1','t1');" value="▼" />
</div>
<div class="inputbox">
<input name="t2" class="inputbox" type="text" id="t2" onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
<input type="button" class="leftselect" onclick="displayList('d1','t2');" value="▼" />
</div>
<div style="float:left;text-align:center;" >
<input name="t3" type="text" id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
<input type="button" class="rightselect" onclick="displayList('d1','t3');" value="▼" />
</div>
<div class="inputbox">
<input name="t4" class="inputbox" type="text" id="t4" onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
<input type="button" class="leftselect" onclick="displayList('d1','t4');" value="▼" />
</div>
<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" onclick="selectList(this)" style="display:none;">
<option>axcsus-COMMON STOCK</option>
<option>aces</option>
<option>bdfs</option>
<option>befs</option>
<option>behs</option>
<option>dfgh</option>
<option>dhes</option>
<option>dwww</option>
<option>pass</option>
<option>pass</option>
</select>