Show/hide input text after click with multiple selectbox - javascript

I have selectbox like this
rows 1
<form action="" method="POST">
<select id="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input id="txtname" type="text" name="txtname" style="display:none;">
</form>
rows 2
<form action="" method="POST">
<select id="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input id="txtname" type="text" name="txtname" style="display:none;">
</form>
and javascript
$(document).ready(function(){
$("#showhide").change(function(){
var valx = $('#showhide').val();
if(valx == '1'){
$("#txtname").show();
}else if(valx == '2'){
$("#txtname").hide();
}
});
});
when i use selectbox in rows 1 show/hide the inputbox in rows 1 working, but when i use selectbox in rows 2 the show/hide not working like rows 1.
how to solved this.
thankyou

Replace id attribute with name in select, and remove id attribute from input, because id attribute must be unique over all document.
<form action="" method="POST">
<select name="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input type="text" name="txtname" style="display:none;">
</form>
<form action="" method="POST">
<select name="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input type="text" name="txtname" style="display:none;">
</form>
JS:
$(document).ready(function(){
$("select[name='showhide']").change(function(){
$(this).siblings('input[name="txtname"]').toggle(this.value == 1);
});
});
Example: https://jsbin.com/pavijufige/edit?html,js,output

Do this changes.
In the current scenario,use $(this) to get current context selection
$(document).ready(function() {
$("select.showhide").change(function() {
var valx = $(this).val();
if (valx == '1') {
$(this).next().show();
} else if (valx == '2') {
$(this).next().hide();
}
});
});
Add class class="showhide" to your select drop-down.
Id Should be unique.So, you can not use same id twice.
HTML :
<form action="" method="POST">
<select class="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input id="txtname" type="text" name="txtname" style="display:none;">
</form>
<form action="" method="POST">
<select class="showhide">
<option value="0">-SELECT-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<input id="txtname" type="text" name="txtname" style="display:none;">
</form>

Related

select option text input type hidden display block in javascript

When I select the "Number" option, it does not show <input id="number">.
I want all numbers to be selected without input, but when the "Number" option is clicked, it shows <input id="number">. Users can enter a number into <input id="number">.
var select = document.getElementById("select");
$("#select").change(function() {
var res = select.options[select.selectedIndex].getAttribute("name");
document.getElementById('number').value = select.options[select.selectedIndex].getAttribute("name");
$('#number').hide();
$('#help').hide();
$('#' + $(this).val()).show();
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<form action="index.php" method="post">
<select name="select" id="select">
<option value="1" name="1">1</option>
<option value="2" name="2">2</option>
<option value="3" name="3">3</option>
<option value="number" name="">Number</option>
<option value="help" name="">Help</option>
</select>
<input id="number" type="hidden" name="number" value="Choose" style="display:none" />
<label id="help" style="display:none">Help!</label>
<input type="submit" value="submit" />
</form>
If you put type="number" instead of type="hidden", it will force user to input digits only.
var select= document.getElementById("select");
$("#select").change(function(){
var res=select.options[select.selectedIndex].getAttribute("name");
document.getElementById('number').value=select.options[select.selectedIndex].getAttribute("name");
$('#number').hide();
$('#help').hide();
$('#' + $(this).val()).show();
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<form action="index.php" method="post">
<select name="select" id="select">
<option value="1" name="1">1</option>
<option value="2" name="2">2</option>
<option value="3" name="3">3</option>
<option value="number" name="">Number</option>
<option value="help" name="">Help</option>
</select>
<input id="number" type="number" name="number" value="Choose" style="display:none"/>
<label id="help" style="display:none">Help!</label>
<input type="submit" value="submit"/>
</form>
Don't use type="hidden" .Because its not visible on html if the display:block also .And already you are using jquery so better use selector with jquery $(this).find('option:selected').attr('name')
var select = document.getElementById("select");
$("#select").change(function() {
var res = $(this).find('option:selected').attr('name')
$('#number').val(res)
$('#number').hide();
$('#help').hide();
$('#' + $(this).val()).show();
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="index.php" method="post">
<select name="select" id="select">
<option value="1" name="1">1</option>
<option value="2" name="2">2</option>
<option value="3" name="3">3</option>
<option value="number" name="">Number</option>
<option value="help" name="">Help</option>
</select>
<input id="number" name="number" value="Choose" style="display:none" />
<label id="help" style="display:none">Help!</label>
<input type="submit" value="submit" />
</form>

Drop Down Box Value enables Field

I have the following code to run my Dropdown box and field I want to disable when the value is not equal to value in dropdown.
My code is as follows.
document.getElementById('type').addEventListener('change', function() {
if (this.value == Hijacking) {
document.getElementById('hijacking').disabled = false;
} else {
document.getElementById('hijacking').disabled = true;
}
});
<div class="width-qrtr">
<label>Type of event</label>
<select name="Type" id="select">
<option value="">Select Type</option>
<option value="Fraud">Fraud</option>
<option value="Theft">Theft</option>
<option value="Accident">Accident</option>
<option value="Hijacking">Hijacking</option>
</select>
</div>
<div class="width-qrtr">
<label>Police Station</label>
<input id="textbox" disabled="true" type="text" name="Test" />
</div>
It keeps the field disabled. If i change the values to numerical it works but I need the Value for SQL to be inserted into my DB
document.getElementById works only if you put the corresponding id in defined by id="...". Also to compare string values you have to put them in quotes => this.value == 'Hijacking'.
The corrected code looks like this:
document.getElementById('select').addEventListener('change', function() {
if (this.value == 'Hijacking') {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
<div class="width-qrtr">
<label>Type of event</label>
<select name="Type" id="select">
<option value="">Select Type</option>
<option value="Fraud">Fraud</option>
<option value="Theft">Theft</option>
<option value="Accident">Accident</option>
<option value="Hijacking">Hijacking</option>
</select>
</div>
<div class="width-qrtr">
<label>Police Station</label>
<input id="textbox" disabled="true" type="text" name="Test" />
</div>
Few bugs in your code , fixed as follows:
document.getElementById('select').addEventListener('change', function() {
if (this.value == "Hijacking") {
document.getElementById('textbox').disabled = false;
} else {
document.getElementById('textbox').disabled = true;
}
});
<div class="width-qrtr">
<label>Type of event</label>
<select name="Type" id="select">
<option value="">Select Type</option>
<option value="Fraud">Fraud</option>
<option value="Theft">Theft</option>
<option value="Accident">Accident</option>
<option value="Hijacking">Hijacking</option>
</select>
</div>
<div class="width-qrtr">
<label>Police Station</label>
<input id="textbox" disabled="true" type="text" name="Test" />
</div>

Form submit and set value in text field which get in response

I have Multiple Form On single Page Like this
<form name="abc" id="frm1">
<input type="text" name="ClientName">
<select name="clientAdd">
<option value="1">Abc</option>
<option value="2">xyz</option>
<option value="3">pqr</option>
</select>
<input type="button" class="btnSave">
</form>
<form name="abc" id="frm2">
<input type="text" name="agentName">
<select name="agentAdd">
<option value="1">Abc</option>
<option value="2">xyz</option>
<option value="3">pqr</option>
</select>
<input type="button" class="btnSave">
</form>
<form name="abc" id="frm3">
<input type="text" name="supplierName">
<select name="supplierAdd">
<option value="1">Abc</option>
<option value="2">xyz</option>
<option value="3">pqr</option>
</select>
<input type="button" class="btnSave">
</form>
<form name="abc" id="frm4">
<input type="text" name="ArtistName">
<select name="ArtistAdd">
<option value="1">Abc</option>
<option value="2">xyz</option>
<option value="3">pqr</option>
</select>
<input type="button" class="btnSave">
</form>
Js :-
$('.btnSave').click(function () {
var thisClass = $(this);
var addFormData = thisClass.closest('form').serializeArray();
var result = {};
$.each(addFormData, function (i, field) {
result[field.name] = field.value;
});
$.ajax({
type: 'POST',
url: Routing.generate('book_client_edit_detail'),
data: {'data': result},
success: function (data) {
console.log(data);
}
});
});
Response Like This:-
[{
"ClientName":abc,
"clientAdd":"1",
"agentName":abc,
"agentAdd":"1",
"supplierName":abc,
"supplierAdd":"1",
"ArtistName":abc,
"ArtistAdd":"1"
}]
I want automatically set value in text filed and select field When I got response.
Response name and text Field name are the same, so how can I do in JavaScript?
You should use document.getElementsByName() method in order to access a DOM element by its name.
You can set value separated for each element, but exist a beautiful way to do this.
All you have to do is to iterate through response[0] keys.
var response=[{"ClientName":'abc',"clientAdd":"1","agentName":'abc',"agentAdd":"1","supplierName":'abc',"supplierAdd":"1","ArtistName":'abc',"ArtistAdd":"1"}];
for(key in response[0]){
console.log(key+':'+response[0][key]);
}
Another method to obtain all keys of an object is to use Object.keys() method.
The last step consists in setting the value of each DOM element.
document.getElementsByName(key)[0].value=response[0][key];
var response=[{"ClientName":'abc',"clientAdd":"1","agentName":'abc',"agentAdd":"1","supplierName":'abc',"supplierAdd":"1","ArtistName":'abc',"ArtistAdd":"1"}];
for(key in response[0]){
document.getElementsByName(key)[0].value=response[0][key];
}
<form name="abc" id="frm1">
<input type="text" name="ClientName">
<select name="clientAdd">
<option value="1">Abc</option>
<option value="2">xyz</option>
<option value="3">pqr</option>
</select>
<input type="button" value="Save" class="btnSave">
</form>
<form name="abc" id="frm2">
<input type="text" name="agentName">
<select name="agentAdd">
<option value="1">Abc</option>
<option value="2">xyz</option>
<option value="3">pqr</option>
</select>
<input type="button" value="Save" class="btnSave">
</form>
<form name="abc" id="frm3">
<input type="text" name="supplierName">
<select name="supplierAdd">
<option value="1">Abc</option>
<option value="2">xyz</option>
<option value="3">pqr</option>
</select>
<input type="button" value="Save" class="btnSave">
</form>
<form name="abc" id="frm4">
<input type="text" name="ArtistName">
<select name="ArtistAdd">
<option value="1">Abc</option>
<option value="2">xyz</option>
<option value="3">pqr</option>
</select>
<input type="button" value="Save" class="btnSave">
</form>

Change the placeholder when the select option is changed using jQuery

I have a site with the same form in different spots on the page. I would like to be able to have a placeholder in a text input change when I change the select option. I have a JSFiddle with a kinda example: http://jsfiddle.net/y1jhhqLz/
All the forms look like this:
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
And in this example, I would like to have the place holder change on the input with the id myInput, when I select the option Third.
I have tried many different ways to include the most recent attempt, which I put on the JSFiddle.
Any help would be greatly appreciated!
Set select onclick attribute to
onclick="changePlaceHolder(this,'#myInput1');"
and change javascript function to
function changePlaceHolder(dropdown, element) {
if (jQuery(dropdown).val() == "Third") {
jQuery(element).attr('placeholder', 'You did it correctly!');
} else {
jQuery(element).at}tr('placeholder', '');
}
}
in JSFiddle, you should set the loading behaviour to "no wrap - in head"
Done!
Add a change listener to the select, then get the value of the select and set the attribute placeholder to said value:
$('select').on('change',function(){
var place=$(this).val();
var num=$(this).attr('id').substring(8);
$('#myInput'+num).attr('placeholder',place);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p>How do I get it so that when I click on the option that says Third Choice (for any form), it will put in the text box (with the form and number ) a placeholder: "You did it correctly"? But it shouldn't change any other form but the one where you change the select to the Third Choice option. I tried using a onClick function.
</p>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Several things going on. First, remove the onClick events (we are not looking for when the select is clicked but rather when it is changed) and instead use jQuery's on method. Now changePlaceHolder has access to this which is the actual select box which was changed.
See below:
jQuery('select').on('change input', changePlaceHolder);
function changePlaceHolder() {
//I have to use jQuery instead of $ because it is on a wordpress site
if (jQuery(this).val() == "Third") {
jQuery(this).next().attr("placeholder","You did it correctly!");
} else {
jQuery(this).next().attr("placeholder"," ");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" >
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"/>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"/>
</form>
Other things to note: your <input> tags to not require an ending tag </input>, instead write them like this <input />. Note that the "/" ends the tag. You want to edit the input immediately following your select, in which case you can use jQuery(this).next() which will select the element immediately following the current this element.
For your specific case I would not touch source code, would define all functionality in script. Setting the onlick event inline is not a good idea, scripts should not go together with content.
I wrote this script having in mind that your select and input tags do not have to be siblings, the only condition is that both belong to same form:
/* This way you can use $ in your Wordpress */
(function ($) {
$('select').on('change', function(e) {
var thisSelect = $(this);
var thisSelectValue = thisSelect.val();
var thisInput = thisSelect.closest('form').find('input[id^=myInput]');
if (thisSelectValue == 'Third') {
thisInput.attr("placeholder", "You did it correctly!");
} else {
thisInput.attr("placeholder", "");
}
});
}(jQuery));
p {
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Please find the working code for you:
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function changePlaceHolder(element,target) {
alert(element);
if ( element == "Third") {
jQuery(target).attr("placeholder","You did it correctly!");
} else {
jQuery(target).attr("placeholder","");
}
}
</script>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" name="mySelect1" onclick="changePlaceHolder( this.value ,'#myInput1' );">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
</body>
</html>

jQuery Show a Textbox When an Option is Selected

I have the following code:
<select>
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>
<input type="text" id="other" />
What I want to do is using jQuery make the textbox below hidden by default, and then show it if a user selects the other option from the dropdown.
No need for any css here.
$('#sel').change(function() {
var selected = $(this).val();
if(selected == 'Other'){
$('#other').show();
}
else{
$('#other').hide();
}
});
<select id="sel">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>
<input type="text" id="other" style="display: none;" />
$('#sel').change(function() {
$('#other').css('display', ($(this).val() == 'Other') ? 'block' : 'none');
});
Try this:
<select id="selectbox_id">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>
<input type="text" id="other" />
JQuery:
$(function(){
// hide by default
$('other').css('display', 'none');
$('selectbox_id').change(function(){
if ($(this).val() === 'Other') {
$('other').css('display', 'block');
}
});
});
<select id = "ddlPassport" onchange = "ShowHideDiv()" style="width:150px;">
<option value="Y">Type 1</option>
<option value="Y">Type 2</option>
<option value="N">Type 3</option>
<option value="D">Other</option>
</select>
<script type="text/javascript">
function ShowHideDiv()
{
var ddlPassport = document.getElementById("ddlPassport");
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = ddlPassport.value == "Y" ? "block" : "none";
dvPassport1.style.display = ddlPassport.value == "N" ? "block" : "none";
dvPassport2.style.display = ddlPassport.value == "D" ? "block" : "none";
}
<div id="dvPassport" style="display: none">
<form action="viewdata.php" method="POST">
Enter Data:
<input type="text" id="txtPassportNumber" name="data" />
<br>
<input type="submit" value="Search" name="submit"
style="float:right;width:150px;margin-top:10px;">
</form>
</div>
<div id="dvPassport1" style="display: none">
<form action="viewdata.php" method="POST">
Enter Data:
<input type="number" id="txtPassportNumber" name="data" />
<br>
<input type="submit" value="Search" name="submit"
style="float:right;width:150px;margin-top:10px;">
</form>
</div>
<div id="dvPassport2" style="display: none">
<form action="viewdata.php" method="POST">
Enter Data:
<input type="date" id="txtPassportNumber" name="data" />
<br>
<input type="submit" value="Search" name="submit"
style="float:right;width:150px;margin-top:10px;">
</form>
</div>

Categories

Resources