Hey guys :) I have a little form that is giving me troubles
This is my code
<div class="unit">
<label class="input select">
<select name="position">
<option value="none" selected disabled="">Choose desired position</option>
<option value="tech lead">Tech Lead</option>
<option value="product manager">Product Manager</option>
<option value="senior developer">Senior Developer</option>
<option value="system administrator">System Administrator</option>
</select>
<i></i>
</label>
</div>
Now I want my Java to (after submission of form) redirect to links depending on which option was selected, is that even possible?
I use this to redirect and it works fine
$(location).attr('href, 'http://example.org')
thanks for your attentiom
To redirect to another url based on select option
$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if(valueSelected === "tech lead")
window.location = "http://www.yoururl1.com";
else if(valueSelected === "product manager")
window.location = "http://www.yoururl2.com";
.........
});
Related
I have a form with the following dropdown selection menu in HTML:
<div class="input-field col s4">
<select id="disposition" required>
<option value="No_Sale" id="noSale">No Sale</option>
<option value="Sale" id="yeahSale">Sale</option>
<option value="Unreachable" id="noContact">Unreachable</option>
<option value="Call_Back" id="callBack">Call Back</option>
</select>
<label>Disposition</label>
</div>
The above snippet for dispositions should affect whether or not other form elements are disabled. However, I cannot seem to get the value to change on user input.
Here is the javascript with jQuery:
$(document).on('change', 'select', function(){
console.log(disposition);
console.log($("#yeahSale").selected == true);
if ($("#yeahSale").selected == true) {
$("#fund").removeAttr('disabled');
}
});
For both $("#disposition").val() and $("#yeahSale").selected, the console.log returns
"No_Sale"
and false when I click on the form element and select
"Sale."
The first thing I tried was:
if (disposition == "Sale")
I have also tried:
var disposition = $("#disposition").find(":selected").text();
I've been searching stack exchange and google for answers for almost an hour but I haven't any success so far. My apologies if I just completely missed an extant question that's already been solved.
Thanks for your help!
$("#disposition").val() gives you the value of selected option.
So you simply want to put condition according to the value you got selected.
$(document).on('change', '#disposition', function(){
/*
If you want to put condition based on
option with specific id is selected or not then
if($("#yeahSale").is(':selected')) {
}
*/
if ($("#disposition").val() == 'Sale') {
// Do here what you want to do
// $("#fund").removeAttr('disabled');
console.log("Sale Selected");
} else {
console.log("Selected Option is: "+ $("#disposition").val());
}
//Get Id attr of selected option
console.log("Id of selected option is: " + $(this).find('option:selected').attr('id'));
// Check weather option with specific Id is selected or not:
console.log($("#yeahSale").is(':selected'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s4">
<select id="disposition" required>
<option value="No_Sale" id="noSale">No Sale</option>
<option value="Sale" id="yeahSale">Sale</option>
<option value="Unreachable" id="noContact">Unreachable</option>
<option value="Call_Back" id="callBack">Call Back</option>
</select>
<label>Disposition</label>
</div>
If you want to get id attribute of selected option you can use this
$(this).find('option:selected').attr('id')
If you want to see option with ID yeahSale is selected or not than try this:
$("#yeahSale").is(':selected')
<div class="input-field col s4">
<select id="disposition">
<option value="No_Sale">No Sale</option>
<option value="Sale">Sale</option>
<option value="Unreachable">Unreachable</option>
<option value="Call_Back">Call Back</option>
</select>
<label>Disposition</label>
</div>
<script>
$(document).on('change', function(){
alert($("#disposition").val());
console.log($("#yeahSale").selected == true);
if ($("#yeahSale").selected == true) {
$("#fund").removeAttr('disabled');
}
});
tested and found it working
var disposition = $('#disposition').val();
$('#disposition').change(function() {
disposition = $(this).val();
console.log(disposition);
}
All you need is disposition.value and an onchange event.
The script below will acknowledge user input and return the updated disposition.value whenever a new selection is made:
var disposition = document.getElementById('disposition');
disposition.addEventListener('change', function(){console.log(disposition.value);}, false);
<select id="disposition" required>
<option value="No_Sale">No Sale</option>
<option value="Sale">Sale</option>
<option value="Unreachable">Unreachable</option>
<option value="Call_Back">Call Back</option>
</select>
I'm trying this for a while now, searched everywhere here and on other sites.
I found some sort of a solution here http://jsfiddle.net/zszqs/
but when I try it on my code, on my actual page, it just doesn't work. It does in the example website tho, if I change all the code to mine.
<input name="documenttype" type="radio" required id="dType1" value="Pro-Forma">Pro-Forma
<input name="documenttype" type="radio" required id="dType2" value="Invoice">Invoice
<select name="paymentmethod" required id="paymentmethod">
<option value="" default selected>Select...</option>
<option value="TT">Online Bank Transfer</option>
<option value="PP">PayPal</option>
<option value="CC">Credit Card</option>
</select>
basically I want to remove the Credit Card option when the radio Pro-Forma option is selected, or bring it back again if user changes radio to Invoice...
<script>
var option = '<option value="CC">Credit Card</option>';
$('input[name=documenttype]').change(function() {
var $select = $("#paymentmethod");
if (this.id == 'dType1') {
$select.find("option[value='CC']").remove()
} else if (!$select.find("option[value='CC']").length) {
$select.append(option)
}
})
</script>
I feel like I'm not charging the code on page load, or something like this.
I'm totally new to jquery so I may have missed like, I don't know, where to put the <script> (head or body?) or if I have to specify some onLoad option.
script code with jquery
$(document).ready(function ()
{
$(".documenttype").click(function ()
{
$("option[value='CC']").css("display", $('#dType1').is(":checked") ? "none" : "block");
});
});
HTML Code
<input class="documenttype" name="documenttype" type="radio" required id="dType1" value="Pro-Forma">Pro-Forma
<input class="documenttype" name="documenttype" type="radio" required id="dType2" value="Invoice">Invoice**
<select name="paymentmethod" required id="paymentmethod">
<option value="" default selected>Select...</option>
<option value="TT">Online Bank Transfer</option>
<option value="PP">PayPal</option>
<option value="CC">Credit Card</option>
</select>
In my registration page, I'm gonna use two drop-down select that one of them should be hidden if its Negative and if its positive new drop-down will open to choose ...
In mysql table I've table as diabetes name with enom
enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')
Here's my code:
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
For example: If Diabetes is negative value is negative as default then Diabetes Type is hidden
and
If Diabetes is positive then Diabetes type will be appeared to choose items.
those values like insulin, drug, mdm, mody should be inserted into this:
value="positive"
How can I make it through java script?
I can't add class or div or span. Is it possible just through JavaScript using ??
Thank you so much
Use jquery, it is comparatively easier.
$(document).ready(function(){
$("#diabetestype").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").show();
}else{
$("#diabetestype").hide();
}
});
});
To make this code workable, you need to add value of Positive option also. So instead value="" change it to value="positive".
You can even hide the label also:
$(document).ready(function(){
$("#diabetestype").closest("div").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").closest("div").show();
}else{
$("#diabetestype").closest("div").hide();
}
});
});
<div><label for="diabetes">Diabetes:</label>
<select id="diabet" name="diabet" onchange="checkDiabet();">
<option value="negative">Negative</option>
<option value="positive" id="isDiabet">Positive</option>
</select>
</div>
<div id="type" style="display: hidden;">
<label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
<script>
function checkDiabet() {
var isDiabet = document.getElementById("isDiabet").selected;
if (isDiabet == true) { document.getElementById("type").removeAttribute("style"); }
else { document.getElementById("type").style.display = "none"; }
}
</script>
First, set the first select to fire the function checkDiabet() by the attribute onchange. Then give the option an id, which needs to be checked, so you can access it easily.
Then, set the second select to display: none This could be done in a CSS header or file, or like in this case inline. (div style=""), also add an id to access it easily. (div id="type")
Now comes the function checkDiabete(). It checks if the select is selected (can be true or false (bool)). Is selected => show (div id="type"), if not, hide this div (and all of it's contents)
(if is already hidden, it then overwrites the (style="display: none;") with (style="display: none;))
That's it! :)
Try this:
function SelectDiabetes() {
var d = document.getElementById("diabetes").value;
var dType = document.getElementById("diabetestypebox");
if(d == "negative")
dType.style.display = "none";
else
dType.style.display = "block";
}
SelectDiabetes();
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="SelectDiabetes(this.value);">
<option value="negative">Negative</option>
<option value="positive">Positive</option>
</select>
</div>
<div id="diabetestypebox"><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Call a js function onchange of select id diabetes
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="toggleTypes()">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" style="display:none" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Use the following javascript
function toggleTypes(){
var el=document.getElementById('diabetes');
var medElem=document.getElementById('diabetestype');
if(el.value=='positive') {
medElem.style.display='block';
} else {
medElem.style.display='none';
}
}
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
I'm trying to update the value of a select input when I change the value of another select input. I cannot get anything to happen on the page and want to make sure I don't have a syntax error or some other dumb thing in this code.
<div class="group">
<div class="inputs types">
<strong style="font-size:13px;">Category:</strong>
<select name="id" id="ctlJob">
<option value="1">Automotive</option>
<option value="2">Business 2 Business</option>
<option value="3">Computers</option>
<option value="4">Education</option>
<option value="5">Entertainment & The Arts</option>
<option value="6">Food & Dining</option>
<option value="7">Government & Community</option>
<option value="8">Health & Beauty</option>
<option value="9">Home & Garden</option>
<option value="10">Legal & Financial Services</option>
<option value="11">Professional Services</option>
<option value="12">Real Estate</option>
<option value="13">Recreation & Sports</option>
<option value="14">Retail Shopping</option>
<option value="15">Travel & Lodging</option>
</select>
<select name="type" id="ctlPerson"></select>
</div>
</div>
<script>
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
$('#ctlPerson').html('<option value="123">ascd</option>');
});
});
</script>
Try using append instead:
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
var ctl = $('#ctlPerson').append('<option value="123">'+val+'</option>')[0].options;
ctl.selectedIndex = ctl.length-1;
});
});
http://jsfiddle.net/J69q8/
I think you also need to set the 'selected' property. Add
$('#ctlPerson option[value="123"]').attr('selected', 'selected');
to the end of the script. You are currently adding the option to the select list, but are not changing the select list to show it.
<div id="test">
<select name="sel" id="sel">
<option name="1" id="1" value="1">Automotive</option>
<option name="2" id="1 value="2">Business 2 Business</option>
<option name="3" id="1 value="3">Computers</option>
</select>
<select name="sel2" id="sel2"></select>
</div>
<script>
$("#sel").change(function() {
var val = $(this).val();
$('#sel2').html('<option value="1">NEW</option>');
)};
</script>
this works fine for what you need to do.
it's something like what you have