I am building a reminder application with Phonegap using JS, HTML and CSS, the screen currently have a "Taken" button, when user clicks it, it will display a list of the medications the user is taking in a checkbox format, so user can choose which medication they have taken. Here's the JS code:
function show(){
document.getElementById("zero").style.display = "inline-block";
document.getElementById("aa").style.display = "inline-block";
}
function hide() {
document.getElementById("zero").style.display = "none";
document.getElementById("aa").style.display = "none";
}
function validate() {
var msg = [];
[].forEach.call(document.querySelectorAll('input[type="checkbox"]:not(:checked)'), function(elem, index) {
msg.push(elem.name);
});
alert(msg.length ? 'Why didnt you take ' + msg.join(' and ') : 'Well done you have taken all medications!');
}
function showDiv(){
document.getElementById('welcomeDiv').style.display = "block";
}
And here's the HTML:
<div class="inner" id=text><button onClick="show()">Taken</button>
</div>
<div id=aa style="display:none">
<form>
<input type="checkbox" name="Medication One" value="one">Supplement One<br>
<input type="checkbox" name="Medication Two" value="two">Supplement Two<br>
<input type="checkbox" name="Medication Three" value="three">Supplement Three<br>
<div id="welcomeDiv" style="display:none;" class="dropdown" title="Basic dialog">
<select>
<option value="" disabled="disabled" selected="selected">Please choose one</option>
<option value="forget">Forget to take</option>
<option value="notfeeling">Not feeling like taking it</option>
<option value="sideeffect">Worried about side-effects</option>
<option value="sideeffect">Run out of supplements</option>
<option value="others">Others</option>
</select>
<input type="submit" onClick="hide()" value="Submit">
</div>
<input id=xbutton type="button" onClick="this.style.display='none';validate();showDiv()" value="Submit">
</form>
</div>
So now when the user selects the reason as to why they didn't take at least one of their medication, an alert will display saying "Why didn't you take (medication name) /and (medication name)?" and a drop down box will display allowing user to choose the reason. However what I want to do is that if the user checked all checkboxes (meaning they have taken all medications), then the dropdown box will not appear, just an alert displaying "Well done you have taken all medications".
And I am not sure how to integrate that into my code, any help will be appreciated.
With some of the same code you wrote you can tell if all the inputs are checked:
if(document.querySelectorAll('input[type="checkbox"]:not(:checked)').length==0) {
alert("well done");
}
Related
I recently came across a situation where I was working on a huge form with atleast 60 fields and I wanted that form to only submit if all fields were filled and if not, I wanted to show a custom message (Sweetalert) for every field not filled.
For example, If first name was left empty, show the message "Please enter your first name", If country of residence was not selected, show them the message that "Please select your country of residence" so on and so forth.
While I was writing tons of if and else statements to match every field using document.getElementById(), this thought of not doing things right came into my mind. I tried searching the web for this but was unable to find a suitable way of doing such things. Can anyone suggest me a better way rather then writing if else statements of 100 lines ?
By adding a specific class to your form controls you'd be able to retrieve them and iterate through them in order to check which ones are not filled.
Let's say this is your form:
<form id="myForm" name="myForm" novalidate>
<div>
<label for="control_1">Label_1:</label>
<input type="text" id="control_1" name="control_1" class="control" />
</div>
<div>
<label for="control_2">Label_2:</label>
<input type="text" id="control_2" name="control_2" class="control" />
</div>
<div>
<label for="control_3">Label_3:</label>
<input type="text" id="control_3" name="control_3" class="control" />
</div>
<div>
<label for="control_4">Label_4:</label>
<select id="control_4" name="control_4" class="control">
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
</select>
</div>
<div>
<input type="submit" value="Submit!" />
</div>
</form>
Then you can use the .control class to retrieve all controls and check them:
function onSubmit(e) {
e.preventDefault();
const controls = document
.getElementById("myForm")
.querySelectorAll(".control");
controls.forEach(control => {
if (!isControlFilled(control)) {
console.log(control.id);
// Do whatever you want with control's id
}
});
}
// This is just for illustrative purposes
// Should be adapted to cover all control types
function isControlFilled(control) {
return control.value ? true : false;
}
so I am trying to display a div if user select a specific option value from a select drop down list. for example, if the user selects "trade" in the select box then the div with the company name should come up while the div containing the "first name and last name" should disappear. and If the user selects the "customer" in the select box then the the opposite should happen. Here is my code
Javascript
var custDetails = document.getElementById('retCustDetails');
var tradeDetails = document.getElementById('tradeCustDetails');
var SelectMenu = document.getElementById('makeBooking');
if (makeBooking.value == trd) {
document.getElementById('tradeDetails').style.display = 'block';
document.getElementById('custDetails').style.display = 'none';
}
else {
document.getElementById('custDetails').style.display = 'block';
}
HTML
<section id="makeBooking">
<h2>Make booking</h2>
Your details
Customer Type:
<select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename">
Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
Company Name <input type="text" name="companyName">
</div>
You should be using an if / else if to handle the different values that the user could select - this also allows you to hide all the divs by default, if no valid selection is picked
You can use .addEventListener('change', function ()) on your Select element to call a function every time the value is updated, and then you can use this.value inside the function to access the selected element's value
Also, be sure that you're wrapping strings with ' or " - You were using makeBooking.value == trd, which is checking for a variable called trd, not the String 'trd' as you were aiming for
Finally, You could hide your divs by default using CSS, so that only the correct div is showing when selected
.custDetails {
display: none;
}
var custDetails = document.getElementById('retCustDetails');
var tradeDetails = document.getElementById('tradeCustDetails');
var SelectMenu = document.getElementById('makeBooking');
document.querySelector('select[name="customerType"]').addEventListener('change', function() {
if (this.value == 'trd') {
custDetails.style.display = 'none';
tradeDetails.style.display = 'block';
} else if (this.value == 'ret') {
custDetails.style.display = 'block';
tradeDetails.style.display = 'none';
} else {
custDetails.style.display = 'none';
tradeDetails.style.display = 'none';
}
});
.custDetails {
display: none;
}
<section id="makeBooking">
<h2>Make booking</h2>
Your details Customer Type:
<select name="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails">
Forename <input type="text" name="forename"> Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails">
Company Name <input type="text" name="companyName">
</div>
First, you had different names in your JavaScript than you had as ids in your HTML. You were also trying to work with the section element instead of the select element.
After that, you need to set up an event handling function to handle when the select gets changed.
Also, instead of working with inline styles. It's much simpler to set up a CSS class and then just add or remove it.
Finally, don't use an HTML heading element (h1...h6) because of the formatting applied to it. Formatting is done with CSS. Choose the right heading because it makes sense. You can't have the first heading in a section be an h2 because and h2 is for a subsection of an h1. The first heading in any section should always be h1.
See comments inline:
var custDetails = document.getElementById('retCustDetails');
var tradeDetails = document.getElementById('tradeCustDetails');
// You must get a reference to the <select> element
var selectMenu = document.getElementById('customerType');
// Then, you must configure a JavaScript function to run as a "callback"
// to a specific event that the <select> element could trigger:
selectMenu.addEventListener("change", function(){
// The value of the select will be a string, so you must wrap it in quotes
if (selectMenu.value == "trd") {
// Now, just add or remove the pre-made CSS class as needed.
tradeDetails.classList.remove("hidden");
custDetails.classList.add("hidden");
} else {
tradeDetails.classList.add("hidden")
custDetails.classList.remove("hidden");
}
});
.hidden { display:none; }
<section id="makeBooking">
<h1>Make booking</h1>
Your details<br>
Customer Type:
<select name="customerType" id="customerType">
<option value="">Customer Type?</option>
<option value="ret">Customer</option>
<option value="trd">Trade</option>
</select>
<div id="retCustDetails" class="custDetails hidden">
Forename <input type="text" name="forename">
Surname <input type="text" name="surname">
</div>
<div id="tradeCustDetails" class="custDetails hidden">
Company Name <input type="text" name="companyName">
</div>
</section>
I am trying to get a paragraph with some text and a textbox to show up when a certain option in the dropdown select menu on my form is clicked. Similar code worked for radio buttons, but doesn't seem to in this case. I would really appreciate any help that I can get on this. jsfiddle
HTML:
<select name="select1">
<option value="doctor" id="doctor1">Doctor</option>
<option value="nurse" id="nurse1">Nurse</option>
<option value="other" id="other1">Other</option>
</select>
<div class="otherprof">
<p>Please list your profession:
<input type="text" name="otherproftext" id="otherproftext" maxlength="20">
</p>
</div>
jQuery:
$(document).ready(function () {
$(".otherprof").hide();
$("#other1").click(function () {
$(".otherprof").show();
});
$("#doctor1").click(function () {
$(".otherprof").hide();
});
$("#nurse1").click(function () {
$(".otherprof").hide();
});
});
Idea is that the textbox stays hidden until users click on "Other" in the dropdown, which in turn is supposed to display the textbox immediately.
You need to use the onchange event on the select, not click on the options.
$("[name='select1']").on("change", function(){ //listen for change event on the select
$(".otherprof").toggle(this.value==="other"); //toggle show/hide based on selected value
}).change(); //trigger the change event so default value is checked
JSFiddle
Add the style attribute to the div otherprof and it will be hidden initially
<select name="select1">
<option value="doctor" id="doctor1">Doctor</option>
<option value="nurse" id="nurse1">Nurse</option>
<option value="other" id="other1">Other</option>
</select>
<div class="otherprof" style="display:none;">
<p>Please list your profession:
<input type="text" name="otherproftext" id="otherproftext" maxlength="20">
</p>
</div>
I have a radio box and search-bar with a select box with two option values.
<td>
<label for="requireDate"><input type="radio" id="date" value="requireDate" name="date" checked="checked"/>START DATE</label>
<label for="finishDate"><input type="radio" id="date" value="finishDate" name="date" />END DATE</label>
</td>
. . .
<tr>
<th>search word</th>
<td>
<select name="selectOp" id="selectOp">
<option value="clipNo">CLIP NUMBER</option>
<option value="tapeNo">TAPE NUMBER</option>
</select>
<span class="br">
<input type="text" id="searchWord" name="searchWord"/>
</span>
</td>
</tr>
Based on this code, two different Ajax function will be called when clicked on SEARCH button. I got the part done where it functions based on radio button.
But when it adds the function with search bar with two select options, I can't figure it out how to do it.
Following is the part I got it done with Radio button selection.
<script type="text/javascript">
$('#search').click(function() {
if($(':radio[name=date]:checked').val() == 'requireDate'){
CommonUtil.ajaxPagingSubmit('<c:url value="${innovativepot}/encodeMng/encodeListAjaxSubscDtm" />', 1, $('#frm').serialize(), 'content');
} else if($(':radio[name=date]:checked').val() == 'finishDate'){
CommonUtil.ajaxPagingSubmit('<c:url value="${innovativepot}/encodeMng/encodeListAjaxcpltSubscDt" />', 1, $('#frm').serialize(), 'content');
}
});
</script>
For instance, if I select the radio button with "requireDate", then clip number in the option, then write "777" in search bar then click on the search button.
Then it should show a data that has "777" in its clip number that was called by radio button with "requireDate".
Can anyone help?
Instead of:
$('#date').val()
do:
$(':radio[name=date]:checked').val()
that's it.
The problem is that your old query always got the first radiobutton, no mattering if it was selected or not.
Cheers
I have a small form.
Two select box elements and a submit button.
The select box elements collectively when selections are chosen, fire off an ajax request.
What I want to do is, disable the submit button UNTIL user has made selections from the select drop downs.
They must make a selection from BOTH select drop downs, before the Submit button is enabled.
I dont mind if the submit button is hidden until selections made.
Brief Code:
<form id="ad_form" method="post" action="">
<p>
<select id="ad_type" name="ad_type">
<option value="" selected="selected">Select premium ad type</option>
<option value="<?php echo TYPE_USER;?>">Featured Agent</option>
<option value="<?php echo TYPE_LISTING;?>">Featured Listing</option>
</select>
<label for="ad_type" class="labelStrong">Advertising Type</label>
</p>
<p>
<select id="ad_duration" name="ad_duration">
<option value="" selected="selected">Select premium ad duration</option>
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthy</option>
</select>
<label for="ad_duration" class="labelStrong">Advertising Duration</label>
</p>
<p>
<div id="calender">
</div>
</p>
<p>
<input type="submit" name="submit" value="Submit" id="submitorder" />
</p>
</form>
Here's a demo that seems to do what you want:
http://jsfiddle.net/Yr59d/
That javascript code would go in a $(document).ready() block
$(function() {
$("#submitorder").css("visibility", "hidden");
$("#ad_form select").bind("change", function() {
if ($("#ad_type").val().length > 0 && $("#ad_duration").val().length > 0) {
$("#submitorder").css("visibility", "visible");
} else {
$("#submitorder").css("visibility", "hidden");
}
});
});
If you give all your selects a common class name (like 'required') , you can do something like this:
$('select.required').change(function() {
var total = $('select.required').length;
var selected = $('select.required option:selected').length;
$('#submitorder').attr('disabled', (selected == total));
});
This is not tested code. This documentation might help. This jquery discussion might help too.
Gah, I'll have to agree with Kon on this one - fix-now-worry-about-it-later answers have their place but an elegant solution that is simple at the same time has to be the way to go.
My solution: (with credit from a thread at: JQuery Enable / Disable Submit Button in IE7)
$('select.required').change(function() {
var total = = $('select.required').length;
var selected = $('#ad_form').find("select.required option[value!='':selected").length;
$('#submitorder').prop('disabled', (selected != total));
});
Incidentally, thanks ctcherry for demoing the code on the JSFiddle site - I've not seen that before and will make use of it in the future!
Use listeners on both select buttons for change and check whether the other is also set. If set, enable the submit button.