Hi, i want to use search by id and search by date
<select id="menu">
<option value="<?=site_url('web/execute_search')?>">By Id</a></option>
<option value="<?=site_url('web/execute_searchs')?>">By Date</a></option>
</select>
<input type="text" name="search" />
<input type="submit" value="Submit" />
I have combo box, when i select search by id and submit so it will go to Controller ('web/execute_search') , then if i select date and submit, go to Controller ('web/execute_search').
Try this code:
<select id="menu" onchange="option()">
<option value="1" content="1">By Id</a></option>
<option value="2" content="2">By Date</a></option>
</select>
<input type="text" name="search" />
<input type="submit" value="Submit" />
then here's javascript:
<script>function option(){
var x = document.getElementById("menu").value;
if (x==1){
window.location.href = "execute_search";
}
if (x==2){
window.location.href = "execute_searchs";
}}</script>
Using Javascript
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function findID()
{
var e = document.getElementById("menu");
var clicked = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
if(clicked ==1)
{
window.location.href = "web/execute_search";
}
if (clicked ==2)
{
window.location.href= "web/execute_searchs";
}
alert(clicked);
alert(text);
}
</script>
</head>
<body>
<select id="menu" name="menu">
<option value="1">By Id</option>
<option value="2">By Date</option>
</select>
<input type="text" name="search" />
<input type="submit" value="Submit" onclick="findID();" />
</body>
</html>
used e.options[e.selectedIndex].value; to get the value.
used e.options[e.selectedIndex].text; to get the text, means the way you want to sort.
Hope it will help you!!
Related
I have two HTML datalist inputs (for first and second language) that can't be the same. Instead of not accepting the form, I want the first option chosen to be removed dynamically from the second datalist but I can't make anything work with JQuery.
Any suggestions with React are also welcome.
Many thanks!😊
<form autocomplete="on" method="POST">
<input id="fLang" type="text" list="language" onchange="removeLang()" placeholder="First language">
<input id="sLang" type="text" list="language" onchange="removeLang()" placeholder="Second language">
<datalist id="language">
<option value="Chinese">China</option>
<option value="English">United Kingdom</option>
<option value="Russian">Russia</option>
</datalist>
</form>
You can achieve this using jQuery by using two datalist elements and detecting the change in the inputs as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form autocomplete="on" method="POST">
<input id="fLang" type="text" list="flanguage" placeholder="First language">
<input id="sLang" type="text" list="slanguage" placeholder="Second language">
<datalist id="flanguage">
<option id="fChinese" value="Chinese">China</option>
<option id="fEnglish" value="English">United Kingdom</option>
<option id="fRussian" value="Russian">Russia</option>
</datalist>
<datalist id="slanguage">
<option id="sChinese" value="Chinese">China</option>
<option id="sEnglish" value="English">United Kingdom</option>
<option id="sRussian" value="Russian">Russia</option>
</datalist>
</form>
</body>
<script>
var fRemovedItem;
var sRemovedItem;
$(document).ready(function () {
$('#fLang').on('change', function () {
let first = $('#fLang').val();
if (first != '') {
sRemovedItem = $(`#sLanguage option[value='${first}']`);
sRemovedItem.remove();
} else {
let sDatalist = $("#slanguage");
console.log(sDatalist);
console.log(sRemovedItem);
console.log(sDatalist.append(sRemovedItem));
}
});
$('#sLang').on('change', function () {
let second = $('#sLang').val();
if (second != '') {
fRemovedItem = $(`#fLanguage option[value='${second}']`);
fRemovedItem.remove();
} else {
let fDatalist = $("#flanguage");
console.log(fDatalist.append(fRemovedItem));
}
});
});
</script>
</html>
UPDATE: Removed items never go back if users remove the text in fLang or sLang. This situation was fixed with new code.
I believe this would be a stupid question. However, i am going nuts to figure out on how to resolve this problem.
I am trying to design a small web app, in which when you select an option from the drop-down, information in the text box fills automatically.
This works perfectly in firefox, however does not work in chrome.
Below is the code:
<!DOCTYPE html>
<html>
<script>
function myCopy() {
var copyText = document.getElementById("myText");
copyText.select();
document.execCommand("Copy");
}
function emaila() {
document.getElementById("myText").value += 'I hope you are going good.\n\n'
}
function emailb() {
document.getElementById("myText").value += 'As per our recent conversation, this email is in regards to your Workwear inquiry. Please find the proof of delivery which is attached to this email.\n\n'
}
</script>
<body>
<select class="block2" autocomplete="off">
<option value="">Email Template's</option>
<option value="1" onClick="emaila()">Greeting</option>
<option value="3" onClick="emailb()">POD</option>
<option value="4" onClick="emailc()">Forward to Relevant Team</option>
<option value="5" onClick="emaile()">Sales Lead</option>
<option value="2" onClick="emaild()">Thank You</option>
</select>
<form action="" method="post" enctype="text/plain">
<textarea id="myText" class="textbox"></textarea>
<div>
<button type="button" class="block11" onClick="document.getElementById('myText').value = ''">Clear</button></div>
<div><button type="button" class="block12" onclick="myCopy()">Copy</button></button></div>
</body>
It would be amazing if someone could enlighten me on this?
You have to call the function onchange event of the select. You cant call function on click of options
function myCopy() {
var copyText = document.getElementById("myText");
copyText.select();
document.execCommand("Copy");
}
function func(){
var x=document.querySelector('select').selectedIndex;
if(x==1)
emaila();
if(x==2)
emailb()
}
function emaila() {
document.getElementById("myText").value += 'I hope you are going good.\n\n'
}
function emailb() {
document.getElementById("myText").value += 'As per our recent conversation, this email is in regards to your Workwear inquiry. Please find the proof of delivery which is attached to this email.\n\n'
}
<!DOCTYPE html>
<html>
<body>
<select class="block2" autocomplete="off" onchange="func()">
<option value="">Email Template's</option>
<option value="1" onClick="emaila()">Greeting</option>
<option value="3" onClick="emailb()">POD</option>
<option value="4" onClick="emailc()">Forward to Relevant Team</option>
<option value="5" onClick="emaile()">Sales Lead</option>
<option value="2" onClick="emaild()">Thank You</option>
</select>
<form action="" method="post" enctype="text/plain">
<textarea id="myText" class="textbox"></textarea>
<div>
<button type="button" class="block11" onClick="document.getElementById('myText').value = ''">Clear</button></div>
<div><button type="button" class="block12" onclick="myCopy()">Copy</button></div>
</form>
</body>
</html>
You can call onchange event on select and then use conditional statement to set the textarea value
<select class="block2" id="mySelect" onchange="myOption()" autocomplete="off">
<option value="">Email Template's</option>
<option value="1" >Greeting</option>
<option value="3">POD</option>
<option value="4">Forward to Relevant Team</option>
<option value="5">Sales Lead</option>
<option value="2">Thank You</option>
</select>
<form action="" method="post" enctype="text/plain">
<textarea id="myText" class="textbox"></textarea>
<div>
<button type="button" class="block11" onClick="document.getElementById('myText').value = ''">Clear</button></div>
<div><button type="button" class="block12" onclick="myCopy()">Copy</button></button></div>
<script>
function myCopy() {
var copyText = document.getElementById("myText");
copyText.select();
document.execCommand("Copy");
}
function myOption() {
var select = document.getElementById("mySelect").value;
if (select == '1') {
document.getElementById("myText").value = "I hope you are going good.\n\n";
}
if (select == '3') {
document.getElementById("myText").value = "As per our recent conversation, this email is in regards to your Workwear inquiry. Please find the proof of delivery which is attached to this email.\n\n";
}
}
</script>
In the example below, I'm trying to populate an input with the contents of the option.data-foo attribute. I feel like this close... but I've got something back-to-front somewhere... Any thoughts?
My code :
function updateText(type) {
var id = type+'Text';
document.getElementById(id).data-foo = document.getElementById(type).value;
}
<form id="example" name="example">
<select id="sensor" onchange="updateText('sensor')">
<option value="Jval" data-foo="Jfoo">Joption</option>
<option value="Kval" data-foo="Kfoo">Koption</option>
</select>
<br />
<input type="text" value="" id="sensorText" />
</form>
If you're using jQuery then use this:
$('#sensor').change(function() {
$('#sensorText').val( $(this).find('option:selected').data('foo') )
})
$('#sensor').change(function() {
$('#sensorText').val( $(this).find('option:selected').data('foo') )
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="example" name="example">
<select id="sensor">
<option value="Jval" data-foo="Jfoo">Joption</option>
<option value="Kval" data-foo="Kfoo">Koption</option>
</select>
<br />
<input type="text" value="" id="sensorText" />
</form>
What you're going for, is probably this :
var selectField = document.getElementById('sensor');
var textField = document.getElementById('sensorText');
var updateTextField = function() {
textField.setAttribute(
'value',
selectField.options[selectField.selectedIndex].dataset.foo
);
}
// Populate your text field when loading your page
updateTextField();
// Update your text field when an option is selected
selectField.addEventListener('change', updateTextField);
<form id="example" name="example">
<select id="sensor">
<option value="Jval" data-foo="Jfoo">Joption</option>
<option value="Kval" data-foo="Kfoo">Koption</option>
</select>
<br />
<input type="text" value="" id="sensorText" />
</form>
(see also this Fiddle)
You can also resolve it in this way
$("#sensor").on("change", function(){
var $selectedItem = $(this).find(":selected");
var dataValue = $selectedItem.data("foo");
$("#sensorText").val(dataValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="example" name="example">
<select id="sensor">
<option value="Jval" data-foo="Jfoo">Joption</option>
<option value="Kval" data-foo="Kfoo">Koption</option>
</select>
<br />
<input type="text" value="" id="sensorText" />
</form>
if you are using jquery:
var value = $('#elementId').attr('data-foo');
I'm here to ask a question regarding JavaScript. I'm new to JavaScript so please forgive if I'm going wrong.
Could someone help me to get the values as result. After I select any State from Drop down list, the Show button should give me the value of the States as result. Is it possible?
<h1>Please select a State</h1>
<select id = "district">
<option value = "Tiruvanandapuram">Kerala</option>
<option value = "Chennai">Tamil Nadu</option>
<option value = "New Delhi">Delhi</option>
</select>
<input type = "button" value = "Show" onclick = "" />
<INPUT type="text" ID="add" id="txtresult" NAME="result" VALUE="">
`
This will do it:
var sel = document.getElementById("district");
function show(){
var txt = document.getElementById("add");
txt.value = sel.options[sel.selectedIndex].value;
}
<h1>Please select a State</h1>
<select id = "district">
<option value = "Kerala">Kerala</option>
<option value = "Chennai">Tamil Nadu</option>
<option value = "New Delhi">Delhi</option>
</select>
<input type = "button" value = "Show" onclick = "show()" />
<INPUT type="text" id="add" id="txtresult" NAME="result" VALUE="">
Try a simple code hope help
<script type="text/javascript">
function run() {
document.getElementById("srt").value = document.getElementById("district").value;
}
</script>
<h1>Please select a State</h1>
<select id = "district">
<option value="Tiruvanandapuram">Kerala</option>
<option value="Chennai">Tamil Nadu</option>
<option value="Delhi">Delhi</option>
</select>
<input type = "button" value = "Show" onclick="run()"/>
<INPUT type="text" ID="srt" id="txtresult" NAME="result" VALUE="">
Add below piece of code inside click=""
var e = document.getElementById('district');document.getElementById('txtresult').value= e.options[e.selectedIndex].value;
And there are two Id attribute in the bottom textbox, please remove id="Add".
Hope this helps.
Try this: HTML ---
<h1>Please select a State</h1>
<select id="district">
<option value="Tiruvanandapuram">Kerala</option>
<option value="Chennai">Tamil Nadu</option>
<option value="New Delhi">Delhi</option>
</select>
<input type= "button" value= "show" id="btn" onclick= show_district() />
<input type="text" id = sss value = "" />
JavaScript :
function show_district() {
var selector = document.getElementById('district');
var value = selector[selector.selectedIndex].value;
document.getElementById('sss').value = value;
}
I have this jQuery code:
<script type="text/javascript" >
$(function(){
var form1 = $('#form1'),
form2 = $('#form2');
$(document).ready(function() {
$(':select[name]', form2).val(function(){
return $(':input[name='+ this.name +']', form1).val();
});
});
});
</script>
and I have these two HTML forms
<form id="form1">
<select id="a" name="a" size="5" style="width: 400px;">
<option value="01">001</option>
<option value="02">002</option>
<option value="03">003</option>
<option value="04">004</option>
</select>
</form>
<form id="form2">
<input name="a" type=text>
</form>
I'd like that when the user selects an option from a list it immediately updates the input box in form2. It works in between two input boxes but not with a select - http://jsbin.com/jalomeyu/4/edit?html,js,output
You can simply listen to the change event on the select element. Also, there are some issues with your original code:
:select is not a valid pseudo-class. Just use select[name].
You are nesting $(document).ready(function() {...} in another one. $(function() {...} is a shorthand ;)
Here is the corrected JS:
$(function(){
var form1 = $('#form1'),
form2 = $('#form2');
$('select[name]', form1).change(function(){
$(':input', form2).val(this.value);
});
});
See updated JSbin here: http://jsbin.com/tajijajife/1/
Try this code below,
HTML,
<form id="form1">
<select id="a" name="a" style="width: 185px;">
<option value="Ali">Ali</option>
<option value="Ahmad">Ahmad</option>
<option value="Osama">Osama</option>
<option value="Zain">Zain</option>
<option value="Ahad">Ahad</option>
<option value="Bakar">Bakar</option>
<option value="Arish">Arish</option>
<option value="Anjum">Anjum</option>
</select>
</form>
<form id="form2">
<input name="a" type=text>
</form>
JQuery
<script type="text/javascript" >
$(function(){
var form1 = $('#form1'),
form2 = $('#form2');
$('#form1').change(function(){
$(':input[name]', form2).val(function(){
return $(':input[name='+ this.name +']', form1).val();
});
});
});
</script>
You'll need to do the update when the first select element changes. For example:
$(function() {
var form1 = $('#form1'),
form2 = $('#form2');
$(form1).change(function() {
$(':select[name]', form2).val(function() {
return $(':input[name='+ this.name +']', form1).val();
});
});
});
You can use a keyup function to run every time a key is pressed.
Example:
$(document).ready(function() {
var form1 = $('#form1'),
form2 = $('#form2');
$('input').keyup(function() {
$(':input[name]', form2).val(function() {
return $(':input[name=' + this.name + ']', form1).val();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
</head>
<body>
<form id="form1">
<input name="a" type=text value="test">
<input name="b" type=text>
<input name="c" type=text>
<input name="d" type=text>
</form>
<form id="form2">
<input name="a" type=text>
<input name="b" type=text>
<input name="c" type=text>
<input name="d" type=text>
</form>
</body>
</html>