jquery based on two/three dropdown values hide textfield

jquery based on two/three dropdown values hide textfield - javascript

currently im stuck with the JQuery script which i wanted to make text field visible based on two / three drop down values matches. following is my JQuery code which i need when "status" value 'resolved', "reason" value '[any]', reason of leakage value '[any]', and when cause value is 'G other' description text field should appear. if any of above values changes doest match for current condition the description text field should disappear.
$(function () {
var changeVisibility = function () {
var statusId = $('#issue_status_id').val();
if (statusId >= '3') {
var val2 =$("#issue_custom_field_values_18").val();
if (val2 == '28' || val2 == '29' || val2 == '30' || val2 == '31' || val2 == '32' ||
val2 == '33' || val2 == '34' || val2 == '35' || val2 == '36' || val2 == '89') {
var val3 = $ ("#issue_custom_field_values_19").val();
if (val3 == '37' || val3 == '38' || val3 == '39' || val3 == '40' || val3 == '41' ||
val3 == '42' || val3 == '43' || val3 == '96') {
var val = $('#issue_custom_field_values_26').val();
if (val == '87') {
$('#issue_custom_field_values_39').parent().show();
$('.cf_39').show();
} else if (val == '94') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '81') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '82') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '83') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '84') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '85') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
}
else if (val == '86') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '87') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else {}
}
}
}
};
changeVisibility();
$('#all_attributes').on('change', '#issue_custom_field_values_26 ', function (e) {
changeVisibility();
});
var _replaceIssueFormWith = replaceIssueFormWith;
replaceIssueFormWith = function (html) {
_replaceIssueFormWith(html);
changeVisibility();
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all_attributes" class="attributes">
<p><label for="issue_status_id">Status<span class="required"> *</span></label><select onchange="updateIssueFrom('/issues/172/edit.js', this)" name="issue[status_id]" id="issue_status_id"><option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Resolved</option>
<option value="4">Feedback</option>
<option value="5">Closed</option>
<option value="6">Rejected</option></select></p>
<p style="display: block;"><label for="issue_custom_field_values_18"><span>Reason</span> <span class="required">*</span></label><select name="issue[custom_field_values][18]" id="issue_custom_field_values_18" class="enumeration_cf"><option selected="selected" value="89">--- Please select ---</option>
<option value="28">4 A</option>
<option value="29">4 B</option>
<option value="30">4 C</option>
<option value="31">4 D</option>
<option value="32">4 E</option>
<option value="33">4 F</option>
<option value="35">4 G </option>
<option value="36">4 H</option>
<option value="34">4 I </option></select></p><p style="display: block;"><label for="issue_custom_field_values_19"><span>Reason of Leakage</span> <span class="required">*</span></label><select name="issue[custom_field_values][19]" id="issue_custom_field_values_19" class="enumeration_cf"><option selected="selected" value="96">--- Please select ---</option>
<option value="37">5 A</option>
<option value="38">5 B</option>
<option value="39">5 C</option>
<option value="40">5 D</option>
<option value="41">5 E</option>
<option value="43">5 F</option>
<option value="42">5 G</option></select></p>
<p style="display: block;"><label for="issue_custom_field_values_26"><span>Cause</span> <span class="required">*</span></label><select name="issue[custom_field_values][26]" id="issue_custom_field_values_26" class="enumeration_cf"><option selected="selected" value="94">--- Please select ---</option>
<option value="81">A </option>
<option value="82">B </option>
<option value="83">C </option>
<option value="84">D </option>
<option value="85">E </option>
<option value="86">F </option>
<option value="87">G Other </option>
<option value="118">H </option></select></p>
<p style="display: block;"><label for="issue_custom_field_values_39">Description<span class="required"> *</span></label><input name="issue[custom_field_values][39]" id="issue_custom_field_values_39" value="" class="string_cf" type="text"></p>
</div>
when the drop down values are please select, the text field should disappear as well.

Related

jquery validation alert for selected optiong value

I'm trying to validate combo box's like the below code, I get few alert messages even one condition is true. I needed to get only one alert even one condition is true and other should bordered in red. thank you
$(function() {
$('#issue-form input[type="submit"]').click(function() {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
if (TrackID == '3' && IssueCF == '157') {
alert("Please select an option!");
$("#issue_custom_field_values_55").css("border", "2px solid red");
return false;
}
});
});
$(function() {
$('#issue-form input[type="submit"]').click(function() {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
alert("Please select an option!");
$("#issue_custom_field_values_52").css("border", "2px solid red");
return false;
}
});
});
$(function() {
$('#issue-form input[type="submit"]').click(function() {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
alert("Please select an option!");
$("#issue_custom_field_values_56").css("border", "2px solid red");
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
<div class="splitcontent">
<p>
<select name="issue[status_id]" id="issue_status_id">
<option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Solved</option>
<option value="4">Feedback</option>
<option value="5">End</option>
<option value="6">Rejected</option>
</select>
<p><label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
<select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
<option value="">--- Please select ---</option>
<option selected="selected" value="55">Software Bug</option>
<option value="56">Enviromental Bug　</option>
<option value="58">Other Factors</option>
</select>
</p>
<p style="display: block;"><label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
<select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="156">--- 未選択/not entered ---</option>
<option value="59">１Ａ．ＢＩ</option>
<option value="60">１Ｂ．ＢＤ</option>
<option value="61">１Ｃ．ＤＤ</option>
<option value="62">１Ｄ．ＰＤ</option>
<option value="63">１Ｅ．Ｃ</option>
</select>
</p>
<p style="display: block;"><label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
<select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="157">--- 未選択/not entered ---</option>
<option value="79">Poor Quality</option>
<option value="80">Not Reviewed</option>
<option value="81">Review Point Leak</option>
<option value="82">Review, Correction & Confirmation</option>
<option value="83">Lack of Communication</option>
<option value="84">Other</option>
<option value="85">Not Applicable</option>
</select>
</p>
<p style="display: block;"><label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
<select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="158">--- 未選択/not entered ---</option>
<option value="86">ＵＴ</option>
<option value="87">ＳＩ1</option>
<option value="88">ＳＩ2</option>
<option value="89">ＰＴ</option>
<option value="90">ＲＴ</option>
</select>
</p>
</div>
</form>
<input type="submit" name="commit" value="Create">
I needed to get the result like this with an alert message when first other values have been selected with an option. I needed an help from the following javascript code changes. thank you

Use below given code to remove border -
$(function () {
$('#issue-form input[type="submit"]').click(function () {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
var isAlert = 0;
if (TrackID == '3' && IssueCF == '157') {
isAlert = 1;
$("#issue_custom_field_values_55").css("border", "2px solid red");
}
else{
$("#issue_custom_field_values_55").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
isAlert = 1;
$("#issue_custom_field_values_52").css("border", "2px solid red");
}
else{
$("#issue_custom_field_values_52").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
isAlert = 1;
$("#issue_custom_field_values_56").css("border", "2px solid red");
}else
{
$("#issue_custom_field_values_56").css("border", "none");
}
if (isAlert == "1") {
alert("Please select an option!");
return false;
}
});
});
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
<div class="splitcontent">
<p>
<select name="issue[status_id]" id="issue_status_id">
<option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Solved</option>
<option value="4">Feedback</option>
<option value="5">End</option>
<option value="6">Rejected</option>
</select>
<p>
<label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
<select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
<option value="">--- Please select ---</option>
<option selected="selected" value="55">Software Bug</option>
<option value="56">Enviromental Bug　</option>
<option value="58">Other Factors</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
<select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="156">--- 未選択/not entered ---</option>
<option value="59">１Ａ．ＢＩ</option>
<option value="60">１Ｂ．ＢＤ</option>
<option value="61">１Ｃ．ＤＤ</option>
<option value="62">１Ｄ．ＰＤ</option>
<option value="63">１Ｅ．Ｃ</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
<select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="157">--- 未選択/not entered ---</option>
<option value="79">Poor Quality</option>
<option value="80">Not Reviewed</option>
<option value="81">Review Point Leak</option>
<option value="82">Review, Correction & Confirmation</option>
<option value="83">Lack of Communication</option>
<option value="84">Other</option>
<option value="85">Not Applicable</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
<select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="158">--- 未選択/not entered ---</option>
<option value="86">ＵＴ</option>
<option value="87">ＳＩ1</option>
<option value="88">ＳＩ2</option>
<option value="89">ＰＴ</option>
<option value="90">ＲＴ</option>
</select>
</p>
</div>
<input type="submit" name="commit" value="Create">
</form>
</body>
</html>

I analysed your java-script and found that your logic require some changes as given below -
$(function () {
$('#issue-form input[type="submit"]').click(function () {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
var isAlert = 0;
if (TrackID == '3' && IssueCF == '157') {
isAlert = 1;
$("#issue_custom_field_values_55").css("border", "2px solid red");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
isAlert = 1;
$("#issue_custom_field_values_52").css("border", "2px solid red");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
isAlert = 1;
$("#issue_custom_field_values_56").css("border", "2px solid red");
}
if (isAlert == "1") {
alert("Please select an option!");
return false;
}
});
});
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="issue-form">
<div class="splitcontent">
<p>
<select name="issue[status_id]" id="issue_status_id">
<option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Solved</option>
<option value="4">Feedback</option>
<option value="5">End</option>
<option value="6">Rejected</option>
</select>
<p>
<label for="issue_custom_field_values_51"><span title="IssueType<" class="field-description">Issue Type</span></label>
<select name="issue[custom_field_values][51]" id="issue_custom_field_values_51" class="enumeration_cf">
<option value="">--- Please select ---</option>
<option selected="selected" value="55">Software Bug</option>
<option value="56">Enviromental Bug　</option>
<option value="58">Other Factors</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_52"><span title="OrginProcess" class="field-description">Orgin Process</span></label>
<select name="issue[custom_field_values][52]" id="issue_custom_field_values_52" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="156">--- 未選択/not entered ---</option>
<option value="59">１Ａ．ＢＩ</option>
<option value="60">１Ｂ．ＢＤ</option>
<option value="61">１Ｃ．ＤＤ</option>
<option value="62">１Ｄ．ＰＤ</option>
<option value="63">１Ｅ．Ｃ</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_55"><span title="Reason" class="field-description">Reason of Leakage (Design)</span></label>
<select name="issue[custom_field_values][55]" id="issue_custom_field_values_55" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="157">--- 未選択/not entered ---</option>
<option value="79">Poor Quality</option>
<option value="80">Not Reviewed</option>
<option value="81">Review Point Leak</option>
<option value="82">Review, Correction & Confirmation</option>
<option value="83">Lack of Communication</option>
<option value="84">Other</option>
<option value="85">Not Applicable</option>
</select>
</p>
<p style="display: block;">
<label for="issue_custom_field_values_56"><span title="Test Process" class="field-description">Test Process that Extract Bug</span></label>
<select name="issue[custom_field_values][56]" id="issue_custom_field_values_56" class="enumeration_cf">
<option value=""> </option>
<option selected="selected" value="158">--- 未選択/not entered ---</option>
<option value="86">ＵＴ</option>
<option value="87">ＳＩ1</option>
<option value="88">ＳＩ2</option>
<option value="89">ＰＴ</option>
<option value="90">ＲＴ</option>
</select>
</p>
</div>
<input type="submit" name="commit" value="Create">
</form>
</body>
</html>

Use below given code in this case. Please like my profile if it works for you.
<script type="text/javascript">
$(function () {
$('#issue-form input[type="submit"]').click(function () {
var TrackID = $('#issue_status_id').val();
var IssueCF = $('#issue_custom_field_values_55').val();
var isAlert = 0;
if (TrackID == '3' && IssueCF == '157') {
isAlert = 1;
$("#issue_custom_field_values_55").css("border", "2px solid red");
} else {
$("#issue_custom_field_values_55").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_52').val();
if (TrackID == '3' && IssueCF == '156') {
isAlert = 1;
$("#issue_custom_field_values_52").css("border", "2px solid red");
} else {
$("#issue_custom_field_values_52").css("border", "none");
}
TrackID = $('#issue_status_id').val();
IssueCF = $('#issue_custom_field_values_56').val();
if (TrackID == '3' && IssueCF == '158') {
isAlert = 1;
$("#issue_custom_field_values_56").css("border", "2px solid red");
} else {
$("#issue_custom_field_values_56").css("border", "none");
}
if (isAlert == "1") {
alert("Please select an option!");
return false;
}
});
});
</script>

html get Method sending wrong url

on using html get method my url should be shown as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text=10.1.17.20&subquery=&subfilter=&sub_search_text=
but it shows as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=
there is a plus sign between query=ip&filter=like&search_text+=10.1.17.20
which creates problem in getting data
my html form code is like
<form method="get" action="log_table_view.php" onsubmit="return submit_query_form_check();" enctype="multipart/form-data">
<label>Log for Year</label>
<select id="year" name="year">
<option value="">Select Year</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<br>
<label>From</label>
<select id="frommonth" name="frommonth">
<option value="">Select Month</option>
</select>
<select id="fromdate" name="fromdate">
<option value="">Select Date</option>
</select>
<label>To</label>
<select id="tomonth" name="tomonth">
<option value="">Select Month</option>
</select>
<select id="todate" name="todate">
<option value="">Select Date</option>
</select>
<br>
<label>Query</label>
<select name="query" id="query">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="filter" id="filter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="search_text" id="search_text">
<label>AND</label>
<label>Sub-Query</label>
<select name="subquery" id="subquery">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="subfilter" id="subfilter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="sub_search_text" id="sub_search_text">
<button type="submit" class="search">Search</button>
</form>
function submit_query_form_check() {
var year = $("#year").val();
var frommonth = $('#frommonth').val();
var fromdate = $('#fromdate').val();
var tomonth = $('#tomonth').val();
var todate = $('#todate').val();
var query = $('#query').val();
var subquery = $('#subquery').val();
if (year == "") {
alert("Year Not Selected");
$("#year").focus();
return false;
}
if (frommonth == "") {
alert("From Month Not Selected");
$("#frommonth").focus();
return false;
}
if (fromdate == "") {
alert("From date Not Selected");
$("#fromdate").focus();
return false;
}
if (tomonth == "") {
alert("To Month Not Selected");
$("#tomonth").focus();
return false;
}
if (todate == "") {
alert("To date Not Selected");
$("#todate").focus();
return false;
}
if (query != "") {
var filter = $('#filter').val();
var search_text = $('#search_text').val();
if (filter == "") {
alert("You have not selected any filter for query");
$('#filter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any search text for query");
$('#search_text').focus();
return false;
} else if (query == "groupname") {
if (filter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#filter').focus();
return false;
}
}
}
if (subquery != "") {
var subfilter = $('#subfilter').val();
var sub_search_text = $('#sub_search_text').val();
if (query == "") {
alert("You have not selected any for query before using sub query");
$('#query').focus();
return false;
}
if (subfilter == "") {
alert("You have not selected any sub filter for query");
$('#subfilter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any sub search text for query");
$('#sub_search_text').focus();
return false;
} else if (subquery == "groupname") {
if (subfilter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#subfilter').focus();
return false;
}
}
}
return true;
}

Right before you actually pass in the string to be called to the endpoint, just strip the '+' out of the URL using the str_replace method.
<?
$badUrl = "http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=";
$goodUrl = str_replace('?/', '?', $badUrl);
then you simply pass the goodUrl to make the GET request

Pass multiple select values to a function to update an image

I want to change an image depending on what two select values have been chosen. How would this be done dynamically with two separate select? Here's my code so far.
Html
<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<select onchange="twoselects(this)">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</form>
Select image size:
<select onchange="twoselects(that)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<p id="optimus"></p>
Javascript
function twoselects(val, val2) {
// Not sure why you used this line
var image = document.querySelector(".prime").value;
var getValue = val.value;
var getValue2 = val2.value;
if (getValue == "opt1" && "option1") {
document.getElementById('optimus').style.backgroundImage= "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
}
else if (getValue == "opt2" && getValue2 == "option2") {
document.getElementById('optimus').style.backgroundImage= "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}

You are sending one argument but accepting 2..i would suggest you not to send and accept any. Select elements using getElementById or querySelector
that in provided example is undefined.
function twoselects() {
var size1 = document.querySelector("#size1");
var size2 = document.querySelector("#size2");
var getValue = size1.value;
var getValue2 = size2.value;
if (getValue == "opt1" && getValue2 == "option1") {
document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
} else if (getValue == "opt2" && getValue2 == "option2") {
document.getElementById('optimus').style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}
twoselects();
p {
width: 100%;
height: 200px;
}
<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<select id='size1' onchange="twoselects()">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</form>
Select image size:
<select id='size2' onchange="twoselects()">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<p id="optimus"></p>

Check if all dropdowns are empty or not jQuery

I have three select elements:
<select id="first">
<option></option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select id="second">
<option></option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
<select id="three">
<option></option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i"></option>
</select>
All three of them must either be empty (first option), or have a value.
So <option></option> <option></option> <option></option> is ok
but not <option value="a">a</option> <option></option> <option></option> kinda thing.
I've tried this, but it isn't working as it doesn't allow all three to be empty and quits on the first case
if($("#first").val() === "" || $("#second").val() === "" || $("#third").val() === ""){
return false;
}
Any help? I would like to do this as short/nice looking as possible

You could
var $selects = $('#first, #second, #three'),
$selected = $selects.filter(function () {
return this.value != ''
});
if ($selected.length != 0 && $selected.length != $selects.length) {
return false;
}
Demo: Fiddle

var first = $("#first").val();
var second = $("#first").val();
var three = $("#first").val();
var isValid = false;
if((first.length>0 && second.length>0 && three.length>0) || (first.length==0 && second.length>== && three.length==0)){
isValid = true;
}

Try this:
if($("#first").find('option').length <=1 || $("#second").find('option').length <=1 || $("#third").find('option').length <=1){
return false;
}

Form is not working [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
JSS
function kategori(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'emlak'){
document.getElementById("emlak").style.display = "block";
} else if(value != 'emlak'){
document.getElementById("emlak").style.display = "none";
}if(value == 'vasita'){
document.getElementById("vasita").style.display = "block";
}else if(value != 'vasita'){
document.getElementById("vasita").style.display = "none";
}if(value == 'alisveris'){
document.getElementById("alisveris").style.display = "block";
}else if(value != 'alisveris'){
document.getElementById("alisveris").style.display = "none";
}if(value == 'is_makineleri_sanayi'){
document.getElementById("is_makineleri_sanayi").style.display = "block";
}else if(value != 'is_makineleri_sanayi'){
document.getElementById("is_makineleri_sanayi").style.display = "none";
}if(value == 'hizmet'){
document.getElementById("hizmet").style.display = "block";
}else if(value != 'hizmet'){
document.getElementById("hizmet").style.display = "none";
}if(value == 'kariyer'){
document.getElementById("kariyer").style.display = "block";
}else if(value != 'kariyer'){
document.getElementById("kariyer").style.display = "none";
}if(value == 'hayvanlar_alemi'){
document.getElementById("hayvanlar_alemi").style.display = "block";
}else if(value != 'hayvanlar_alemi'){
document.getElementById("hayvanlar_alemi").style.display = "none";
}
}
function emlak(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'konut'){
document.getElementById("konut").style.display = "block";
} else if(value != 'konut'){
document.getElementById("konut").style.display = "none";
} if (value == 'isyeri'){
document.getElementById("isyeri").style.display = "block";
} else if(value != 'isyeri'){
document.getElementById("isyeri").style.display = "none";
} if (value == 'arsa'){
document.getElementById("arsa").style.display = "block";
} else if(value != 'arsa'){
document.getElementById("arsa").style.display = "none";
} if (value == 'projeler'){
document.getElementById("projeler").style.display = "block";
} else if(value != 'projeler'){
document.getElementById("projeler").style.display = "none";
} if (value == 'bina'){
document.getElementById("bina").style.display = "block";
} else if(value != 'bina'){
document.getElementById("bina").style.display = "none";
} if (value == 'devremulk'){
document.getElementById("devremulk").style.display = "block";
} else if(value != 'devre_mulk'){
document.getElementById("devremulk").style.display = "none";
} if (value == 'turistik_tesis'){
document.getElementById("turistik_tesis").style.display = "block";
} else if(value != 'turistik_tesis'){
document.getElementById("turistik_tesis").style.display = "none";
}
}
function konut(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'satilik'){
document.getElementById("satilik").style.display = "block";
}else if(value != 'satilik'){
document.getElementById("satilik").style.display = "none";
}if (value == 'kiralik'){
document.getElementById("kiralik").style.display = "block";
} else if(value != 'kiralik'){
document.getElementById("kiralik").style.display = "none";
}if (value == 'gunluk_kiralik'){
document.getElementById("gunluk_kiralik").style.display = "block";
} else if(value != 'gunluk_kiralik'){
document.getElementById("gunluk_kiralik").style.display = "none";
}
}
function satilik(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'daire'){
document.getElementById("daire").style.display = "block";
}else if(value != 'daire'){
document.getElementById("daire").style.display = "none";
}if (value == 'residence'){
document.getElementById("residence").style.display = "block";
} else if(value != 'residence'){
document.getElementById("residence").style.display = "none";
}if (value == 'mustakil_ev'){
document.getElementById("mustakil_ev").style.display = "block";
} else if(value != 'mustakil_ev'){
document.getElementById("mustakil_ev").style.display = "none";
}if (value == 'villa'){
document.getElementById("villa").style.display = "block";
} else if(value != 'villa'){
document.getElementById("villa").style.display = "none";
}if (value == 'ciftlik_evi'){
document.getElementById("ciftlik_evi").style.display = "block";
} else if(value != 'ciftlik_evi'){
document.getElementById("ciftlik_evi").style.display = "none";
}if (value == 'kosk_konak'){
document.getElementById("kosk_konak").style.display = "block";
} else if(value != 'kosk_konak'){
document.getElementById("kosk_konak").style.display = "none";
}if (value == 'yali'){
document.getElementById("yali").style.display = "block";
} else if(value != 'yali'){
document.getElementById("yali").style.display = "none";
}if (value == 'yali_dairesi'){
document.getElementById("yali_dairesi").style.display = "block";
} else if(value != 'yali_dairesi'){
document.getElementById("yali_dairesi").style.display = "none";
}if (value == 'yazlik'){
document.getElementById("yazlik").style.display = "block";
} else if(value != 'yazlik'){
document.getElementById("yazlik").style.display = "none";
}if (value == 'prefabrik_ev'){
document.getElementById("prefabrik_ev").style.display = "block";
} else if(value != 'prefabrik_ev'){
document.getElementById("prefabrik_ev").style.display = "none";
}if (value == 'kooperatif'){
document.getElementById("kooperatif").style.display = "block";
} else if(value != 'kooperatif'){
document.getElementById("kooperatif").style.display = "none";
}
}
function kiralik(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'daire'){
document.getElementById("daire").style.display = "block";
}else if(value != 'daire'){
document.getElementById("daire").style.display = "none";
}if (value == 'residence'){
document.getElementById("residence").style.display = "block";
} else if(value != 'residence'){
document.getElementById("residence").style.display = "none";
}if (value == 'mustakil_ev'){
document.getElementById("mustakil_ev").style.display = "block";
} else if(value != 'mustakil_ev'){
document.getElementById("mustakil_ev").style.display = "none";
}if (value == 'villa'){
document.getElementById("villa").style.display = "block";
} else if(value != 'villa'){
document.getElementById("villa").style.display = "none";
}if (value == 'ciftlik_evi'){
document.getElementById("ciftlik_evi").style.display = "block";
} else if(value != 'ciftlik_evi'){
document.getElementById("ciftlik_evi").style.display = "none";
}if (value == 'kosk_konak'){
document.getElementById("kosk_konak").style.display = "block";
} else if(value != 'kosk_konak'){
document.getElementById("kosk_konak").style.display = "none";
}if (value == 'yali'){
document.getElementById("yali").style.display = "block";
} else if(value != 'yali'){
document.getElementById("yali").style.display = "none";
}if (value == 'yali_dairesi'){
document.getElementById("yali_dairesi").style.display = "block";
} else if(value != 'yali_dairesi'){
document.getElementById("yali_dairesi").style.display = "none";
}if (value == 'yazlik'){
document.getElementById("yazlik").style.display = "block";
} else if(value != 'yazlik'){
document.getElementById("yazlik").style.display = "none";
}
}
HTML
<form method="post" action="ilan_ver_adim2.php">
<select name="kategori" class="kategori_element" onChange="kategori(this);" size="2">
<option value="emlak">Emlak</option>
<option value="vasita">Vasıta</option>
<option value="yedek_parca_aksesuar_donanim_tuning" title="Yedek Parça, Aksesuar, Donanım & Tuning">Yedek Parça, Aksesuar, Donanım & Tuning</option>
<option value="alisveris">Alışveriş</option>
<option value="is_makineleri_sanayi" title="İş Makineleri & Sanayi">İş Makineleri & Sanayi</option>
<option value="hizmet">Hizmet</option>
<option value="kariyer">Kariyer</option>
<option value="hayvanlar_alemi">Hayvanlar Alemi</option>
</select>
<select id="emlak" name="emlak" class="kategori_element" size="2" onChange="emlak(this);" style="display:none;">
<option value="konut">Konut</option>
<option value="isyeri">İşyeri</option>
<option value="arsa">Arsa</option>
<option value="projeler">Projeler</option>
<option value="bina">Bina</option>
<option value="devremülk">Devremülk</option>
<option value="turistik tesis">Turistik Tesis</option>
</select>
<select class="kategori_element" id="vasita" onChange="" size="2" style="display:none;">
<option value="">Otomobil</option>
<option value="">Arazi, SUV & Pick-up</option>
<option value="">Motosiklet</option>
<option value="">Minivan, Van & Panelvan</option>
<option value="">Ticari Araçlar</option>
<option value="">Kiralık Araçlar</option>
<option value="">Deniz Araçları</option>
<option value="">Hasarlı Araçlar</option>
<option value="">Klasik Araçlar</option>
<option value="">Modifiye Araçlar</option>
<option value="">Hava Araçları</option>
<option value="">ATV</option>
<option value="">UTV</option>
<option value="">Engelli Plakalı Araçlar</option>
<option value="">Karavan</option>
<option value="">Elektrikli Araçlar</option>
</select>
<select class="kategori_element" id="alisveris" onChange="" size="2" style="display:none;">
<option value="">Bilgisayar</option>
<option value="">Cep Telefonu</option>
<option value="">Fotoğraf & Kamera</option>
<option value="">Ev & Dekorasyon</option>
<option value="">Ev Elektroniği</option>
<option value="">Elektronik</option>
<option value="">Giyim & Aksesuar</option>
<option value="">Güzellik & Kozmetik</option>
<option value="">Bahçe & Yapı Market</option>
<option value="">Bebek</option>
<option value="">El İşi & Sanat</option>
<option value="">Hobi & Oyuncak</option>
<option value="">Kitap, Dergi & Film</option>
<option value="">Koleksiyon</option>
<option value="">Müzik</option>
<option value="">Oyun & Konsol</option>
<option value="">Saat</option>
<option value="">Spor</option>
<option value="">Takı, Mücevher & Altın</option>
<option value="">Antika</option>
<option value="">Medikal Ürünler</option>
<option value="">Ofis Malzemeleri</option>
<option value="">Yiyecek & İçecek</option>
<option value="">Diğer Her Şey</option>
</select>
<select class="kategori_element" id="is_makineleri_sanayi" onChange="" size="2" style="display:none;">
<option value="">İş Makinesi</option>
<option value="">Sanayi</option>
<option value="">Elektrik & Enerji</option>
</select>
<select class="kategori_element" id="hizmet" onChange="" size="2" style="display:none;">
<option value="">Vasıta Hizmetleri</option>
<option value="">Ev Tadilat & Dekorasyon</option>
<option value="">Bebek ve Çocuk</option>
<option value="">Nakliye</option>
<option value="">Kiralık Ürünler</option>
<option value="">Kurs & Dershaneler</option>
<option value="">Özel Ders Verenler</option>
<option value="">Baskı Hizmetleri</option>
<option value="">Bayilik Verenler & Franchise</option>
<option value="">Cenaze İşleri</option>
<option value="">Danışmanlık</option>
<option value="">Dış Ticaret & Gümrük</option>
<option value="">Düğün & Organizasyon</option>
<option value="">El Sanatları</option>
<option value="">Evcil Hayvanlar</option>
<option value="">Giyim & Tekstil</option>
<option value="">Güzellik Merkezleri</option>
<option value="">Hurda & Atık</option>
<option value="">Öğrenci Yurdu</option>
<option value="">Reklam & Tanıtım</option>
<option value="">Sağlık & Spor</option>
<option value="">Sigortacılık & Finans</option>
<option value="">Tamir, Teknik Servis</option>
<option value="">Taşeron Hizmetleri</option>
<option value="">Temizlik & İlaçlama</option>
<option value="">Tercümanlık & Çeviri</option>
<option value="">Turizm Hizmetleri</option>
<option value="">Yazılım & Bilgi İşlem</option>
<option value="">Yemek ve Gıda</option>
</select>
<select class="kategori_element" id="kariyer" onChange="" size="2" style="display:none;">
<option value="">Bankacılık</option>
<option value="">Dönemsel İşler</option>
<option value="">Eğitim</option>
<option value="">Güzellik & Bakım</option>
<option value="">Hukuk</option>
<option value="">IT ve Yazılım Geliştirme</option>
<option value="">İnsan Kaynakları</option>
<option value="">İnşaat ve Yapı</option>
<option value="">İşletme ve Stratejik Yönetim</option>
<option value="">Koruma ve Güvenlik</option>
<option value="">Kültür, Sanat ve Eğlence</option>
<option value="">Lojistik ve Taşıma</option>
<option value="">Muhasebe / Finans</option>
<option value="">Mühendislik</option>
<option value="">Müşteri Hizmetleri</option>
<option value="">Ofis Yönetimi ve İdari İşler</option>
<option value="">Pazarlama ve Ürün Yönetimi</option>
<option value="">Restoran ve Konaklama</option>
<option value="">Sağlık</option>
<option value="">Satış</option>
<option value="">Tamir ve Bakım</option>
<option value="">Tasarım / Yaratıcılık</option>
<option value="">Üretim ve İmalat</option>
<option value="">Yetiştirme Hayvancılık</option>
</select>
<select class="kategori_element" id="hayvanlar_alemi" onChange="" size="2" style="display:none;">
<option value="">Evcil Hayvanlar</option>
<option value="">Akvaryum Balıkları</option>
<option value="">Aksesuarlar</option>
<option value="">Yem ve Mama</option>
<option value="">Kümes Hayvanları</option>
<option value="">Büyükbaş Hayvanlar</option>
<option value="">Küçükbaş Hayvanlar</option>
<option value="">Deniz Canlıları</option>
<option value="">Sürüngenler</option>
<option value="">Böcekler</option>
<option value="">Bakım</option>
</select>
<select id="konut" class="kategori_element" size="2" onChange="konut(this);" style="display:none;">
<option value="satilik">Satılık</option>
<option value="kiralik">Kiralık</option>
<option value="gunluk_kiralik">Günlük Kiralık</option>
</select>
<select id="satilik" class="kategori_element" size="2" onChange="satilik(this);" style="display:none;">
<option value="daire">Daire</option>
<option value="residence">Residence</option>
<option value="mustakil_ev">Müstakil Ev</option>
<option value="villa">Villa</option>
<option value="ciftlik_evi">Çiftlik Evi</option>
<option value="kosk_konak">Köşk & Konak</option>
<option value="yali">Yalı</option>
<option value="yali_dairesi">Yalı Dairesi</option>
<option value="yazlik">Yazlık</option>
<option value="prefabrik_ev">Prefabrik Ev</option>
<option value="kooperatif">Kooperatif</option>
<button type="submit">İlan Ver</button>
</select>
</form>
My form is not working when i add form tag to start and to end i want create a category selector for e-trade webpage. i dont know which one is wrong java script or html please help.
why i cant type my message it want soo much detail.

Your problem isn't obvious (as you haven't really paired down your code to anything that we can use).
Here's three things that potentially could be causing your issues:
You lack name attributes to a lot of your elements. If the form successfully submits, then if an element doesn't have a name attribute, you won't actually get any data appearing.
A lot of your options have value="". This means that if you successfully send that data in a POST request, then whatever is selected in that option box will only return "". This will be of absolutely 0 help to anyone.
Not technically an issue that is likely to be causing your issues, but you need to get your head around loops. As it stands, the vast majority of your code is just you repeating yourself. An example for you to look at that would replace your kategori javascript function:
Code:
function kategori(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value,
list = ["emlak", "vasita", "alisveris", "is_makineleri_sanayi", "hizmet", "kariyer", "hayvanlar_alemi"];
for (var x=0; x<list.length; x++){
document.getElementById(list[x]).style.display = (list[x]==value?"block":"none");
}
}

We Keep Coding

JavaScript is the programming language of the Web.

jquery based on two/three dropdown values hide textfield - javascript

Related

jquery validation alert for selected optiong value

html get Method sending wrong url

Pass multiple select values to a function to update an image

Check if all dropdowns are empty or not jQuery

Form is not working [closed]

Categories

Resources