I am new to jquery, am working on small task. I'm trying to find closest textarea attribute id but get undefined.
<div class="input-label-f">
<div class="select2-wrap">
<select class="variables_select" name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<div class="input-box">
<textarea id="email_admin_textarea" class="input-field"></textarea>
</div>
$('.variables_select').change(function(){
var input = $(this).closest('textarea').attr('id');
});
you need to add both select and textarea in same div for reference
$('.variables_select').change(function(){
var input = $(this).closest('.input-label-f').find('textarea').attr('id');
console.log(input);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-label-f">
<div class="select2-wrap">
<select class="variables_select" name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="input-box">
<textarea id="email_admin_textarea" class="input-field"></textarea>
</div>
</div>
Related
How to open a web page consisting of values submitted to the selection manu, please?
For instance, Saab, Volvo, and Audi are chosen. After clicking OK, I want to open another HTML page with the chosen words. Thank you
<!DOCTYPE html>
<html>
<body>
<h1>CAR</h1>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<input type='submit' value='OK'>
// After clicking OK, href consisted of choosen values is open
<p>Open</p>
</body>
</html>
I think if you wrap your html in a Form element it should work.
And also make sure you add a target parameter to the form element:
target="_blank"
An example:
<h1>CAR</h1>
<form
target="_blank"
action="https://www.lipsum.com"
method="get"
>
<label for="car1">Choose a car 1:</label>
<select id="car1" name="car1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="car2">Choose a car 2:</label>
<select id="car2" name="car2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<label for="car3">Choose a car 3:</label>
<select id="car3" name="car3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br><br>
<input type='submit' value='OK'>
</form>
How do you get the values
To get the values back from the URL, use window.location.search.
An example:
const searchQuery = window.location.search;
/* '?car1=Volvo&car2=Audi' */
const values = searchQuery.split('?').pop().split('&').map(query => query.split('=').pop());
/* ['Volvo', 'Audi'] */
I have three dropdowns in my page, two of them are shown perfectly while the other one is not appearing, and when looking at the element in page it gets loaded with the "style="display: none;" value even if I'm forcing it with style="display: inline;".
Here's the code:
<div class="dropdown">
<div id="myBrokenDropdown" class="dropdown-content">
<select class='filter' id="notWorkingOne">
<option value=""> Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<!--select button-->
<div id="select1" class="dropdown-content">
<select class='filter' id="select1Works" data-col="1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<div id="select2" class="dropdown-content">
<select class='filter' id="select2Works" data-col="5">
<option value=""> Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
</div>
Also, in jquery I can hide/Show the two dropdowns with the following code:
$('#select1Works').hide();
$('#select2Works').hide();
$('#notWorkingOne').hide();
$(document).ready(function() {
$("input[type='radio']").on('change', function() {
$("#select1Works").toggle($("[name=radioButton]").index(this) === 0);
$("#select2Works").val("").trigger("change");
$("#select2Works").toggle($("[name=radioButton]").index(this) === 1);
$("#select1Works").val("").trigger("change");
if ($('#select1Works').is(':visible') || $('#select2Works').is(':visible')) {
$('#notWorkingOne').show();
}
})
});
Why is the "myBrokenDropdown" not showing?
Thank you very much
It was an issue with a selector in my actual code, I missed a '#'.
div{
padding: 10px;
}
<div>
Occupation: <select name="occupation">
<option value="student1">Student (high school or less)</option>
<option value = "student2">University student</option>
<option value = "unemployed">Unemployed</option>
<option value="intern">Internship</option>
<option value="full-time">Full Time Job</option>
<option value="retired">In Retirement</option>
</div>
<div>
What do you like the most about our product? <select name="likes">
<option value="look">The Look</option>
<option value="functionality">Functionality</option>
<option value="usefulness">Usefulness</option>
<option value="users">Other Users</option>
</div>
I'm not sure what I'm doing wrong and why is the first select box working and the other one isn't
This is what it looks like:
You should close your div and select tags.
div{
padding: 10px;
}
<div>
Occupation: <select name="occupation">
<option value="student1">Student (high school or less)</option>
<option value = "student2">University student</option>
<option value = "unemployed">Unemployed</option>
<option value="intern">Internship</option>
<option value="full-time">Full Time Job</option>
<option value="retired">In Retirement</option>
</select>
</div>
<div>
What do you like the most about our product? <select name="likes">
<option value="look">The Look</option>
<option value="functionality">Functionality</option>
<option value="usefulness">Usefulness</option>
<option value="users">Other Users</option>
</select>
</div>
</div>
You are missing the closing tag of your first <select>:
div{
padding: 10px;
}
<div>
Occupation:
<select name="occupation">
<option value="student1">Student (high school or less)</option>
<option value = "student2">University student</option>
<option value = "unemployed">Unemployed</option>
<option value="intern">Internship</option>
<option value="full-time">Full Time Job</option>
<option value="retired">In Retirement</option>
</select> <!-- was missing -->
</div>
<div>
What do you like the most about our product? <select name="likes">
<option value="look">The Look</option>
<option value="functionality">Functionality</option>
<option value="usefulness">Usefulness</option>
<option value="users">Other Users</option>
</div>
Hey guys so I am trying to create a quick search with the boxes. I thought I could just put in some tags but does not work so I was wondering how I would go about doing this?
Here is my code:
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option value="Microphones">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div><!-- END #advancesearch -->
Why don't you use JavaScript window.location?
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option value="Microphones" onclick="window.location='http://www.google.com'">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
Or create a function
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option></option>
<option value="Microphones" onclick="redirect_me('http://www.google.com');">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
<script>
function redirect_me(re_link) {
window.location = re_link;
}
</script>
Is it possible to force/require a user to make a selection from a drop down menu?
Example:
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
By default "Volvo" is selected. What I want is for the browser to know that the user has made a selection and not accept the auto default.
I am thinking something like this:
<form action="">
<select name="cars" required="required">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Any advice?
A lot of time has passed since the question was posted.
For anybody stumbling over this like I did, the solution became a lot simpler by now:
You can just add a first option to the selection, with no value set.
The browser will automatically treat this like "nothing was selected":
<!DOCTYPE html>
<html>
<body>
<form>
<select required>
<option value="">Please select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
JSFiddle showing it work with no further JS required: https://jsfiddle.net/nrs5a7qh/
I tweaked an example from jquery validate to get this working for you. I know in your original question you asked for it to be based in HTML5 but maybe this blended example is acceptable.
http://jsfiddle.net/36MkJ/
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#carsForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="carsForm" method="get" action="">
<select name="cars" class="required">
<option value="">Select a car</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
Original Example was on http://docs.jquery.com/Plugins/Validation