I am clearing session on onchange but it's not working. I am having a text field, what I want is when something is filled on text filed and when I select test from select the data on text field which I filed earlier should be removed. For this I am using sessionStorage.clear(); but it's not working.
My codes are here
function SesRes() {
var x = document.getElementById("abc").value;
if(x == "test") {
sessionStorage.clear();
}
}
<input type="text" value="">
<select id="abc" onchange="SesRes()">
<option value="xyz">xyz</option>
<option value="test">test</option>
</select>
No this is not the right way if you want to remove the data from your text input field.
Do something like:
<script>
function SesRes() {
var x = document.getElementById("abc").value;
if(x == "test") {
document.getElementById("textField").value = "";
}
}
</script>
<input type="text" id="textField" value="">
<select id="abc" onchange="SesRes()">
<option value="xyz">xyz</option>
<option value="test">test</option>
</select>
Related
I'm using the following code to pass a value from a select option to a given input field.
$(".itemconditionmenu").change(function() {
var conditionofitem = $(this).val();
$("#meta_itemcondition").val(conditionofitem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
<option value="">Choose Condition</option>
<option value="New">New</option>
<option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New">
But how can I pass the value of the input field back to the select option value using jQuery?
I am not sure what you are exactly looking, however, as per my understanding I have modifed your code samples.. You can check below snippet.
$( document ).ready(function() {
var conditionofitem = $("#meta_itemcondition").val();
$(".itemconditionmenu").val(conditionofitem);
});
$(".itemconditionmenu").change(function() {
var conditionofitem = $(this).val();
if(conditionofitem == '') {
$("#meta_itemcondition").val('Choose Condition');
} else {
$("#meta_itemcondition").val(conditionofitem);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
<option value="">Choose Condition</option>
<option value="New">New</option>
<option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New">
Please check and let me know if you have any further queries.
Try this
$("#addOption").click(function(){
$("#itemconditionmenu").append('<option value="'+$("#meta_itemcondition").val()+'" selected="selected">'+$("#meta_itemcondition").val()+'</option>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="itemconditionmenu">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input id="meta_itemcondition" type="text" value=""></input>
<button id="addOption">ADD</button>
Example for the same: Blur out your input and value option will be added to select dropdown
$(".itemconditionmenu").change(function() {
var conditionofitem = $(this).val();
$("#meta_itemcondition").val(conditionofitem);
});
$("#meta_itemcondition").blur(function() {
var inputValue = $(this).val();
var o = new Option(inputValue, inputValue);
$(o).html(inputValue);
$("#itemcondition").append(o);
$("#itemcondition").val(inputValue);
});
$( document ).ready(function() {
var value = $("#meta_itemcondition").val();
console.log(value)
var alreadyOption = false;
$("#itemcondition option").each(function()
{
alreadyOption = $(this).val() === value;
if(alreadyOption) {
$("#itemcondition").val(value);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select id="itemcondition" class="itemconditionmenu">
<option value="">Choose Condition</option>
<option value="New">New</option>
<option value="Used">Used</option>
</select>
<input id="meta_itemcondition" type="text" value="New"/>
Here you can find inline functionality
if you enter a value in textbox value append in drop-down
if you select drop-down value auto set in textbox.
Note: add value in textbox change just input focus
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="jsSelect" onchange="$('.jsTextBox').val($(this).val())">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input class="jsTextBox" onchange="if($(this).val()!=''){$('.jsSelect').append($('<option></option>').attr('value',$(this).val()).text($(this).val()));$('.jsSelect').val($(this).val());}" type="text" value="">
On click, user can dynamically add combo (select option + input field) into form with (city code and telephone number), need to retrieve in a object with the inputed values for these fields.
//Code that retreive the input values:
var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = [].map.call(number_el, function(input) {
return {
'telefone': input.value
};
});
console.log(telefoneNumber);
<div id="phone">
<p>Telephone</p>
<select name="city_code" id="telephone_1" class="telephoneList">
<option value="1">212</option>
<option value="2">216</option>
<option value="3">215</option>
</select>
<input type="text" name="phone_number" id="phone_input1" value="555-222555"> </br>
<p>Telephone</p>
<select name="city_code" id="telephone_1" class="telephoneList">
<option value="1">212</option>
<option value="2">216</option>
<option value="3">215</option>
</select>
<input type="text" name="phone_number" id="phone_input2" value="555-666555">
</div>
The above code retreive the input telefone:values in object.
I need to loop throw the select options to get its values and add to the object as show below:
Element name can be used as property name for both telefone and city_code.
telephoneList: [
{
"telefone":555-222555,
**"city_code":1**
},
{
"telefone":555-666555,
**"city_code":2**
}
]
You can use the attribute previousElementSibling for getting the previous element which is a select.
This is assuming that the previous element is always the select element.
//Code that retreive the input values:
var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = Array.from(number_el).map(function(input) {
var object = {
'telefone': input.value,
'city_code': input.previousElementSibling.options[input.previousElementSibling.selectedIndex].value
}
return object;
});
console.log(telefoneNumber);
<div id="phone"> <p>Telephone</p> <select name="city_code" id="telephone_1" class="telephoneList"> <option value="1">212</option> <option value="2">216</option> <option value="3">215</option> </select> <input type="text" name="phone_number" id="phone_input1" value="555-222555"> <br> <p>Telephone</p> <select name="city_code" id="telephone_1" class="telephoneList"> <option value="1">212</option> <option value="2">216</option> <option value="3">215</option> </select> <input type="text" name="phone_number" id="phone_input2" value="555-666555"> </div>
I am trying to alert a value when a user clicks the submit button. I gave the "required" attribute to both select tag but it is not working.
I want to alert a value when a user submits a button. Can anyone tell where i went wrong?
Code:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
var ORSZ = OR + SZ;
alert(ORSZ);
}
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox" required>
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">
Here you go with a solution https://jsfiddle.net/1mydje82/1/
$('select').on('change', function(){
var required = false;
$('select').each(function(){
if($(this).val() === '')
required = true;
});
$('input[value="Submit"]').attr('disabled', required);
});
$('input[value="Submit"]').click(function(){
var OR = $("#request").val();
var SZ = $("#sites").val();
var ORSZ = OR + SZ;
alert(ORSZ);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" value="Submit">
</form>
I've used jQuery. Initially your Submit button will be disabled.
Once you select both the drodown with values then only Submit button will be enabled.
Hope this will help you.
You can't rely on required attribute of <select>(because it's only work when form submits normally, and not supported in Opera anyhow).
You can make it happening like below:-
Example:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
if(OR =='' || SZ ==''){
alert('Please select values from both select-box'); return false;
}else{
var ORSZ = OR + SZ;
alert(ORSZ);
}
}
<form>
<select id="request" class="dropdownbox">
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">
</form>
I need the textarea to be filled when "Other" is selected.
This is what I have, I thought it will work. But nothing shows up when other is selected and textarea is left blank.
html:
<form onsubmit="return validation()">
<span>Reason for inquiry: <span>
<select style="color:black" name="reasons">
<option value="catering">Catering</option>
<option value="private party">Private Party</option>
<option value="feedback">Feedback</option>
<option id="selectedOther" value="other">Other</option>
</select>
</form>
JS:
function validation(){
otherInquiry()
}
function otherInquiry(){
var x = document.getElementById("selectedOther").value;
if (document.getElementsByTagName("select") == x){
if(document.getElementById("txtArea").value == ""){
alert("Please tell us your reason of inquiry")
}
return false;
}
}
I want a drop down element where user can select from available options or select enter value option which in turn allows to enter value.
I specifically want that user can enter value only when they select "Enter a value " option.
Here is what I have tried so far.
HTML-
<div class="ginput_container">
<select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<input type="text" value="None" class="holder" >
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
} else {
x.find('.holder').val(x.find('option:selected').text());
}
});
JS fiddle
however it wont work properly if i click the enter value option again.
I think there are many plugins that do what you want but if you want to create your own, it's a basic and simple solution.
You can create a select and a textbox with display:none like this:
<select id="ddlDropDownList">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="-1">Enter Value</option>
</select>
<input id="txtTextBox" type="text" />
<style>
#txtTextBox{
display:none;
}
</style>
then try this JQuery:
$("#ddlDropDownList").change(function(){
if($(this).val() == '-1'){
$("#txtTextBox").fadeIn();
}else{
$("#txtTextBox").fadeOut();
}
});
Check JSFiddle Demo
I have forked your JSFiddle to http://jsfiddle.net/pwdst/4ymtmf7b/1/ which I hope does what you wanted to achieve.
HTML-
<div class="ginput_container">
<label for="input_1_4">Select option</label>
<select class="medium gfield_select" id="input_1_4" name="input_4" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<div>
<label class="hidden-label" for="input_1_4_other">Other value</label>
<input class="holder" id="input_1_4_other" disabled="disabled" name="input_1_4_other" placeholder="None" type="text" />
</div>
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var $this = jQuery(this);
var val = $this.val();
var holder = $this.parent().find('.holder');
if (val === "*"){
holder.val('');
holder.removeAttr('disabled');
holder.focus();
} else {
holder.val(this.options[this.selectedIndex].text);
holder.attr('disabled', 'disabled');
}
});
When the "Enter value" option is chosen then the input box is enabled, value set to an empty string, and it is focused. If another option is chosen then the text input is disabled again, and the text value from the select list is used.
Thanks guys
I guess i have found my answer
HTML-
<div class="ginput_container">
<select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<input type="text" value="None" class="holder" >
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
jQuery(this).val("0"); // Change select value to None.
} else {
x.find('.holder').val(x.find('option:selected').text());
x.find('.holder').prop('disabled',true);
}
});
JS FIDDLE