I have a page that has several forms created using a while loop and each form has four selects. I am trying to work out how I can check each of the selects belonging to the current form (the one containing the button clicked) to confirm if any been selected. All of the forms are wrapped in a single div called #audit_content.
The intention is to check that if the variable grade isn't a certain value then the script checks if any of the selects have been selected.
(The value $i is created during the while loop, used to uniquely identify each form)
the html
<form id="audit_form<? echo $i; ?>">
<select name="grade" class="grade<? echo $i; ?>">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<select>
<select name="patient" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="exposure" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="equipment" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="positioning" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" name="audit_submit" class="audit_submit audit_submit_btn ie7_submit" value="" />
<input type="hidden" class="form_id" value="<? echo $i; ?>" >
</form>
The JQuery
<script>
$(document).ready(function(){
$('#audit_content').on("click", ".audit_submit", function(){
var form_id = $(this).prev('.form_id').val();
var grade = $('.grade'+form_id).val();
if(grade != 1){
$('select.reason_select').each(function(){
alert($(this).text())
}
});
</script>
The script as it is displays the values of every select with the class reason_select on the page which I realise is because I haven't told it to check a specific form, thats the bit I'm stuck at.
button shown is outside the form, not inside as mentioned.
To isolate any repeating type widget look for the parent of that widget, then search only within it:
Moving the button inside the form would make it very easy by doing:
$('#audit_content').on("click", ".audit_submit", function () {
var form=$(this).closest('form')
var selects=form.find('select');
// do somthing with selects
})
I would change the script to
<script>
$(document).ready(function () {
$('#audit_content').on("click", ".audit_submit", function () {
var form = $(this).prev('form');
var grade = $('select[name="grade"]', form).val();
if (grade != '1') {
$('select.reason_select', form ).each(function () {
alert($(this).text());
});
}
});
});
</script>
In the script you have posted there are several missing ) and } so it should create syntax errors..
You mention
current form (the one containing the button clicked)
but your button is not contained in the form, that is why i changed the code to form = $(this).prev('form')
Related
I have a select option for a quantity that I want to make it hide and show depending on the value. Quantities are from 1 to 4, when the option value is "more" the select element will hide then the input name="quantity-input" will show up so you can type manually quantity you like from 1 to 50.
<input type="number" name="quantity-input" id="qty-input" hidden>
<select name="quantity-select" id="qty-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>
i'm using jquery to make selectors easier. let me know at the comment section if something doesn't work as you want.
$('.QuantSelect_').change(function(){
const QuantSelect_ = $(this);
const QuanMoreIn_ = QuantSelect_.parent().find('.QuanMoreIn_').eq(0);
const switchInput = QuantSelect_.parent().find('.switchInput_').eq(0);
let selected_ = QuantSelect_.val();
if( selected_ === 'more' ){
QuantSelect_.hide();
QuanMoreIn_.show().focus();
switchInput.show().click(function(){
QuantSelect_.toggle(); QuanMoreIn_.toggle();
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="QuanForm">
<input class="QuanMoreIn_" type="number" name="quantity-input" placeholder="Enter the specific Number" style="display:none;" />
<select class="QuantSelect_" name="quantity-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>
<button class="switchInput_" style="display:none;">switch</button>
</div>
You need an event-listener on select field which will mark the field hidden/disabled when More option is selected and make your input field visible.
document.getElementById('qty-select').addEventListener('change', event => {
const currentValue = event.currentTarget.value;
if (currentValue == 'more') {
event.currentTarget.setAttribute('disabled', true);
document.getElementById('qty-input').removeAttribute('hidden');
}
});
Please update html like below.
<input type="number" name="quantity-input" id="qty-input" hidden min="1" max="50">
<select name="quantity-select" id="qty-select" onclick="hideMe();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>
And add javascript function.
function hideMe() {
var selectBox = document.getElementById("qty-select");
if(selectBox.options[selectBox.selectedIndex].value == "more") {
document.getElementById("qty-select").style.display="none";
document.getElementById("qty-input").removeAttribute('hidden');
}
}
I have two select option buttons on single web page but on different tabs. I want to change the other one button value on change of any one button and assign it to some element like span in example code. All things are working perfectly but it just taking time to close dropdown when i am changing value. in firefox there is no problem
jsfiddle
My HTML Code
<select class="select one" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br><br><br>
<select class="select two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br><br><br>
<span class="value"></span>
JQuery
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function(){
lang = $(this).val();
$('span.value').text(lang);
if ($(this).hasClass('one')) {
$('.two').val($(this).val()).trigger('change');
}
else{
$('.one').val($(this).val()).trigger('change');
}
});
Thanks in advance
fixed jsFiddle demo
It's cause you're concurrently triggering changes. Cool that down, this is all you need:
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function () {
lang = this.value;
$('span.value').text(lang);
$('.select').val(lang);
});
You can try this instead:
var lang = $('.select.one').val();
$('.value').text(lang);
$('.select').change(function (e) {
$('.select').val(this.value);
$('.value').text(this.value);
});
The issue was .trigger() method, that was traversing up to the dom for lookup and setting the values to each elem again and again.
Check the updated fiddle.
I have web page with dynamically created Selects (dropdown), the web page created by shell CGI script:
while read line; do
textBoxValue=`printf "$line" | cut -d' ' -f1`
comboBoxValue=`printf "$line" | cut -d' ' -f2`
echo "
<div id="divId$start_id">
<input type="text" name="newTexdtBox$start_id" id="newTextBox" value='$textBoxValue' />
<select name="newComboBox$start_id" id="newComboBox" value="$comboBoxValue">
<option disabled>pls select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="9">all</option>
</select>
<a href='javascript:void(0)' onclick='return removeThisElement($start_id)'>Remove This</a>
</div>
<a href='javascript:void(0)' onclick='return getSelects()'>getSelects</a>
"
start_id=$((start_id+1))
count=$((count + 1))
done < my_conf
Each Select object has his own attribute value=$comboBoxValue. I would like to set this value attribute as selected when page loaded. Suggested solution is (http://snipplr.com/view/67752/set-default-value-for-select-dropdown-lists-using-value-attribute/) but it seems dont work because this.getAttribute("value") doesnot return anything.
How I can set Default Value for Select (dropdown list) by using value attribute?
try
<select name="newComboBox$start_id" id="newComboBox" value="$comboBoxValue">
<option value="" selected='selected'>pls select</option>
<option value="1">1</option>
If you want to solve it using jQuery
$(function(){
$('select[value]').each(function(){
$('option[value="' + $(this).attr('value') + '"]', this).prop('selected', true);
});
});
Demo: Fiddle
But the optimal solution will be to solve it using html markup itself. (I don't know cgi scripts), but something like
<select name="newComboBox$start_id" id="newComboBox">
<option disabled>pls select</option>
<option #if ($comboBoxValue == 1) { selected="selected"} value="1">1</option>
<option #if ($comboBoxValue == 2) { selected="selected"} value="2">2</option>
<option #if ($comboBoxValue == 3) { selected="selected"} value="3">3</option>
....
</select>
The solution http://snipplr.com/view/67752/set-default-value-for-select-dropdown-lists-using-value-attribute/ is working properly, I just forgot \ symbol when render function from Shell script (getAttribute(\"value\")).
This works fine (when rendering from CGI Shell script):
\$(document).ready(function() {
\$('select[value]').each(function(){
\$(this).val(this.getAttribute(\"value\"));
});
});
I have three identical drop downs. I want to select a value from drop1 and have that value excluded from drop2. Then the selections in drop3 should exclude 1 & 2. Any ideas?
<select name="drop1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="drop2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="drop3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
You can use change event and remove selected elements from the dom
$('select[name=drop1]').change(function() {
var drop2 = $('select[name=drop2]').empty().hide();
var exclude = $(this).val();
var size = $(this).children().length;
for (var i=0; i<size; ++i) {
if (i != exclude) {
drop2.append('<option value="' + i + '">' + i + '</option>';
}
}
});
if you have more complex example and you need value based explude you can create a clone.
var clone = $('select[name=drop2]').clone();
$('select[name=drop1]').change(function() {
var copy = clone.clone();
copy.find('option[value=' + $(this).val() + ']').remove().end();
$('select[name=drop2]').replaceWith(copy);
});
Depending on how comfortable you are with PHP, or AJAX you have two solutions.
If you are more comfortable with PHP you could have a user submit the data from one select form and then using if statements like
if $value != '1'{
echo '<option value="1">1</option>';
}
and do that for each field in the second form; then replicate that for the third form.
The smoother looking solution would be using AJAX to use a listener to see when a user clicks a field a java value is set as that field and using a similar "if then show" method on the java-script variable to hide the fields that contain that value in the other forms.
Also one of the easiest solutions would be allowing multiple-selections (Assuming you are ok with the look of using one form & the values between the forms are the same like the example you gave above)... That example being:
<select id="my_num" name="my_num" size="5" multiple="multiple" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
I have an external Javascript file and i am trying to alert the value of select tag.
My <select> code looks like this:
<select id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="vote" onclick="castvote();">
and the Javascript (which is external):
function castvote()
{
alert(document.vote.options[document.vote.selectedIndex].value);
}
But I get the error "document.vote is undefined".
Can someone help me with this.
Best
Zeeshan
If selecting by Id, you should use :
function castvote() {
var sel = document.getElementById("vote");
alert(sel.options[sel.selectedIndex].value);
}
Easy way, change your code so that your form field has a name attribute:
<select name="vote" id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="vote" onclick="castvote();">
Better way, change your javascript so it is retreiving the select box by its ID rather than through the document object:
function castvote() {
var mySelect = document.getElementById("vote");
alert(mySelect.options[mySelect.selectedIndex].value);
}