Display HTML while <option> is viable selection - javascript

I have something like the below:
<select name="blah">
<option disabled="disabled" selected="selected">Select an option</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><br/>
<input type="submit" value="Submit"/>
I want it such that the submit button only appears if the user has selected an option with value >= 1 So on page load it will not display the submit button because the currently selected option has no value, but the moment a user selects a valid option, the submit button appears.
Is this something that can be accomplished with JS/JQ?

If you don't want to display submit button when page loads then add below css
input[type=submit] {display:none;}
To show submit button on value changes try below js code
$(function(){
$('select').change(function(){
var value = parseInt($(this).val().replace(/[^0-9-]/,""),10)
if(value >= 1)
{
$('input[type=submit]').show();
}
});
});;
Working Demo

Try following code in java script
function isSelected() {
var value =document.getElementById("blah").selectedIndex;
if(value >='1'){
document.getElementById('btnSubmit').style.display='block';
}else{
document.getElementById('btnSubmit').style.display='none';
}
}
Your HTML
<select id="blah" onChange="isSelected();">
<option disabled="disabled" selected="selected">Select an option</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><br/>
<input type="submit" value="Submit" style="display:none" id="btnSubmit"/>

change this
<input type="submit" value="Submit"/>
to
<input type="button" value="Submit" id="submit"/>
in jQuery:
$(document).ready(function(){
$('#submit').click(function(){
if($('select[name="blah"]').val() > 1)
$('#yourform').submit();
else
alert('selected value > 1');
});
});
you form need to have an id for example, in my case yourform
DEMO

Related

Change Button Name="" and Form Action based on Select Option in Jquery

Hi I have form which contains three search criteria.
These search criteria are jobs, resume, recruitment consultant.
Based on the drop down, fields are updated accordingly.
Based on the select value I want to change the action on the form, and name of the submit button. Problem is putting values with hyphen in option select makes jquery not work.
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment Consultant">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Change the form action as per following
action="search-recruitment-consultant-results?"
action="search-resume-results?"
action="search-job-results?"
And the button name (NOT VALUE OR TEXT) as per following
name="searchrecruitmentconsultantbutton"
name="searchresumebutton"
name="searchjobbutton"
I put these in option values accordingly
search-recruitment-consultant-results?
search-resume-results?
search-job-results?
and then used
<select name="search_for" onchange="this.form.action=this.value;">
but putting hyphen in option values makes the jquery show/hide not work
Try this code, see i have use hyphen in option and it works properly.
<form method="get" name="search" id="form" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment-Consultant">Recruitment Consultants</option>
</form>
<script>
$(document).ready(function() {
$("#search_for").change(function(){
if($(this).val()=='Jobs')
{
$("#form").attr("action",'search-job-results?');
$("#search_submit").attr('name',"searchjobbutton");
}
else if($(this).val()=='Resume'){
$("#form").attr("action",'search-resume-results?');
$("#search_submit").attr('name',"searchresumebutton");
}
else if($(this).val()=='Recruitment-Consultant'){
$("#form").attr("action",'search-recruitment-consultant-results?');
$("#search_submit").attr('name',"searchrecruitmentconsultantbutton");
}
});
});
</script>
i think this will help you
add id for your form 'formId'
$(document).ready(function(){
$('#search_for').change(function(){
var cur = $(this);
var search = cur.val();
if(search == 'job'){
$('#formId').attr('action', 'search-job-results?');
$("search_submit").attr('name', 'searchjobbutton');
} else if(search == 'Resume'){
$('#formId').attr('action', 'search-resume-results?');
$("search_submit").attr('name', 'searchresumebutton');
}else if(search == 'Recruitment Consultant'){
$('#formId').attr('action', 'search-recruitment-consultant-results?');
$("search_submit").attr('name', 'searchrecruitmentconsultantbutton');
}
});
});
try this
Add data attribute with button name
only you need to add - onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));" in the select
and data-name="" in the option
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Instead of writing multiple forms, just write one and use .change() and data-* attribute which is used to create custom tags. Store the button names inside <option data-name="button name"> then you can access this value with on change.
The data-* attributes is used to store custom data private to the page or application.
.change()
Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
$('#search_for').on('change', function () {
$('form[name="search"]').attr('action', $(this).val()).find(':submit').attr('name', $(this).find(':selected').data('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option data-name="searchjobbutton" value="search-job-results?">Jobs</option>
<option data-name="searchresumebutton" value="search-resume-results?">Resumes</option>
<option data-name="searchrecruitmentconsultantbutton" value="search-recruitment-consultant-results?">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>

onclick event is not working with option tag in html?

I have a following html drop down menu with Go button, it is working fine for the first two option values selection first and then hitting Go button, but not working for other two option values, which are having onclick events, Please help me that how to work with onclick event in <option> tag so that I can execute respective alert messages. I need it should work in Google Chrome browser. Thanks in advance.
<html>
<head>
<script>
function third(){
alert("It is a third option event");
}
function fourth(){
alert("Fourth option value");
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option onclick="third()">Third Option</option>
<option onclick="fourth()">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>
Jquery
$(function(){
$('#testdropdownmenu').on('change', function(){
var val = $(this).val();
if(val === 'third') {
alert('third option')
}
else if(val === 'fourth') {
alert('fourth option')
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
JavaScript
function checkval() {
var val = document.getElementById('testdropdownmenu').value
alert(val);
}
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu"onchange="checkval()">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
Use the onchange event on select and then compare its value.
You cannot trigger "onclick" event for option tag. Instead You can use "onchange" event of select tag.
The onclick attribute is not supported by the option tag. better use the onchange function on the 'select' tag
<html>
<head>
<script>
function changeValue() {
//get selected value
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" onchange="changeValue();" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option >Third Option</option>
<option >Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>
Just try to use onFocus, will trigger when user focus on the element
onclick is not the appropriate event to attach on select > option
Instead you should use onchange for your case. onchange fires whenever you change the the value of select box. And then in your function called on click you can check if its second/third then do something. check the code below:
In HTML:
<select id="testdropdownmenu" onchange="myFunction()">
And in Javascript:
function myFunction() {
var favValue = document.getElementById("testdropdownmenu").value;
// Do something your favourite value appears here
alert(favValue);
}
Hope this helps!!

JQuery: disable button if select option has certain class

I have dropdown list with collection options. When option with certain class is selected I want submit button to be disabled. This is what I've tried to do:
<form id="addToCollection">
<select id="add_to_collection">
<option value="1" class="highlight">1</option>
<option value="2">1</option>
<option value="3">3</option>
</select>
<input id="add-object-to-collection"
type="submit" value="Add" class="button"/>
</form>
<input id="add-object-to-collection" type="submit" value="Add" class="button"/>
if($('#add_to_collection option').hasClass('highlight')) {
$("#add-object-to-collection").prop('disabled', true);
$("#add-object-to-collection").attr('value', 'Added');
} else {
$("#add-object-to-collection").prop('disabled', false);
$("#add-object-to-collection").attr('value', 'Add');
}
So here, when option 1 is selected I want button to be disabled and when other options are selected button be enabled. However here button is disabled for all options.
Try this
$('#add_to_collection').on('change', function () {
var $option = $('option:selected', this);
var $button = $('#add-object-to-collection');
if ($option.hasClass('highlight')) {
$button.prop('disabled', true).val('Added');
} else {
$button.prop('disabled', false).val('Add');
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="addToCollection">
<select id="add_to_collection">
<option value="1" class="highlight">1</option>
<option value="2">1</option>
<option value="3">3</option>
</select>
<input id="add-object-to-collection" type="submit" value="Add" class="button" />
</form>
Your code is almost working. The problem in your case is that you aren't checking to see if the selected option element has a class of highlight. You could use the :selected selector in order to select the selected option element. In addition, you would also need to wrap that logic within a change event callback.
You could simplify the code to the following:
This essentially listens to the change event, and determines whether the selected option element has the class highlight. The boolean is used to disabled/enable the corresponding button.
I also chained a .change() event so that the event would be fired initially.
Example Here
$('#add_to_collection').on('change', function () {
var hasClass = $(this).find(':selected').hasClass('highlight');
$('#add-object-to-collection').prop('disabled', hasClass).val(hasClass ? 'Added' : 'Add');
}).change();
$('#add_to_collection').on('change', function () {
var hasClass = $(this).find(':selected').hasClass('highlight');
$('#add-object-to-collection').prop('disabled', hasClass).val(hasClass ? 'Added' : 'Add');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="addToCollection">
<select id="add_to_collection">
<option value="1" class="highlight">1</option>
<option value="2">1</option>
<option value="3">3</option>
</select>
<input id="add-object-to-collection" type="submit" value="Add" class="button" />
</form>

Jquery select option val

im working in a project that i will have about 10 select boxes with same class and i want to check if ALL of selected boxes are selected with jquery. Here is my html code
<form class="form-horizontal" action="analysis.php" method="post" id="mobileform" >
<select class="form-control selectx" name="phone1">
<option value="" selected>Select phone</option>
<option value="iphone6" selected>Iphone 6</option>
<option value="galaxys5" selected>Galaxy S5</option>
</select>
<select class="form-control selectx" name="phone2">
<option value="" selected>Select phone</option>
<option value="iphone6" selected>Iphone 6</option>
<option value="galaxys5" selected>Galaxy S5</option>
</select>
<button type="submit" name="submit" class="btn btn-success" id="submit"> Submit !</button><br>
And here is my jquery
$(document).ready(function() {
$('form').submit(function(event) {
$(".selectx option:selected").each(function()
{
if($(this).val() === "") {
$('#selecterror').fadeIn(300);
event.preventDefault();
}else{
$('#selecterror').hide();
}
});
});
});
But it doesnt work if you example in 1st selectbox with name phone1 you dont select anything and in selectbox with name phone2 you select a phone.
Sorry for my english
In your case, both select options have to be empty for the validation. You can use .filter to see if any of the select options is empty:
$('form').submit(function(event) {
var empty = $(".selectx option:selected").filter(
function() {
return $(this).val() == "";
});
if(empty.length) {
$('#selecterror').fadeIn(300);
event.preventDefault();
}else{
$('#selecterror').hide();
}
});
DEMO: https://jsfiddle.net/hptqq1tL/

Onclick Navigation

<select id="drp" value="maindrp" name="maindrp">
<option>Select Categories</option>
<option id="vhc" value="mainvhc">Vehicles</option>
<option id="re" value="mainre">Real Estate</option>
<option id="pt" value="mainpt">Pets</option>
<option id="el" value="mainel">Electronics</option>
<option id="cl" value="maincl">Clothing&Jewerly</option>
<option id="co" value="mainco">Computers&Network</option>
</select>
<input type="text" placeholder="Search" id="msc">
<input type="submit" value="Go" id="go" onclick= "go();">
function go() {
if (document.getElementById("vhc")) {
window.location="vehicles.php";
}else if (document.getElementById("re")) {
window.location="realestate.php"; } }
I want to navigate from selected item from drop down via button on click function.
Can anyone help me please?
Try this, you need the value of <select> tag
function go(){
var sel = document.getElementById('drp').value; // get value of <select>
if(sel=='mainvhc')
window.location.href='vehicles.php';
...
}

Categories