I have a field called Block material which needs to be a mandatory field, so i wrote a condition to notify user to select the value from dropdown. I would like to highlight this field when it gives an alert. How do i do this? The below code doesnt work for dropdown but works for a text field.
var blockMaterial = document.getElementById("BLOCK_MATERIAL");
if (blockMaterial.value == "") {
$("#STATUSDIVID").removeAttr('class').addClass('div-error').html("Please select an option from the Block Material dropdown");
$("#testingDynoForm #BLOCK_MATERIAL").css("background-color","#F6CED8");
$(window).scrollTop(0);
}
Try
if(blockMaterial.options[blockMaterial.selectedIndex].value == "") {
// your code
}
Related
I am using contact form 7 plugin for my carrier form. Right now i am hide/show some field using Select option values using java script.
Example:
IF First select box option value is (i) Faculty then display another Second select option field and if in First select box user select other options then hide second select options fields.
For this please see this screen shot -> http://nimb.ws/uxHNjy
For this i have used following JS:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#subject_forpost").hide();
});
</script>
<script type="text/javascript">
jQuery(".career_postapplied").change(function(){
var value = this.value;
if (value == "(i) Faculty"){
jQuery("#subject_forpost").show();
}
else
{
jQuery("#subject_forpost").hide();
}
});
</script>
Above JS works good for me. But i have facing one issues in email body. When user select "(i) Faculty " options and then in second select option select any subject and again if user change their mind and in First select option select other options then second select options field hide. That's good but when admin received that mail then in email body also display Second select options values.
This one is issues. So How can i clear second select options value before form mail send if user change their mind and select other options in First select option field.
Thanks.
I have added following code in else condition part and issues fixed.
jQuery("#subject_forpost").find('select').val('');
So working code is:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#subject_forpost").hide();
});
</script>
<script type="text/javascript">
jQuery(".career_postapplied").change(function(){
var value = this.value;
if (value == "(i) Faculty"){
jQuery("#subject_forpost").show();
}
else
{
jQuery("#subject_forpost").find('select').val('');
jQuery("#subject_forpost").hide();
}
});
</script>
Please bear with me as I am not sure what I have done wrong here:
Basically I have a form and I have some drop down lists.
If I hard code the select list for my drop down list with styleClass="requiredinpfield" then I will get a proper validation error message pops up below the select list whenever I don't select an option from the list and if I try hit submit button.
However, because some of the drop down lists are not always required (they only required when certain option was selected) so in this case I am not hard coding these select lists to have styleClass="requiredinpfield" but instead I am using jQuery to dynamically add the requiredinpfield class to the list object whenever an associate radio button was selected.
The problem I am having now is this won't show the validation error message when I don't select any option and try to hit the Submit button. It prevent me from continue, however. Its just I don't get to see the error message. Can you see what I have done wrong?
Here is an example of how I use jQuery to add the requiredinpfield class and it is not showing me the validation error message when needed:
HTML
<div id="fruitDivId">
<apex:inputField id="testPickList" value="{!PickTheFruitYouLike__c}" styleClass="selectpicker"/>
</div>
A radio button to confirm that the list is needed
<apex:selectRadio value="{!DoYouLikeFruit}" onchange="whenAnOptionWasSelectedAndINeedToAddRequiredInpField(this.value,'fruitDivId');" styleClass="requiredinpfield radio pa-cus pa-cus-other">
Script to add requiredinpfield class
function whenAnOptionWasSelectedAndINeedToAddRequiredInpField(t,divId)
{
if (t == 'Yes' ){
$('[id$='+divId+']').show();
$('[id$="testPickList"]').addClass('requiredinpfield');
}
else{
$('[id$='+divId+']').hide();
$('[id$="testPickList"]').removeClass('requiredinpfield');
}
}
Script to validate
Note: my submit button will trigger the !checkRequired() method.
function checkRequired(){
var isValidate = true;
//$('.errorIcon').css('opacity', '0');
$('.requiredinpfield').each(function(){
if($(this).is("select") && $(this).val() == ''){
/*alert("Hello!!");*/
if(!($(this).next('.requiredinpfield').first().next('.errorMsg').size()>0)){
console.log($(this).next('.requiredinpfield'));
$(this).next('.requiredinpfield').first().after('<div class="errorMsg"><strong></strong> You must select an option</div>');
}
isValidate = false;
}
else{
if($(this).is("select") && (($(this).next('.requiredinpfield').first().next('.errorMsg').size()>0)))
{
$(this).next('.requiredinpfield').first().next('.errorMsg').remove();
}
}
});
//alert(isValidate);
return isValidate;
}
Assuming that the rest of the code is correct, the problem might in the way you are selecting elements by ID
in jQuery, to select an element by id simply write
$('#idoftheelement')
so in your whenAnOptionWasSelectedAndINeedToAddRequiredInpField function,
try replacing
$('[id$='+divId+']')
with
$('#'+divId)
do the same at all locations where you are selecting by id.
I have a scenario where, on select of an option in select drop down, the form should submit.
For that I have written a Jquery function
function xxx(val) {
$("#form").submit();}
And the tag is as follows
<input type="text" name="xxx_txt" id="id_xxx" title="xxx" placeholder="xxx" value="$!{query}" ">
And I am populating my text field dynamically with values
$("#id_xxx").autocomplete({
source: sourcedata,
minLength: 1
})
But on select, nothing happens because, the field is not a select dropdown, but a normal text field , to which values are assigned, thus making it a select dropdown.
Basically I am writing a search function similar to google, where the search triggers , on a selection.
Kindly suggest.
try onChange event on your input element
$("input#id_xxx").change(function(){
if($(this).val() !== ""){
$("#form").submit();
}
});
This will trigger when input element lost focus
for every change on input element:
$("input#id_xxx").on("input", function(){
if($(this).val() !== ""){
$("#form").submit();
}
});
I have a drop-down generated by a backoffice. I cannot change how this drop-down is coded by the backoffice. But I need to make user selection mandatory for this dropdown.
I am using the following code and this works in the JSFIDDLE HERE. However, this code sees if the user chooses another value than value "A" to determine if a selection is made. But this in not good enough in my situation because this value indication changes in other drop-downs.
I need the code to see if the user choice has changed from the text "PLEASE SELECT - $0,00" The "- $0,00" may also vary in different drop-downs, so I need the code to only filter on the "PLEASE SELECT" part of the drop-down text.
Also I need the browser to not ask to turn these warnings off in this case.
Can anyone help please?
function selection()
{
var cat = document.getElementById('select').value;
if (cat == "A") {
alert('Please make a selection');
return false;
}
return true;
}
Alert whatever text you want in a span instead of using alert()
document.getElementById('alert').innerHTML = "Please make a selection";
Check the updated fiddle
So there is couple of questions in your question, lets start with
1) Ensuring the selected item does not start with "PLEASE SELECT".
function selection()
{
var sel = document.getElementById('select');
var selectedText = sel.options[sel.selectedIndex].text;
if (selectedText.startsWith("PLEASE SELECT")) {
alert('Please make a selection');
return false;
}
return true;
}
2) Stopping the user forcing the browser to no longer allow alert
This is not something you can control. If you want full control over a model dialog then there are plenty of these available - bootstrap has one, jQueryUI has one. Any UI framework you're using will almost certainly have one
You can try something like:
function selection()
{
var cat = $('#select option:selected').val();
if (cat == $('#select option:first-child').val()) {
alert('Please make a selection');
return false;
}
return true;
}
For the warnings you will need to change you alert to a modal or on the page as a notice/warning message
Ì have form where writing on input field autofills other input field while user types email
$("#edit-submitted-yhteystiedot-sahkoposti").keyup(function(){
$("#edit-submitted-saannot-newsletter-newsletter-email-address").val(this.value);
});
The thing is that if user does not want to receive newsletter and chooses no option for select box, the Input field with ID #edit-submitted-saannot-newsletter-newsletter-email-address should remain empty, even if user makes changes to default email field. ID of SELECT is #edit-submitted-saannot-haluan-uutiskirjeen
var $select = $('#edit-submitted-saannot-haluan-uutiskirjeen'),
$emailInput = $("#edit-submitted-saannot-newsletter-newsletter-email-address");
$select.change(function(){
if($select.val() == 'No')
$emailInput.val('');
}):
$emailInput.keyup(function(){
if($select.val() == 'No')
$emailInput.val('');
});
When the user changes the select to "no" reset the email field and set a custom attribute to know that you don't want automatic updates
$("#edit-submitted-saannot-newsletter-newsletter-email-address").val(this.value).attr("noautoupdate", true);
Then change your code like this
$("#edit-submitted-yhteystiedot-sahkoposti").keyup(function(){
if (!$(this).attr("noautoupdate")) $("#edit-submitted-saannot-newsletter-newsletter-email-address").val(this.value);
});
If the user changes the select to "yes" make the attribute false:
$("#edit-submitted-saannot-newsletter-newsletter-email-address").val(this.value).attr("noautoupdate", false);