I have a dropdownlist with two values and a text box. What I want is-
- If I select option 1, the text box should be like that atmost 10 characters can be entered
- If I select option 2, there should be no limit on maxlength for textbox
I am not sure how it could be done. May be by modifying the innerhtml but dont know how to proceed! Below is my .jsp file code for dropdown and textbox which as of now displays textbox of maxlength 10 which I need to make dynamic.
<select name="filetype" id="3">
<option value="null">--</option>
<option value="CTN" >CTN</option>
<option value="SLID" >SLID</option>
</select>
<h2>Enter the number<font color="red">*</font></h2>
<input type="text" name="customerID" maxlength=10 size="50" id="4"/>
<input type="submit" value="Submit Data" />
Since you tag this question with jquery here you are a simple example how to achieve that:
$('input[name="customerID"]').attr('maxlength')
This is a getter. To set a value you must to write second parameter. The whole example should be:
$(document).ready(function() {
$('select[name="filetype"]').on('change', function(e) {
var val = $(this).val();
if(val === "CTN") {
$('input[name="customerID"]').attr('maxlength', 10); //maxlength =10
} else if(val === "SLID") {
$('input[name="customerID"]').removeAttr('maxlength'); //no maxlength
}
});
});
Write an onchange event to select as below. Get the selected value and based on the condition add or remove maxlength attribute to/from textbox
$("select[name=filetype]").on('change', function() {
var val = $(this).find('option:selected').val();
$('input[name="customerID"]').val('');
if (val == "CTN")
$('input[name="customerID"]').attr('maxlength', 10);
else if (val == "SLID")
$('input[name="customerID"]').removeAttr('maxlength');
else
return false;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="filetype" id="3">
<option value="null">--</option>
<option value="CTN">CTN</option>
<option value="SLID">SLID</option>
</select>
<h2>Enter the number<font color="red">*</font></h2>
<input type="text" name="customerID" maxlength="10" size="50" id="4" />
<input type="submit" value="Submit Data" />
Try this code below.
<script>
$(function () {
$('select').change(function () {
if ($(this).val() == "CTN") {
$('input:first').attr('maxlength', '10')
}
else if ($(this).val() == "SLID") {
$('input:first').attr('maxlength', '')
}
});
});
</script>
<select name="filetype" id="3">
<option value="null">--</option>
<option value="CTN">CTN</option>
<option value="SLID">SLID</option>
</select>
<h2>Enter the number<font color="red">*</font></h2>
<input type="text" name="customerID" maxlength="10" size="50" id="4" />
<input type="submit" value="Submit Data" />
with some JQuery something like this could works:
$("h2 input").attr({maxlength: 30});
Related
so I want to add some input based on the option value from the drop down that will be selected. For example, the dropdown looks like this:
<form action="#" method="post">
<select name="job" id="job" >
<option value="">position</option>
<option value="1">Teacher</option>
<option value="2">Principal</option>
<option value="3">Staff</option>
</select>
</form>
and if the selected value is number 1 or teacher, it will display new input like this below it:
<input type="number" name="student" id="student">
<input type="Text" name="class" id="class">
if you guys know how to make it, maybe you can help me with this please, either using php or js because I've been stuck with this problem for a long time.
There are many different ways to achieve what you want depends on what framwwork you are using.
For
vanilla JS: onchange to control css OR append html.
jQuery: $("#class").hide() / .show();
Angular: ngIf
vueJs: v-if / v-show
etc...
In JS you can do that by adding change event listener to the <select></select> element;
and each time the selected <option></option> changes you should make all inputs hidden then make the ones you want visible.
Example:
const select = document.getElementById('job');
select.addEventListener('change', function() {
// returns the selected option's value
const selectedOption = select.value;
// makes all inputs hidden each time the selected option changes.
document.querySelectorAll('input').forEach(input => input.style.display = "none");
// for 1st parameter, pass the option value.
// for 2nd parameter, pass an array of ids of the inputs you want to make them visible.
const setInputs = (state, id) => {
if (selectedOption === state) {
(id.sup ? id = [id] : id);
id.forEach(i => {
try {
document.getElementById(i).style.display = 'block';
} catch (error) {
console.error(`#${i} doesn't exists!`)
}
});
}
}
/* if the selected option's value is 1(Teacher),
The "student" and "class" inputs will be visible. */
setInputs('1', ['student', 'class']);
/* if the selected option's value is 2(Principal),
The "id" and "principal" inputs will be visible. */
setInputs('2', ['id', 'principal']);
/* if the selected option's value is 3(Staff),
The "name" input will be visible. */
/* if you want to show just one input,
don't need to pass an array as 2nd parameter
just pass a string */
setInputs('3', 'name');
});
/* Makes all inputs hidden by default */
input {
display: none;
}
<form action="#" method="post">
<select name="job" id="job">
<option selected hidden disabled>Position</option>
<option value="1">Teacher</option>
<option value="2">Principal</option>
<option value="3">Staff</option>
</select>
<input type="number" name="student" id="student" placeholder="Student">
<input type="Text" name="class" id="class" placeholder="class">
<input type="number" name="id" id="id" placeholder="ID">
<input type="number" name="principal" id="principal" placeholder="Principal">
<input type="Text" name="name" id="name" placeholder="Name">
</form>
before that, set the style of input is hide, then You can try onchange on select, Which is get the value of select. then proceed to show the hide input.
const job = document.getElementById("job");
let add = document.getElementsByClassName("addEx");
job.addEventListener("change",function() {
if (this.value == 1) {
for (let i = 0; i < add.length; i++) {
add[i].style.display = 'block';
}
}
else {
for (let i = 0; i < add.length; i++) {
add[i].style.display = 'none';
}
}
});
.addEx {
display:none;
}
<form action="#" method="post">
<select name="job" id="job" >
<option value="">position</option>
<option value="1">Teacher</option>
<option value="2">Principal</option>
<option value="3">Staff</option>
</select>
<input type="number" name="student" id="student" class="addEx">
<input type="Text" name="class" id="class" class="addEx">
</form>
You can use like this:
jQuery(document).ready(function() {
$('#job').change(function() {
let job = $('#job').val();
if (job == '1') {
$('#sampleBox').show();
} else {
$('#sampleBox').hide();
}
});
});
#sampleBox {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="job" id="job">
<option selected hidden disabled>Position</option>
<option value="1">Teacher</option>
<option value="2">Principal</option>
<option value="3">Staff</option>
</select>
<div id="sampleBox">
<input type="number" name="student" id="student">
<input type="Text" name="class" id="class">
</div>
I'm trying to show two test fields after choosing "id" from drop down list. It's set on hidden and im trying to make it visible when "id" is selected. Unfortunately it's not working. Please help!
<form>
<input class="hidden" type="text" id="textField2">
<input type="text" id="textField">
<select id="select" name="selectData">
<option value="firstName">Name</option>
<option value="id">Id</option>
</select>
<input id="filter" type="button" value="Filter">
<script>
var temp = document.getElementById("textField2").value;
if(document.getElementById("select")[0].value === "id"){
temp.style.visibility = "visible";
}else {
temp.style.visibility = "hidden";
}
</script>
</form>
There probably is a mistake somewhere or maybe there's any other (better) way to do this?
You can use the following solution:
<form>
<script>
function toggle() {
var temp = document.getElementById("textField2");
//check for selected option.
if(document.getElementById("select").value === "id"){
temp.style.visibility = "visible";
} else {
temp.style.visibility = "hidden";
}
}
</script>
<input class="hidden" type="text" id="textField2" style="visibility:hidden;">
<input type="text" id="textField">
<select id="select" name="selectData" onchange="toggle()">
<option value="firstName">Name</option>
<option value="id">Id</option>
</select>
<input id="filter" type="button" value="Filter">
</form>
I'm am fairly new to JavaScript; I have been googling all day for this but i only found how to enable and disable one textbox using one checkbox.
Here is my code
JavaScript
function enable_text(status){
status=!status;
document.sr2.other_text.disabled = status;
}
HTML
<form name=sr2 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">
Others
<input type=text name=other_text>
</form>
Note: the code I posted is only for a textbox that when uncheck in checkbox it will be enabled.
My question is how do you disable select tag and enable a textbox after unchecking a checkbox?
Add an id to your text box then just put the below onclick of your checkbox instead of the function call.
<form name=sr2 method=post>
<input type="checkbox" name=others onclick= "document.getElementById('id_of_txtbox').disabled=this.checked;">Others
<input type=text name=other_text>
Here's the HTML
<input type="text" id="txt" disabled="disabled"/>
<select name="sel" id="sel">
<option value="test1">Test 1</option>
</select>
<input type="checkbox" name="vehicle" value="Car" checked="checked" onclick="enableText(this.checked)">Uncheck to Disable Select and Enable Text
And the JavaScript is
function enableText(checked){
if(!checked){
document.getElementById('sel').disabled = true;
document.getElementById('txt').disabled = false;
}
else{
document.getElementById('sel').disabled = false;
document.getElementById('txt').disabled = true;
}
}
Select is disabled and text is enabled on uncheking the checkbox and vice versa. Hopefully that helps.
Based on your question, are you trying to present a dropdown but then allow them to enter other values not in the dropdown?
If so, here is another way to approach it:
HTML:
<select name="RenewalTerm" id="RenewalTerm">
<option value="12">12 Month</option>
<option value="24">24 Month</option>
<option value="36">36 Month</option>
<option value="Other">Other</option>
</select>
<span id="RenewalTermOtherFields">
<label labelfor="RenewalTermManual" >Enter Renewal Term: </label>
<input type="text" name="RenewalTermManual" id="RenewalTermManual" />
</span>
JavaScript/jQuery:
$(document).ready(function() {
$('#RenewalTermOtherFields').hide();
$('#RenewalTermManual').val($('#RenewalTerm').val());
$('#RenewalTerm').change(function() {
var selectedItem = $("select option:selected").val();
if (selectedItem !== 'Other') {
$('#RenewalTermOtherFields').hide();
$('#RenewalTermManual').val($('#RenewalTerm').val());
}
else
{
$('#RenewalTermManual').val('');
$('#RenewalTermOtherFields').show();
}
});
});
See It In Action!: http://eat-sleep-code.com/#/javascript/dropdown-with-other-field
This will allow you to select "other" from the list, and when you do it will automatically display a textbox for free-form entry.
I have a div that I need to hide when an option is selected in an option, below is my current html:
Type:<select name="Type" id="Type">
<option value="choice">Multiple choice</option>
<option value="image">Image/Video</option>
<option value="click">Click Image</option>
</select><br>
<div id="answers">
Correct Answer:<input type="text" name="answer"><br>
Wrong Answer 1:<input type="text" name="wrong1"><br>
Wrong Answer 2:<input type="text" name="wrong2"><br>
Wrong Answer 3:<input type="text" name="wrong3"><br>
</div>
So what I need is when the option with the value "click" is selected the div with the id "answers" is hidden, if either the other options are selected this div should be shown.
I am sure this can be dome with javas
Listen for the change event on select, take the value .val() and check if it's "click". If so, show() the #answers, otherwise hide() them.
var $answers = $("#answers");
$("#Type").on("change", function() {
if ($(this).val() === "click") {
$answers.show();
} else {
$answers.hide();
}
});
#answers {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type:
<select name="Type" id="Type">
<option value="choice">Multiple choice</option>
<option value="image">Image/Video</option>
<option value="click">Click Image</option>
</select>
<br>
<div id="answers">
Correct Answer:
<input type="text" name="answer">
<br>Wrong Answer 1:
<input type="text" name="wrong1">
<br>Wrong Answer 2:
<input type="text" name="wrong2">
<br>Wrong Answer 3:
<input type="text" name="wrong3">
<br>
</div>
The no-jQuery version would be:
var answersElm = document.querySelector("#answers");
document.querySelector("#Type").addEventListener("change", function() {
if (this.value === "click") {
answersElm.style.display = "block";
} else {
answersElm.style.display = "none";
}
});
Try this
$(function(){
$("#Type").change(function(){
if($("#Type").val() == "click"){
$("#answers").css("display", "none");
}
else{
$("#answers").css("display", "block");
}
});
});
Based on the HTML Selection form field below, I need to reset a text field value when the selection field is set to any value besides Completed or Cancelled
<select name="status" id="status" title="">
<option label="Open" value="Open">Open</option>
<option label="In Progress" value="In_Progress">In Progress</option>
<option label="Future_Project" value="Future_Project">Future_Project</option>
<option label="Cancelled" value="Cancelled">Cancelled</option>
<option label="Completed" value="Completed" selected="selected">Completed</option>
</select>
The Text input that I need to set the value to empty/nothing looks like this...
<input autocomplete="off" type="text" id="date_completed_date" value="09/20/2014 06:15pm" size="11" maxlength="10" onblur="combo_date_completed.update();" onchange="combo_date_completed.update(); ">
I can use jQuery or regular JavaScript. I would appreciate any help, I think this should be pretty simple?
Working solution: http://jsfiddle.net/bevanr01/7e2ubo85/4/
$( "#status" ).change(function() {
if ((["Cancelled","Completed"].indexOf($(this).val()) == -1)){
$('#date_completed_date').val('');
}
});
And if you wanted to get fancy as mentioned below you could add today's date those two values are selected.
$( "#status" ).change(function() {
if ((["Cancelled","Completed"].indexOf($(this).val()) == -1)){
$('#date_completed_date').val('');
} else {
$('#date_completed_date').val(new Date());
}
});
Its worth retaining the Date if the user Re-selects another Option otherwise the date will stay Blank.
var date = $('#date_completed_date').val();
$("select").on("change", function () {
if ($(this).val().indexOf('ed') == -1) {
$('#date_completed_date').val('');
}
else {
$('#date_completed_date').val(date);
}
})
Demo
http://jsfiddle.net/mrw9hor8/
try this
<form name="sample">
<select name="status" id="status" title="" onchange="clearInput()">
<option label="Open" value="Open">Open</option>
<option label="In Progress" value="In_Progress">In Progress</option>
<option label="Future_Project" value="Future_Project">Future_Project</option>
<option label="Cancelled" value="Cancelled">Cancelled</option>
<option label="Completed" value="Completed" selected="selected">Completed</option>
</select>
<input autocomplete="off" type="text" id="date_completed_date" value="09/20/2014 06:15pm" size="11" maxlength="10" onblur="combo_date_completed.update();" onchange="combo_date_completed.update(); ">
</form>
in your script
function clearInput() {
if(document.sample.status.value != "Completed" && document.sample.status.value != "Cancelled")
{
document.getElementById('date_completed_date').value='';
}
}