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>
Related
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!!
I'm trying to get a function working that hides a label in the form depending on the radio button option selected. Here's my code so far.
HTML
<form action="">
<input type="radio" id="test" value="first"> first<br>
<input type="radio" id="test" value="second"> second<br>
<input type="radio" id="test" value="third"> third
</form>
<label class="hidden">Hide this</label>
Javascript
var rbtn = document.getElementById("test");
var x = document.getElementsByClassName("hidden");
function hidelabel() {
if (rbtn == 'third') {
x.style.display='none';
}
}
You must fire your hide function after radio button clicked like this:
document.mainForm.onclick = function(){
var radVal = document.mainForm.rads.value;
if (radVal == 'third') {
document.getElementsByClassName("hidden")[0].style.display = 'none';
}
}
ps: document.getElementsByClassName returns an array. So you cannot use x.style.display='none';.
Working example: https://jsfiddle.net/5ts0dak4/
First name the radio button ID's with something decent:
<form action="">
<input type="radio" id="first" value="first"> first<br>
<input type="radio" id="second" value="second"> second<br>
<input type="radio" id="third" onclick="hide();" value="third"> third
</form>
<label class="hidden" id="hidden">Hide this</label>
Then try this:
function hide(){
var x = document.getElementById('hidden');
if(document.getElementById('third').checked) {
x.style.display='none';
}
}
You can test it here https://jsfiddle.net/o54mzrk5/
Try this one.
CSS:
<style type="text/css">
.hidden{ display:none; }
</style>
HTML:
<form action="">
<input type="radio" name="test" value="first" onclick="func(this, true);"> first<br>
<input type="radio" name="test" value="second" onclick="func(this, true);"> second<br>
<input type="radio" name="test" value="third" onclick="func(this, false);"> third
</form>
<label class="hidden">Hide this</label>
Script:
<script type="text/javascript">
func = function(ctrl, visible) {
if(visible)
document.getElementsByClassName("hidden")[0].style.display='block';
else
document.getElementsByClassName("hidden")[0].style.display='none';
};
</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 have a checkbox with a value of U
i want to put this value into a text input when the checkbox is checked.
how can i do this using javascript or jquery? I need to be able to do it on multiple checkboxes and input text fields too
HTML
<input type="checkbox" value="U" id="checkBox"/>
<input type="text" value="" id="textInput" />
JQUERY
$("#checkBox").change(function(){
$("#textInput").val($(this).val());
});
DEMO
Try this,
HTML
<label><input type="checkbox" value="U" />Check</label>
<input type="text" />
SCRIPT
$('input[type="checkbox"]').on('click',function(){
var is_checked=$(this).prop('checked');
var val='';
if(is_checked)
val=this.value;
$('input[type="text"]').val(val);
});
Working Demo
the simpliest way to do this :o)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var checkboxInput = document.getElementById('checkboxInput'),
textInput = document.getElementById('textInput');
checkboxInput.addEventListener('click', UpdateTextInput, false);
};
function UpdateTextInput () {
if(checkboxInput.checked) {
textInput.value = checkboxInput.value;
}
else {
textInput.value = '';
}
}
</script>
</head>
<body>
<input type="checkbox" id="checkboxInput" value="U"/>
<input type="text" id="textInput" />
</body>
</html>
Assuming one textbox is associated with every checkbox like below.
HTML Pattern :
<input type="checkbox" value="test1" id="test1" checked><label>Test</label>
<input type="text" class="text1"id="textbox1" name="textbox1" value="">
jQuery:
$('input[type="checkbox"]').change(function() {
var vals = $(this).val();
if($(this).is(':checked')){
$(this).next().next("input[type='text']").val(vals);
}else{
$(this).next().next("input[type='text']").val("");
}
});
Here is the working demo : http://jsfiddle.net/uH4us/
I am sure this is any easy question, but I can't figure out what I am doing wrong.
What I am trying to accomplish is when the checkbox is "checked" I want it to enable the textbox.
Here is my code.
<html>
<title> iSCSI Admin v0.1 </title>
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="textname" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
</body>
</html>
Try this:
<input id="textname" type="text" />
function enabledisable() {
if (document.getElementById("Checkbox1").checked) {
document.form1.textname.disabled = false;
}
else {
document.form1.textname.disabled = true;
}
}
Ok you fixed the question. You need to put the checkbox in the form.
Try this:
<body>
<script type="text/javascript">
function enabledisable() {
if (document.form1.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
<form name="form1">
<fieldset style="width:640px;">
<legend>Enable textbox <input type="checkbox" name="checkbox1" onclick="enabledisable()"></legend>
Text:
<input type="text" name="textname" disabled="true" >
</fieldset>
</form>
</body>
document.form1.textname.disabled='disabled';
document.form1.textname.disabled='';
http://jsfiddle.net/nqaJZ/
Note: I added -> id="checkbox1" to your checkbox field.
Note: I changed the if condition as well -> document.getElementById("checkbox1").checked
Note: I changed your code which enables / disables textfield as well -> document.form1.text.disabled=false;
notice I changed it from targetname (which was not there) to your textfield name which you had was "text.
Hope it helps.
iSCSI Admin v0.1
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" id="checkbox1" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="text" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.getElementById("checkbox1").checked) {
document.form1.text.disabled=false;
} else {
document.form1.text.disabled=true;
}
}
</script>
</body>