I am setting up a simpleCart(js) with some selectable options.
I need to show an alert if not all drop-downs meet some value, and also to block the "Add to cart" from adding items to the cart (if not all drop-downs have met some value)
This is as far as I manage, any help is highly appreciated .
The HTML
<p>
<div class="simpleCart_shelfItem">
<h2 class="item_name" style="display:none">TEST</h2>
<select id"sizeSelect" class="item_size">
<option value="nul">Please choose size</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xlbrain">Super brain</option>
</select>
<select id="shippingSelect" onchange="simpleCart.update();">
<option value="nul">Please choose shipping</option>
<option value="ups">UPS Standard 25€</option>
<option value="mail">Standard Mail 10€</option>
</select>
<select id"destiantionSelect" class="item_price">
<option value="nul">Please choose destination</option>
<option value="290.00">EU</option>
<option value="220.00">World</option>
</select></p>
<p><a class="item_add" onclick="selected()" href="javascript:;">Add to Cart </a></p>
</div>
The shipping cost added to the grand total
<script type="text/javascript">
simpleCart.shipping = function(){
if( $("#shippingSelect").val() == "nul" ){return 0;}
if( $("#shippingSelect").val() == "ups" ){return 25;}
if( $("#shippingSelect").val() == "mail" ){return 10;}
};
</script>
The alert
<script type="text/javascript">
function selected() {
var ddl = document.getElementById("shippingSelect","sizeSelect","destinationSelect");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue =="nul")
{ alert("Please choose one from all options")}
}
</script>
I changed the a button to a actual button and used jquery and binded the click event to check the option boxes, and return if they matched nul, also you have some missing = on your id's.
$('.item_add').click(function () {
if($('#sizeSelect').val().match(/nul/)) return alert("Please choose a size");
if($('#shippingSelect').val().match(/nul/)) return alert("Please choose shipping type");
if($('#destinationSelect').val().match(/nul/)) return alert("Please enter a destination");
});
http://jsfiddle.net/y2Cf9/
Related
I have this code i want to enabled or disable a certain select box for transaction.
I don't know what code is correct for this one hope you can lend me a hand.
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
<script type="text/javascript">
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
alert('I need to disable payment terms');
}
else{
alert('I need to enable payment terms');
document.getElementById("paymentterms").disable =='false';
}
}
</script>
Use this to remove attribute:
document.getElementById("paymentterms").removeAttribute("disabled");
You can use .removeAttribute() you can check it here
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
alert('I need to disable payment terms');
}
else{
alert('I need to enable payment terms');
document.getElementById("paymentterms").removeAttribute('disabled');
}
}
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
Thank you so much for the answer. I tried and test all your answer. It is quite impressive I finish it with your help. So i decided to paste the final code here.
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
<script type="text/javascript">
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
document.getElementById("paymentterms").disabled = true;
} else
{
document.getElementById("paymentterms").disabled = false;
}
}
</script>
My html form has the content below:
<form name="profile">
...
<select id="province" name="province">
<span id="provinceWarning" class="alert"></span>
<option value="">Select Province</option>
<option value="AB">Alberta</option>
...
In my javascript, I'm trying to grab the form's ID to show a message telling the user to choose something in the dropdownlist if they haven't chosen anything and pressed the submit button. The problem is that the javascript block returns undefined.
//validate the profile form
function validate(e){
e.preventDefault();
var valid=true;
if(document.profile.province.value == ""){
document.getElementById('provinceWarning').innerHTML="*Please choose a province*";
valid=false;
}
if(valid){
alert("Thank You!");
}
return valid;
};
You can't have a span tag inside a select tag. Browser while rendering this HTML would have stripped it off.
See the demo below (check in your browser's dev tools that browser is stripping off span tag while rendering)
<select id="province" name="province">
<span id="provinceWarning" class="alert"></span>
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
You need to put the span tag outside the select tag.
Try this, it comes down and reset once u select and submit.
function submit(){
if(!document.getElementById("province").value){
document.getElementById("provinceWarning").innerHTML="*Please choose a Province*";
valid=false;
}else{
document.getElementById("provinceWarning").innerHTML=""
valid=true;
window.alert("thank you")
}
}
<form name="profile">
<select id="province" name="province">
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
<span id="provinceWarning" class="alert"></span>
</form>
<button id="btnSubmit" onclick="submit();">Submit</button>
Problems:
1- You can not define span in select option then move it out of your select
2- To check select value you should getElementById("province") and then check the value
3- Testable code can be as below(You can change it as you want):
function func()
{
var ddl = document.getElementById("province");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == ""){
document.getElementById("provinceWarning").innerHTML="*Please choose a Province*";
valid=false;
}else{
alert("Thank You!");
}
}
<form name="profile">
<div>
<span id="provinceWarning" class="alert"></span>
</div>
<div>
<select id="province" name="province">
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
</div>
</form>
<button id="btnSubmit" onclick="func();">Click Me</button>
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 have a multiselect option. If i select Mahesh & Dilip both, I want to show a pop up message that you can not select both at a time. If I click Ok on pop up then I want to deselect ONLY these two. How to do this? Here is my code:
<select multiple="" name="playerNames" id="playerNames" class="">
<option value="">-- Select --</option>
<option value="4">Rakesh</option>
<option value="5">Suresh</option>
<option value="2">Mahesh</option>
<option value="6">Dilip</option>
<option value="1">Ramesh</option>
<option value="3">Dinesh</option>
</select>
<script type="text/javascript">
$('#playerNames').on('change',function(){
var selected = $('#playerNames:selected').map(function(){return $(this).val();}).get();
alert(selected.length);
if(jQuery.inArray("Mahesh", selected) !== -1){
var maheshSelected = true;
}
if(jQuery.inArray("Dilip", selected) !== -1){
var dilipSelected = true;
}
if(maheshSelected == true && dilipSelected == true){
var alertMessage = "You cannot choose Mahesh + Dilip. Please select either Mahesh or Dilip.";
alert(alertMessage);
if (confirm(alertMessage)) {
//code to deselect both
}
}
});
You can select the options using $('option:contains(Mahesh), option:contains(Dilip)') and deselect them using .prop('selected', false):
$('#playerNames').on('change', function(){
const selected = $('#playerNames :selected').map(function() {return $(this).text()}).get()
if (selected.includes('Mahesh') && selected.includes('Dilip')) {
alert('You cannot choose Mahesh + Dilip. Please select either Mahesh or Dilip.')
$('option:contains(Mahesh), option:contains(Dilip)').prop('selected', false)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="" name="playerNames" id="playerNames" class="">
<option value="">-- Select --</option>
<option value="4">Rakesh</option>
<option value="5">Suresh</option>
<option value="2">Mahesh</option>
<option value="6">Dilip</option>
<option value="1">Ramesh</option>
<option value="3">Dinesh</option>
</select>
Here's a cross-browser solution (works on Internet Explorer 9+):
$('#playerNames').on('change', function(){
var selected = $('#playerNames :selected').map(function() {return $(this).text()}).get()
if (selected.indexOf('Mahesh') > -1 && selected.indexOf('Dilip') > -1) {
alert('You cannot choose Mahesh + Dilip. Please select either Mahesh or Dilip.')
$('option:contains(Mahesh), option:contains(Dilip)').prop('selected', false)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="" name="playerNames" id="playerNames" class="">
<option value="">-- Select --</option>
<option value="4">Rakesh</option>
<option value="5">Suresh</option>
<option value="2">Mahesh</option>
<option value="6">Dilip</option>
<option value="1">Ramesh</option>
<option value="3">Dinesh</option>
</select>
I have a drop drown list and I am having trouble checking whether or not a value has been selected from the drop down list
Below is my HTML Code :
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br/>
Below is my JavaScript Code :
var card = document.getElementByName("cards")[0].value;
if (card.value == selectcard) {
alert("Please select a card type");
}
Well you missed quotation mark around your string selectcard it should be "selectcard"
if (card.value == selectcard)
should be
if (card.value == "selectcard")
Here is complete code for that
function validate()
{
var ddl = document.getElementById("cardtype");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "selectcard")
{
alert("Please select a card type");
}
}
JS Fiddle Demo
<script>
var card = document.getElementById("cardtype");
if(card.selectedIndex == 0) {
alert('select one answer');
}
else {
var selectedText = card.options[card.selectedIndex].text;
alert(selectedText);
}
</script>
You can check if the index of the selected value is 0 or -1 using the selectedIndex property.
In your case 0 is also not a valid index value because its the "placeholder": <option value="selectcard">--- Please select ---</option>
LIVE DEMO
function Validate()
{
var combo = document.getElementById("cardtype");
if(combo.selectedIndex <=0)
{
alert("Please Select Valid Value");
}
}
function check(selId) {
var sel = document.getElementById(selId);
var dropDown_sel = sel.options[sel.selectedIndex].text;
if (dropDown_sel != "none") {
state=1;
//state is a Global variable initially it is set to 0
}
}
function checkstatevalue() {
if (state==1) {
return 1;
}
return false;
}
and html is for example
<form name="droptest" onSubmit="return checkstatevalue()">
<select id='Sel1' onchange='check("Sel1");'>
<option value='junaid'>Junaid</option>
<option value='none'>none</option>
<option value='ali'>Ali</option>
</select>
</form>
Now when submitting a form first check what is the value of state if it is 0 it means that no item has been selected.
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />
<script>
var card = document.getElementById("cardtype");
if (card.options[card.selectedIndex].value == 'selectcard') {
alert("Please select a card type");
return false;
}
</script>
I believe this is the most simple in all aspects unless you call the validate function be other means. With no/null/empty value to your first option is easier to validate. You could also eliminate the first option and start with the most popular card type.
<form name="myForm">
<select id="cardtype" name="cards">
<option value="">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />
<input type="submit" name="submit" class="button" value="SUBMIT" onmouseover="validate()"></form>
<script>
function validate() {
if (document.myform.cards.value == "") {
alert("Please select a card type");
document.myForm.cards.focus();
}
</script>
function checkSelected() {
if (optionsId.selectedIndex < 0) {
alert("Please select an item from options");
return false;
}}
Select select = new Select(_element);
List<WebElement> selectedOptions = select.getAllSelectedOptions();
if(selectedOptions.size() > 0){
return true;
}else{
return false;
}