Develop Reference

Check whether selected option has no value, across multiple select fields

When I try the below jQuery, I get an error:
Unexpected Type Error (: $selReqs[i].val is not a function)
I have tried multiple variations of the below and cannot seem to get it to check if selected option has no value for each of the select fields. Any advice appreciated!
var $selReqs = $('.allMinReqs');
var reqs = [];
for(var i=0; i < $selReqs.length; i++) {
if(!$selReqs[i].val()) {
reqs.push($selReqs[i]);
}
}
<div id="minReqs">
<div class="hide" id="singleMin_mcReq"><br>
<label for="singleMin">Minimum requirement for each skill: <span class="required">*</span> </label>
<select class="allMinReqs" id="singleMin" onchange="showMcStart();">
<option value="">Please Select</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
</select>
</div>
<div class="hide" id="multiMin_mcReq"><br>
<label for="curL">Listening requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_L">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
<label for="curR">Reading requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_R">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>

The issue in your code is because you're accessing a jQuery object by index. This returns the underlying DOM Element object which has no val() method.
To achieve your goal you could use map() to create an array of all the selected values. Then you can check the length of that array to determine if anything was selected, like this:
$('button').on('click', function() {
var values = $('.allMinReqs').map((i, e) => e.value !== '' ? e.value : null).get();
console.log(values);
var somethingSelected = values.length != 0;
console.log(somethingSelected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Check</button>
<div id="minReqs">
<div class="hide" id="singleMin_mcReq"><br>
<label for="singleMin">Minimum requirement for each skill: <span class="required">*</span> </label>
<select class="allMinReqs" id="singleMin">
<option value="">Please Select</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
</select>
</div>
<div class="hide" id="multiMin_mcReq"><br>
<label for="curL">Listening requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_L">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
<label for="curR">Reading requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_R">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>

Disable button when second option from select element is not picked

I have two select dropdowns and a button. I want the button to be disabled when no second option is selected except for one option.
When I select a first option, the second field appears except for one option, with that one option there is only one select element so the button must be clickable then.
// linking values to dropdowns
var placesLists = {
'uiteten': '#uiteten',
'snackensnoepen': '#snackensnoepen',
'drankje': '#drankje',
'evenement': '#evenement',
'stappen': '#stappen',
'cultuur': '#cultuur',
'sightseeing': '#sightseeing',
'kids': '#kids',
'informatie': '#informatie',
};
$('select[name=watwiljedoen]').change(function() {
//hide all extra lists
$('.hide').hide().prop("disabled", true);
$('#disabledselect').hide();
//get current value
var value = $(this).val();
//if there is a list for this value, show it
if (value in placesLists) {
$(placesLists[value]).show().prop("disabled", false);
$(placesLists[value]).removeClass('dropdownwwjdnonactive');
$(placesLists[value]).addClass('dropdownwwjd');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="wat-wil-je-doen" role="form" method="post">
<select class="dropdownwwjd" name="watwiljedoen">
<option value="lorem" disabled selected>Wat wil je gaan doen?</option>
<option value="shoppen">Shoppen</option>
<option value="uiteten">Uit eten</option>
<option value="snackensnoepen">Snacken / snoepen</option>
<option value="drankje">Drankje doen</option>
<option value="evenement">Evenementen bezoeken</option>
<option value="stappen">Stappen</option>
<option value="cultuur">Cultuur snuiven</option>
<option value="sightseeing">Sightseeing</option>
<option value="kids">Kids</option>
<option value="informatie">Meer informatie</option>
</select>
<select id="disabledselect" class="dropdownwwjdnonactive" disabled>
<option value="sdgsdg">Verfijn je keuze</option>
</select>
<select id="uiteten" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="ontbijt">Ontbijt</option>
<option value="lunch">Lunch</option>
<option value="diner">Diner</option>
<option value="vis">Vis</option>
<option value="vlees">Vlees</option>
<option value="broodje">Broodje</option>
<option value="patatje">Patatje</option>
<option value="tapas">Tapas</option>
<option value="hamburger">Hamburger</option>
<option value="grieks">Grieks</option>
<option value="pizza">Pizza</option>
<option value="pasta">Pasta</option>
<option value="traiteur">Traiteur</option>
</select>
<select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="snelle snack">Snelle snack</option>
<option value="snoepen">Snoepen</option>
<option value="IJsje">IJsje</option>
<option value="kroketje">Kroketje</option>
<option value="brammetje">Brammetje</option>
</select>
<select id="drankje" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="iets fris">Iets fris</option>
<option value="thee">Thee</option>
<option value="koffie">Koffie</option>
<option value="biertje">Biertje</option>
<option value="wijntje">Wijntje</option>
<option value="whiskey">Whiskey</option>
<option value="cocktail">Cocktail</option>
<option value="slush">Slush</option>
</select>
<select id="evenement" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="in het stadscentrum">In het stadscentrum</option>
<option value="evenement">Evenement</option>
<option value="braderie">Braderie</option>
<option value="rondje dorp">Rondje dorp</option>
</select>
<select id="stappen" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="eten">Eten</option>
<option value="drinken">Drinken</option>
<option value="theater">Theater</option>
<option value="danser">Dansen</option>
<option value="muziek">Muziek</option>
</select>
<select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="kunst">Kunst</option>
<option value="stadscentrum historie">Stadscentrum historie</option>
<option value="buitenlandse restaurants">Buitenlandse restaurants</option>
<option value="cultuur">Cultuur</option>
<option value="schilderen">Schilderen</option>
<option value="kunst uitleen">Kunst uitleen</option>
<option value="uitleen">Uitleen</option>
<option value="galerie">Galerie</option>
<option value="workshops">Workshops</option>
</select>
<select id="sightseeing" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="architectuur bekijken">Architectuur bekijken</option>
<option value="de boekenberg">De Boekenberg</option>
<option value="theater de stoep">Theater de Stoep</option>
<option value="voorstraat">Voorstraat</option>
<option value="museum winkel">Museum winkel</option>
</select>
<select id="kids" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="speelgoed">Speelgoed</option>
<option value="speeltuin">Speeltuin</option>
</select>
<select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="parkeren">Parkeren</option>
<option value="naar de wc">Naar de wc</option>
<option value="plattegrond bekijken">Plattegrond bekijken</option>
<option value="koopzondagen">Koopzondagen</option>
<option value="toezicht en beveiliging">Toezicht en beveiliging</option>
</select>
<br>
<input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten">
<!-- <button type="button" name="button">Bekijk resultaten</button> -->
</form>
I tried to disable the button from the start and enable it on change, but that does not work because when shoppen is selected the code stops working.
shoppen is also the option where the button needs to be enabled all the time.
How can I fix this?

If I understood correctly, the submit button should be disabled at all times and only be active in these cases:
When "shoppen" is selected on the first dropdown
When an option different than the default one is selected for any of the other dropdowns
One thing that you can do is, when the first select value is changed, disable automatically the button, and only enable it if the value of that select is shoppen.
// hide the button by default on change
var $button = $("[type=submit]");
$button.prop("disabled", true);
// only enable it if the selected option is shoppen
if (value === "shoppen") {
$button.prop("disabled", false);
}
Also, when each of the other selects is displayed in the condition below, you mark the first option (the one that is not selectable and invalid) as selected. That way the logic will be enforced in case the user chooses and option, goes back to another, and comes back to this same one:
// move to the first disabled option to force selection
$(placesLists[value]).find("option:first-child()").prop("selected", true);
Finally, add a change event handler for all the selects that are not the first/main one and enable the button if the selected option is not null (the first one):
// when a select different than the first one is changed
$('select:not([name=watwiljedoen])').change(function() {
//get current value
var value = $(this).val();
// disable the button by default
var $button = $("[type=submit]");
$button.prop("disabled", true);
// enable the button if the value is not null
if (value != null) {
$button.prop("disabled", false);
}
});
Plus disable the button by default with the disabled attribute.
Here is the code with those 3 changes:
// linking values to dropdowns
var placesLists = {
'uiteten': '#uiteten',
'snackensnoepen': '#snackensnoepen',
'drankje': '#drankje',
'evenement': '#evenement',
'stappen': '#stappen',
'cultuur': '#cultuur',
'sightseeing': '#sightseeing',
'kids': '#kids',
'informatie': '#informatie',
};
$('select[name=watwiljedoen]').change(function() {
//hide all extra lists
$('.hide').hide().prop("disabled", true);
$('#disabledselect').hide();
//get current value
var value = $(this).val();
// hide the button by default on change
var $button = $("[type=submit]");
$button.prop("disabled", true);
// only enable it if the selected option is shoppen
if (value === "shoppen") {
$button.prop("disabled", false);
}
//if there is a list for this value, show it
if (value in placesLists) {
$(placesLists[value]).show().prop("disabled", false);
$(placesLists[value]).removeClass('dropdownwwjdnonactive');
$(placesLists[value]).addClass('dropdownwwjd');
$(placesLists[value]).find("option:first-child()").prop("selected", true); // move to the first disabled option to force selection
}
});
// when a select different than the first one is changed
$('select:not([name=watwiljedoen])').change(function() {
//get current value
var value = $(this).val();
// disable the button by default
var $button = $("[type=submit]");
$button.prop("disabled", true);
// enable the button if the value is not null
if (value != null) {
$button.prop("disabled", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="wat-wil-je-doen" role="form" method="post">
<select class="dropdownwwjd" name="watwiljedoen">
<option value="lorem" disabled selected>Wat wil je gaan doen?</option>
<option value="shoppen">Shoppen</option>
<option value="uiteten">Uit eten</option>
<option value="snackensnoepen">Snacken / snoepen</option>
<option value="drankje">Drankje doen</option>
<option value="evenement">Evenementen bezoeken</option>
<option value="stappen">Stappen</option>
<option value="cultuur">Cultuur snuiven</option>
<option value="sightseeing">Sightseeing</option>
<option value="kids">Kids</option>
<option value="informatie">Meer informatie</option>
</select>
<select id="disabledselect" class="dropdownwwjdnonactive" disabled>
<option value="sdgsdg">Verfijn je keuze</option>
</select>
<select id="uiteten" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="ontbijt">Ontbijt</option>
<option value="lunch">Lunch</option>
<option value="diner">Diner</option>
<option value="vis">Vis</option>
<option value="vlees">Vlees</option>
<option value="broodje">Broodje</option>
<option value="patatje">Patatje</option>
<option value="tapas">Tapas</option>
<option value="hamburger">Hamburger</option>
<option value="grieks">Grieks</option>
<option value="pizza">Pizza</option>
<option value="pasta">Pasta</option>
<option value="traiteur">Traiteur</option>
</select>
<select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="snelle snack">Snelle snack</option>
<option value="snoepen">Snoepen</option>
<option value="IJsje">IJsje</option>
<option value="kroketje">Kroketje</option>
<option value="brammetje">Brammetje</option>
</select>
<select id="drankje" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="iets fris">Iets fris</option>
<option value="thee">Thee</option>
<option value="koffie">Koffie</option>
<option value="biertje">Biertje</option>
<option value="wijntje">Wijntje</option>
<option value="whiskey">Whiskey</option>
<option value="cocktail">Cocktail</option>
<option value="slush">Slush</option>
</select>
<select id="evenement" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="in het stadscentrum">In het stadscentrum</option>
<option value="evenement">Evenement</option>
<option value="braderie">Braderie</option>
<option value="rondje dorp">Rondje dorp</option>
</select>
<select id="stappen" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="eten">Eten</option>
<option value="drinken">Drinken</option>
<option value="theater">Theater</option>
<option value="danser">Dansen</option>
<option value="muziek">Muziek</option>
</select>
<select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="kunst">Kunst</option>
<option value="stadscentrum historie">Stadscentrum historie</option>
<option value="buitenlandse restaurants">Buitenlandse restaurants</option>
<option value="cultuur">Cultuur</option>
<option value="schilderen">Schilderen</option>
<option value="kunst uitleen">Kunst uitleen</option>
<option value="uitleen">Uitleen</option>
<option value="galerie">Galerie</option>
<option value="workshops">Workshops</option>
</select>
<select id="sightseeing" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="architectuur bekijken">Architectuur bekijken</option>
<option value="de boekenberg">De Boekenberg</option>
<option value="theater de stoep">Theater de Stoep</option>
<option value="voorstraat">Voorstraat</option>
<option value="museum winkel">Museum winkel</option>
</select>
<select id="kids" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="speelgoed">Speelgoed</option>
<option value="speeltuin">Speeltuin</option>
</select>
<select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="parkeren">Parkeren</option>
<option value="naar de wc">Naar de wc</option>
<option value="plattegrond bekijken">Plattegrond bekijken</option>
<option value="koopzondagen">Koopzondagen</option>
<option value="toezicht en beveiliging">Toezicht en beveiliging</option>
</select>
<br>
<input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten" disabled>
<!-- <button type="button" name="button">Bekijk resultaten</button> -->
</form>

<select> tags
Changes to OP
HTML & CSS
<form> will send data to a live test server when a submit event is fired.
A response from the live test server will be posted to an <iframe>.
With the exception of select#primary and the "dummy" <select> tag, all <select> tags have .secondary, .hide, and [name=secondary]. By default, they are also [disabled].
.hide is now useful -- CSS: .hide {display: none} -- using add/removeClass() instead of hide/show() methods.
The first <option> tag of every <select> has been changed:
<option value="" selected>...</option>
Now all that's needed to reset <select> tags is:
$('select').val('');
jQuery
There are two types of <select> tags that are registered to the change event: $('#primary') and $('.secondary').
When $('#primary') is triggered, all $('.secondary') are reset:
$('.secondary').addClass('hide').prop('disabled', true).val('');
The object placesLists was unnecessary. By using the value of $('#primary'), an #ID selector can be determined dynamically:
...
var category = $(this).val();
$('#' + category).removeClass('hide').prop('disabled', false).val('');
The callback function that triggers when a change event occurs on $('.secondary') is simple:
...
if ($(this).val() === '') {
$('.send').prop('disabled', true);
} else {
$('.send').prop('disabled', false);
}
This ensures that the input[type=submit] button is [disabled] when $('.secondary') hasn't been selected yet.
Demo
<!DOCTYPE html>
<html>
<head>
<style>
form,
iframe,
hr {
width: 96%
}
select {
display: inline-block;
}
#primary {
width: 45%
}
.send {
float: right;
}
.secondary {
width: 52%;
margin: 0 0 5px 5px
}
.hide {
display: none
}
hr {
clear: both;
}
</style>
</head>
<body>
<form id="list" action="https://httpbin.org/post" method="post" target='response'>
<select id="primary" name="primary">
<option value="" selected>Wat wil je gaan doen?</option>
<option value="shop">Shoppen</option>
<option value="dining">Uit eten</option>
<option value="food">Snacken / snoepen</option>
<option value="drink">Drankje doen</option>
<option value="events">Evenementen bezoeken</option>
<option value="booking">Stappen</option>
<option value="culture">Cultuur snuiven</option>
<option value="sites">Sightseeing</option>
<option value="kids">Kids</option>
<option value="info">Meer info</option>
</select>
<select class="secondary">
<option>Verfijn je keuze</option>
</select>
<select id="dining" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="ontbijt">Ontbijt</option>
<option value="lunch">Lunch</option>
<option value="diner">Diner</option>
<option value="vis">Vis</option>
<option value="vlees">Vlees</option>
<option value="broodje">Broodje</option>
<option value="patatje">Patatje</option>
<option value="tapas">Tapas</option>
<option value="hamburger">Hamburger</option>
<option value="grieks">Grieks</option>
<option value="pizza">Pizza</option>
<option value="pasta">Pasta</option>
<option value="traiteur">Traiteur</option>
</select>
<select id="food" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="snelle snack">Snelle snack</option>
<option value="snoepen">Snoepen</option>
<option value="IJsje">IJsje</option>
<option value="kroketje">Kroketje</option>
<option value="brammetje">Brammetje</option>
</select>
<select id="drink" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="iets fris">Iets fris</option>
<option value="thee">Thee</option>
<option value="koffie">Koffie</option>
<option value="biertje">Biertje</option>
<option value="wijntje">Wijntje</option>
<option value="whiskey">Whiskey</option>
<option value="cocktail">Cocktail</option>
<option value="slush">Slush</option>
</select>
<select id="events" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="in het stadscentrum">In het stadscentrum</option>
<option value="events">Evenement</option>
<option value="braderie">Braderie</option>
<option value="rondje dorp">Rondje dorp</option>
</select>
<select id="booking" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="eten">Eten</option>
<option value="drinken">Drinken</option>
<option value="theater">Theater</option>
<option value="danser">Dansen</option>
<option value="muziek">Muziek</option>
</select>
<select id="culture" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="kunst">Kunst</option>
<option value="stadscentrum historie">Stadscentrum historie</option>
<option value="buitenlandse restaurants">Buitenlandse restaurants</option>
<option value="culture">Cultuur</option>
<option value="schilderen">Schilderen</option>
<option value="kunst uitleen">Kunst uitleen</option>
<option value="uitleen">Uitleen</option>
<option value="galerie">Galerie</option>
<option value="workshops">Workshops</option>
</select>
<select id="sites" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="architectuur bekijken">Architectuur bekijken</option>
<option value="de boekenberg">De Boekenberg</option>
<option value="theater de stoep">Theater de Stoep</option>
<option value="voorstraat">Voorstraat</option>
<option value="museum winkel">Museum winkel</option>
</select>
<select id="kids" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="speelgoed">Speelgoed</option>
<option value="speeltuin">Speeltuin</option>
</select>
<select id="info" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="parkeren">Parkeren</option>
<option value="naar de wc">Naar de wc</option>
<option value="plattegrond bekijken">Plattegrond bekijken</option>
<option value="koopzondagen">Koopzondagen</option>
<option value="toezicht en beveiliging">Toezicht en beveiliging</option>
</select>
<br>
<input class='send' type="submit" value="Bekijk resultaten" disabled>
<br>
<hr>
<iframe name='response'></iframe>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#primary').on('change', function() {
$('.secondary').addClass('hide').prop('disabled', true).val('');
var category = $(this).val();
if (category === 'shop') {
$('.send').prop('disabled', false);
} else if (category === '') {
$('.send').prop('disabled', true);
} else {
$('#' + category).removeClass('hide').prop('disabled', false).val('');
$('.send').prop('disabled', true);
}
});
$('.secondary').on('change', function() {
if ($(this).val() === '') {
$('.send').prop('disabled', true);
} else {
$('.send').prop('disabled', false);
}
});
</script>
</body>
</html>

Filter data $this->db->like or $this->db->or_like not working with kecamatan dropdown menu

I was stuck in my feature for my web application, I have 4 menu filters for filtering data, fungsi_bangunan, jenis_bangunan is perfectly working, and desa/kelurahan is good to because I'm using javascript in json for populated that data when I select kecamatan and then select desa/kelurahan is working to, but when I use kecamatan filter data does not showing, the query builder I think is correctly but I cannot find the something wrong about this my problem, so maybe you guys can help me, what the solution, I use php and codeigniter framework for my project,
here the model code:
public function filter_data($filter) {
$this->db->like('jenis_kegiatan',$filter);
$this->db->or_like('fungsi_bangunan',$filter);
$this->db->or_like('kecamatan',$filter);
$this->db->or_like('desa_kel',$filter);
$query = $this->db->get('permo_pdrt');
return $query->result();
}
and controller :
public function filterkeyword() {
$filter = $this->input->post('filter');
$data['results'] = $this->model->filter_data($filter);
$this->load->view('result_view',$data);
}
and this view filter :
<div class="row">
<form action="<?php echo base_url();?>pdrtcrud/filterkeyword" method="post">
<div class="col-sm-2">
<select class="form-control form-inline" id="pilih_kecamatan" name="filter">
<option selected="selected" disabled="disabled" value="">Pilih Kecamatan</option>
<option value="Babakan Madang">Babakan Madang</option>
<option value="Bojonggede">Bojonggede</option>
<option value="Caringin">Caringin</option>
<option value="Cariu">Cariu</option>
<option value="Ciampea">Ciampea</option>
<option value="Ciawi">Ciawi</option>
<option value="Cibinong">Cibinong</option>
<option value="Cibungbulang">Cibungbulang</option>
<option value="Cigombong">Cigombong</option>
<option value="Cigudeg">Cigudeg</option>
<option value="Cijeruk">Cijeruk</option>
<option value="Cileungsi">Cileungsi</option>
<option value="Ciomas">Ciomas</option>
<option value="Cisarua">Cisarua</option>
<option value="Ciseeng">Ciseeng</option>
<option value="Citereup">Citereup</option>
<option value="Dramaga">Dramaga</option>
<option value="Gunung Putri">Gunung Putri</option>
<option value="Gunung Sindur">Gunung Sindur</option>
<option value="Jasinga">Jasinga</option>
<option value="Jonggol">Jonggol</option>
<option value="Kemang">Kemang</option>
<option value="Klapanunggal">Klapanunggal</option>
<option value="Leuwiliang">Leuwiliang</option>
<option value="Leuwisadeng">Leuwisadeng</option>
<option value="Megamendung">Megamendung</option>
<option value="Nanggung">Nanggung</option>
<option value="Pamijahan">Pamijahan</option>
<option value="Parung">Parung</option>
<option value="Parung Panjang">Parung Panjang</option>
<option value="Ranca Bungur">Ranca Bungur</option>
<option value="Rumpin">Rumpin</option>
<option value="Sukajaya">Sukajaya</option>
<option value="Sukamakmur">Sukamakmur</option>
<option value="Sukaraja">Sukaraja</option>
<option value="Tajur halang">Tajur halang</option>
<option value="Tamansari">Tamansari</option>
<option value="Tanjungsari">Tanjungsari</option>
<option value="Tenjo">Tenjo</option>
<option value="Tenjolaya">Tenjolaya</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" id="pilih_desa_kel" name="filter">
<option>Pilih Desa/Kelurahan</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" name="filter">
<option selected="selected" disabled="disabled" value="">Jenis Kegiatan</option>
<option value="Rumah Tinggal">Rumah Tinggal</option>
<option value="Apartemen">Apartemen</option>
<option value="Hotel">Hotel</option>
<option value="Kantor Swasta">Kantor Swasta</option>
<option value="Kantor Pemerintah">Kantor Pemerintah</option>
<option value="Gedung Badan Usaha Pemerintah">Gedung Badan Usaha Pemerintah</option>
<option value="Rumah Kantor">Rumah Kantor</option>
<option value="Bank">Bank</option>
<option value="Toko">Toko</option>
<option value="Rumah Toko">Rumah Toko</option>
<option value="Rumah Makan">Rumah Makan</option>
<option value="Restoran">Restoran</option>
<option value="Warung">Warung</option>
<option value="Kios">Kios</option>
<option value="Pasar Tradisional">Pasar Tradisional</option>
<option value="Minimarket">Minimarket</option>
<option value="SuperMarket">SuperMarket</option>
<option value="Fasilitas Rekreasi">Fasilitas Rekreasi</option>
<option value="SPBU">SPBU</option>
<option value="SPBG">SPBG</option>
<option value="Bengkel">Bengkel</option>
<option value="Showroom">Showroom</option>
<option value="Pool Kendaraan">Pool Kendaraan</option>
<option value="Gedung Parkir">Gedung Parkir</option>
<option value="Gudang">Gudang</option>
<option value="Instalasi Pengolahan">Instalasi Pengolahan</option>
<option value="Instalasi Jaringan Listrik">Instalasi Jaringan Listrik</option>
<option value="Instalasi Telekomunikasi">Instalasi Telekomunikasi</option>
<option value="Instalasi Jaringan Gas">Instalasi Jaringan Gas</option>
<option value="Sarana Pendidikan">Sarana Pendidikan</option>
<option value="Sarana Ibadah">Sarana Ibadah</option>
<option value="Gedung Olahraga">Gedung Olahraga</option>
<option value="Gedung Olahraga">Gedung Olahraga</option>
<option value="Rumah Sakit">Rumah Sakit</option>
<option value="Klinik">Klinik</option>
<option value="Balai Pengobatan Lainnya">Balai Pengobatan Lainnya</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" name="filter">
<option selected="selected" disabled="disabled" value="">Fungsi Bangunan</option>
<option value="Hunian">Hunian</option>
<option value="Usaha">Usaha</option>
<option value="Keagmaan">Keagamaan</option>
<option value="Sosial Budaya">Sosial Budaya</option>
<option value="Campuran">Campuran</option>
</select>
</div>
<div class="col-md-1">
<input class="btn btn-success" type="submit" name="btnsubmit" value="filter">
</div>
</form>

Echoing HTML select value not giving same value set

I have this html select value that I used with AngularJS in building. Anytime I print the value selected from html in php, I keep getting a different thing. Eg. I selected Computer from the select group and the value="computer", when I echo in php, I get something like this:
? string: computer ?
I can't figure what the problem is.
HTML code below
<div class="form-group" form-group-sm>
<label>Faculty/School:</label>
<select name="faculty" class="form-control" ng-model="tfaculty">
<option value="Engineering">Faculty of Engineering</option>
<option value="Medicine">Faculty of Medicine</option>
<option value="Agriculture">Faculty of Agriculture</option>
<option value="Bioscience">Faculty of Bioscience</option>
<option value="Physical Science">Faculty of Physical Science</option>
<option value="Law">Faculty of Law</option>
<option value="Mgt Tech">Faculty of Management Sci./Tech.</option>
<option value="Soc. Science">Faculty of Social Science</option>
<option value="Health Sci.">Faculty of Health Sci. and Tech.</option>
<option value="Envt Tech">Faculty of Environmental Sci./Tech.</option>
<option value="Education">Faculty of Education</option>
<option value="Arts">Faculty of Arts</option>
</select>
</div>
<!--this section shows to choose department-->
<div class="form-group" form-group-sm>
<span ng-show="tfaculty == 'Engineering'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Elect Elect Eng">Electrical and Electronics</option>
<option value="Computer Eng">Computer Engineering</option>
<option value="Chemical Eng">Chemical Engineering</option>
<option value="Civil Eng">Civil Engineering</option>
<option value="Petroleum Eng">Petroleum Engineering</option>
<option value="Mechanical Eng">Mechanical Engineering</option>
<option value="Polymer Eng">Polymer and Textile</option>
<option value="Met Mat Eng">Material and Metallurgical</option>
<option value="Agric and Bio">Agric and BioResources</option>
<option value="Mechatronics Eng">Mechatronics Engineering</option>
</select>
</span>
<span ng-show="tfaculty == 'Medicine'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Surgery">Surgery</option>
<option value="Anaesthesiology">Anaesthesiology</option>
<option value="Chemical Pathology">Chemical Pathology</option>
<option value="Haematology">Haematology</option>
<option value="Histopathology">Histopathology</option>
<option value="Medicine">Medicine</option>
<option value="pthamology">Opthamology</option>
<option value="Paediatrics">Paediatrics</option>
<option value="Radiology">Radiology</option>
<option value="Medical Microbiology">Medical Microbiology</option>
<option value="Anatomy">Anatomy</option>
<option value="Physiology">Physiology</option>
</select>
</span>
<span ng-show="tfaculty == 'Agriculture'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Agric Economics">Agric Economics and Extension</option>
<option value="Crop Science">Crop Science and Horticulture</option>
<option value="Animal Science">Animal Science</option>
<option value="Forestry">Forestry and Widelife</option>
<option value="Fisheries">Fisheries and Aquaculture</option>
<option value="Food Science">Food Science and Technology</option>
<option value="Soil Science">Soil Science and Land Resources</option>
</select>
</span>
Php code below:
if (isset($_POST['search'])) { //narrowing d search by department
$department = $_POST['department'];
echo $department;}

Form Submit Without Page Refreshing- jQuery/PHP

I'm really new to this site and new to web design. Lately, I'd been trying so hard to design a web page for days/weeks and I ended up stuck at "Contact Form".
I used Bootstrap to write a form that pop up from a modal window. Plus, I also linked a remote contact form so I can just link it up for different pages.
However I've got not much knowledge of php and jquery to validate and submit my form on the fly at that modal page without refreshing the page. I am stuck her for days going a week. Here is my code please help.
I linked remote contact form from homepage like this :
Subscribe! <b class=".glyphicon-triangle-bottom:before">▼</b>
<ul class="dropdown-menu">
<li><a data-toggle="modal" href="form/contactForm.php" data-target="#contactmodal" role="button"><i id="ddicons" class="fa fa-envelope-square"></i> Newsletter</a></li>
And the linked contactForm.php goes like this :
UPDATED CHECK BELOW
and the mailform.php is like this:
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "myemail#email.com";
$email_subject = "Newsletter Subscription";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['name']) ||
!isset($_POST['email']) ||
!isset($_POST['country']) ||
!isset($_POST['gender']) ||
!isset($_POST['terms'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$inputName = $_POST['name']; // required
$inputEmail = $_POST['email']; // required
$country = $_POST['country']; // required
$gender = $_POST['gender']; // not required
$terms = $_POST['terms']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$inputEmail)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$inputName)) {
$error_message .= 'The Name you entered does not appear to be valid.<br />';
}
if(strlen($inputCountry) < 1) {
$error_message .= 'Please select your country.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
if(strlen($inputGender) < 1) {
$error_message .= 'Please select your gender.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($inputName)."\n";
$email_message .= "Email: ".clean_string($inputEmail)."\n";
$email_message .= "Country: ".clean_string($inputCountry)."\n";
$email_message .= "Gender: ".clean_string($inputGender)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
#mail($email_to, $email_subject, $email_message, $headers);
?>
<!-- include your own success html here -->
Thank you for contacting us. We will be in touch with you very soon.
<?php
}
?>
Problem:
I've got no idea what going on now. The homepage modal does load the remote form but the submit button isn't working and when it does, it refreshes. I do wish all the input in the form are required.
So far I have this as my contact form. Country: Gender : Agree: and Submit: are not working well.. :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Ajax Contact Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit_btn").click(function() {
var proceed = true;
//simple validation at client's end
//loop through each field and we simply change border color to red for invalid fields
$("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
$(this).css('border-color','');
if(!$.trim($(this).val())){ //if this field is empty
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
//check invalid email
var email_reg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
});
if(proceed) //everything looks good! proceed...
{
//get input field values data to be sent to server
post_data = {
'user_name' : $('input[name=name]').val(),
'user_email' : $('input[name=email]').val(),
};
//Ajax post data to server
$.post('contact_me.php', post_data, function(response){
if(response.type == 'error'){ //load json data from server and output message
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
//reset values in all input fields
$("#contact_form input[required=true], #contact_form textarea[required=true]").val('');
$("#contact_form #contact_body").slideUp(); //hide form after success
}
$("#contact_form #contact_results").hide().html(output).slideDown();
}, 'json');
}
});
//reset previously set border colors and hide all message on .keyup()
$("#contact_form input[required=true], #contact_form textarea[required=true]").keyup(function() {
$(this).css('border-color','');
$("#result").slideUp();
});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- MAIL MODAL -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Join Nexeu Mailing List!</h4>
</div>
<div class="modal-body">
<!--- Form --->
<form action="mailform.php" class="form-horizontal" id="contact_form" method="post" name="modalform" role="form"/>
<fieldset>
<div class="form-style" id="contact_form">
<div class="form-style-heading">Please Contact Us</div>
<div id="contact_results"></div>
<div id="contact_body">
<!-- Name input-->
<div class="form-group">
<label class="control-label col-md-4" for="name"><span>Name <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<input id="name" name="name" type="text" maxlength="180" required="true" placeholder="Your Name" required>
</div>
</div>
<!-- e-mail input-->
<div class="form-group">
<label class="control-label col-md-4" for="email"><span>Email <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<input type="email" class="form-control" id="inputEmail" required="true" placeholder="Email" required>
</div>
</div>
<!-- Country Select -->
<div id="choosecountry" class="form-group">
<label class="control-label col-md-4" for="subject"><span>Country <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<select id="country" name="subject" class="form-control" title="Select Country..." required>
<option value="">Select Country...</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cabo Verde">Cabo Verde</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo, Republic of the">Congo, Republic of the</option>
<option value="Congo, Democratic Republic of the">Congo, Democratic Republic of the</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote d'Ivoire">Cote d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Kosovo">Kosovo</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar (Burma)">Myanmar (Burma)</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="North Korea">North Korea</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="St. Kitts and Nevis">St. Kitts and Nevis</option>
<option value="St. Lucia">St. Lucia</option>
<option value="St. Vincent and The Grenadines">St. Vincent and The Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Korea">South Korea</option>
<option value="South Sudan">South Sudan</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Timor-Leste">Timor-Leste</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="UK (United Kingdom)">UK (United Kingdom)</option>
<option value="USA (United States of America)">USA (United States of America)</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City (Holy See)">Vatican City (Holy See)</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<!-- Gender Select -->
<div class="form-group">
<label class="col-xs-4 control-label" for="gender">Gender </label>
<div class="col-xs-6">
<div class="btn-group" id="genderbtn" name="gender" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="gender" value="male" required>Male</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="female"required>Female</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="other"required>Other</label>
</div>
</div>
</div>
<!--- Agreement Button --->
<div class="form-group">
<div class="col-xs-6 col-xs-offset-4">
<div class="checkbox">
<label>
<input id="terms" type="checkbox" for="agree" name="agree" value="agree" data-error="Before you wreck yourself" required>
Agree with the terms and conditions </label>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-xs-4 control-label" for="submit"></label>
<div class="col-md-6">
<button id="submit_btn" type="submit" value="Submit" class="submit btn btn-custom">Submit!</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
<!--- /Form --->
</div><!-- end modal-body -->
<div class="modal-footer"></div>
<!-- end modal-footer -->
<!-- end mailmodal -->
<!-- /MAIL MODAL -->
</body>
</html>

You need use ajax, here a example: http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form

You may use bellow code for form submit without refresh.
$(document).ready(function(){
$("#login-form-submit").click(function(){
var username = $("#login-form-username").val();
var password = $("#login-form-password").val();
if(username == ""){
alert("Please Enter Email.");
$("#login-form-username").focus();
return false;
}
if(password == "")
{
alert("Please Enter Password.");
$("#login-form-password").focus();
return false;
}
var form = document.getElementById('login-form');
formdata2 = new FormData(form);
$.ajax({
url : "controller/ajax/check_login.php",
cache : false,
contentType : false,
processData : false,
data : formdata2,
type : 'post',
success : function(data) {
if (data == 1) {
alert('success');
}else {
alert('Invalid Authentication.');
}
}
});
return false;
});
});