html get Method sending wrong url - javascript

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

Related

How to show only data-subtext matching with a selected option value - jQuery

I have a dropdown menu that looks like the following:
<select name="category" id="category">
<option value="category-1">category-1</option>
<option value="category-2">category-3</option>
<option value="category-3">category-2</option>
</select>
<select name="product" id="product">
<option data-subtext="category-1">product</option>
<option data-subtext="category-1">product</option>
<option data-subtext="category-2">product</option>
<option data-subtext="category-2">product</option>
<option data-subtext="category-3">product</option>
<option data-subtext="category-3">product</option>
</select>
how do I show only products matching data-subtext with its category value?

You need the hide and show it based on the selected value
$('select[name=category]').on('change', function (event) {
let selectedValue;
selectedValue = $(this).find('option:selected').text();
$('select[name=product] option').filter(function () {
if ($(this).attr('data-subtext') !== selectedValue) {
return true;
} else {
$(this).show();
this.selected = true;
}
}).hide()
});

set input value by selected option values

what I am trying to do is to set the kabelname, which is setted by selcted options into the input field by ordering the name like the order of the option fields.
This should happen by selecting or deselecting a option and wihout overwritting the whole input fild. It should only add or remove the values of the selected option.
If a kabelart is selected and steckertyp 1, the value of steckertyp1 should be added with a "-" to the value of kabelart into the input field of kabelname.
Then if a Verwendung is selected it should be added to kabelname with a "." and the value. Else if Verwendung is selected but Steckertyp isn´t, it schould be added with a "-" to kabelname.
The same thing shoul happen with Anschlusstyp...
If kabelart is setted to "", then kabelname should be cleared. But if one of the other options is changed or setted to "" it only should be removed on its position.
I´m sorry for that bad describtion but I hope you know what I mean. If not feel free to ask.
Thank you
function changedKabelart(kabelartValue){
var kaValue = kabelartValue;
if(kaValue != ""){
document.getElementById("kabelname").value = kaValue;
}
else{
document.getElementById("kabelname").value = kaValue;
}
}
/* Steckertyp 1 */
function changedSteckertyp1(sttyp1Value){
var st1Value = sttyp1Value;
if(st1Value != ""){
document.getElementById("kabelname").value += "-" + st1Value;
}
else{
document.getElementById("kabelname").value += st1Value;
}
}
/* Verwendung */
function changedVerwendung(verwendungValue){
var vwValue = verwendungValue;
var st1Value = document.getElementById("steckertyp1").value;
if(vwValue != "" && st1Value != ""){
document.getElementById("kabelname").value += "." + vwValue;
}
else if(vwValue != "" && st1Value == ""){
document.getElementById("kabelname").value += "-" + vwValue;
}
else{
document.getElementById("kabelname").value += vwValue;
}
}
/* Anschlusstyp 1 */
function changedAnschluss1(anschluss1Value){
var ansch1Value = anschluss1Value;
if(ansch1Value != ""){
document.getElementById("kabelname").value += "-" + ansch1Value;
}
else{
document.getElementById("kabelname").value += ansch1Value;
}
}
<p> Kabelart </p>
<select name="kabelart" id="kabelart" required onchange="changedKabelart(this.value);">
<option value="" selected></option>
<option value="K" > Kabel</option>
<option value="K2" > Kabel 2</option>
<option value="K3" > Kabel 3</option>
</select>
<p> Steckertyp </p>
<select name="steckertyp1" id="steckertyp1" onchange="changedSteckertyp1(this.value);">
<option value="" selected></option>
<option value="ST1" >ST1</option>
<option value="ST2" >ST2</option>
<option value="ST3" >ST3</option>
</select>
<p> Verwendung </p>
<select name="verwendung" id="verwendung" onchange="changedVerwendung(this.value);" >
<option value="" selected></option>
<option value="VW1" >VW1</option>
<option value="VW2" >VW1</option>
</select>
<p> Anschlusstyp </p>
<select name="anschlusstyp1" id="anschlusstyp1" onchange="changedAnschluss1(this.value);" >
<option value="" selected></option>
<option value="A1" >A1</option>
<option value="A2" >A2</option>
<option value="A3" >A3</option>
</select>
<br><br><br>
<input type="text" name="kabelname" id="kabelname" placeholder="Kabelname" readonly />

Instead of using different functions to update kabelname, use only one. Then everything will be covered.
<p> Kabelart </p>
<select name="kabelart" id="kabelart" required onchange="update();">
<option value="" selected></option>
<option value="K" > Kabel</option>
<option value="K2" > Kabel 2</option>
<option value="K3" > Kabel 3</option>
</select>
<p> Steckertyp </p>
<select name="steckertyp1" id="steckertyp1" onchange="update();">
<option value="" selected></option>
<option value="ST1" >ST1</option>
<option value="ST2" >ST2</option>
<option value="ST3" >ST3</option>
</select>
<p> Verwendung </p>
<select name="verwendung" id="verwendung" onchange="update();" >
<option value="" selected></option>
<option value="VW1" >VW1</option>
<option value="VW2" >VW1</option>
</select>
<p> Anschlusstyp </p>
<select name="anschlusstyp1" id="anschlusstyp1" onchange="update();" >
<option value="" selected></option>
<option value="A1" >A1</option>
<option value="A2" >A2</option>
<option value="A3" >A3</option>
</select>
<br><br><br>
<input type="text" name="kabelname" id="kabelname" placeholder="Kabelname" readonly />
<script>
function update() {
var kabelname ;
if(document.getElementById("kabelart").value === "") {
kabelname = "";
}
else {
kabelname = document.getElementById("kabelart").value;
if(document.getElementById("steckertyp1").value!== ""){
kabelname += "-" + document.getElementById("steckertyp1").value;
if(document.getElementById("verwendung").value !== "") {
kabelname += "." + document.getElementById("verwendung").value;
if(document.getElementById("anschlusstyp1").value!== "") {
kabelname += "-" + document.getElementById("anschlusstyp1").value;
}
}
else {
if(document.getElementById("anschlusstyp1").value!== "") {
kabelname += "." + document.getElementById("anschlusstyp1").value;
}
}
}
else {
if(document.getElementById("verwendung").value !== "") {
kabelname += "-" + document.getElementById("verwendung").value;
if(document.getElementById("anschlusstyp1").value!== "") {
kabelname += "." + document.getElementById("anschlusstyp1").value;
}
}
else {
if(document.getElementById("anschlusstyp1").value!== "") {
kabelname += "-" + document.getElementById("anschlusstyp1").value;
}
}
}
}
document.getElementById("kabelname").value = kabelname;
}
</script>

How to hide\show specific value of option based on another selected option by JQuery?

I Have html select form like this:
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
In my case I need to make it so that if I choose "1" at the first select form (# id_num), then the next select form (#id_choices) should only show "car" and "bike" options, and if I choose "2", #id_choices should only show "house" and "money", and also the rest.. But if i select "all", then every options on #id_choices should be shown.
How to solve that condition by using jQuery?

You can use jQuery's $.inArray() to filter your options, and make them display: none; depending upon the occurence of the item in the array,
Please have a look on the code below:
$(function() {
$('#id_num').on('change', function(e) {
if ($(this).val() == 1) {
var arr = ['car', 'bike'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 2) {
var arr = ['house', 'money'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 3) {
var arr = ['plane', 'wife'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else {
$('#id_choices option').each(function(i) {
$(this).css('display', 'inline-block');
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option disabled selected>Select</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house' >house</option>
<option value='money' >money</option>
<option value='plane' >plane</option>
<option value='wife' >wife</option>
</select>
Hope this helps!

You can run a function once when the page loads and then every time #id_num changes, such that all the visible #id_choices options are removed (using remove()), and then only the relevant options are re-added to #id_choices (using append()) to replace them.
Working Example:
$(document).ready(function(){
var car = '<option value="car">car</option>';
var bike = '<option value="bike">bike</option>';
var house = '<option value="house">house</option>';
var money = '<option value="money">money</option>';
var plane = '<option value="plane">plane</option>';
var wife = '<option value="wife">wife</option>';
function options1() {
$('#id_choices').append(car);
$('#id_choices').append(bike);
}
function options2() {
$('#id_choices').append(house);
$('#id_choices').append(money);
}
function options3() {
$('#id_choices').append(plane);
$('#id_choices').append(wife);
}
function displayOptions() {
$('#id_choices option').remove();
switch ($('#id_num option:selected' ).text()) {
case('1') : options1(); break;
case('2') : options2(); break;
case('3') : options3(); break;
case('all') : options1(); options2(); options3(); break;
}
}
$('#id_num').change(function(){displayOptions();});
displayOptions();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
For the sake of completeness, here is the same approach as above, but this time in native javascript, so you can compare and contrast with the jQuery above:
var numbers = document.getElementById('id_num');
var choices = document.getElementById('id_choices');
function displayOptions() {
var optionSet1 = ['car', 'bike'];
var optionSet2 = ['house', 'money'];
var optionSet3 = ['plane', 'wife'];
var oldOptions = choices.getElementsByTagName('option');
var selected = numbers.options[numbers.selectedIndex].text;
while (oldOptions.length > 0) {
choices.removeChild(oldOptions[0]);
}
switch (selected) {
case('1') : var optionSet = optionSet1; break;
case('2') : optionSet = optionSet2; break;
case('3') : optionSet = optionSet3; break;
case('all') : optionSet = optionSet1.concat(optionSet2).concat(optionSet3); break;
}
for (var i = 0; i < optionSet.length; i++) {
var option = document.createElement('option');
option.setAttribute('value',optionSet[i]);
option.textContent = optionSet[i];
choices.appendChild(option);
}
}
numbers.addEventListener('change',displayOptions,false);
window.addEventListener('load',displayOptions,false);
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>

Add the attribute display with a value of none using .prop() instead of using disabled attribute (like in Saumya's answer) in case you want them completely invisible instead of just disabled/grayed-out

there may be a better way, however this does work.. you can also add hide/display classes to any other elements
$(document).ready(function () { $('#id_num').on('change', change) });
function change() {
$('#id_choices > option').hide();
$($(this).find(':selected').attr('clssval')).show();
}
.sel{display:none;}
.num1{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1' clssval=".num1">1</option>
<option value='2' clssval=".num2">2</option>
<option value='3' clssval=".num3">3</option>
<option value='' clssval=".num1,.num2,.num3">all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car' class="sel num1">car</option>
<option value='bike' class="sel num1">bike</option>
<option value='house' class="sel num2">house</option>
<option value='money' class="sel num2">money</option>
<option value='plane' class="sel num3">plane</option>
<option value='wife' class="sel num3">wife</option>
</select>

Verify values of selctbox using jquery

i'm new to this. I'm using in a html page with 2 selctboxs, one for min price and the other for max price and a hidden input to put on it the combination of the two values of the selectboxs.
<div class="option-bar mini first">
<label><?=__("Min Price")?></label>
<span class="selectwrap">
<select name="min-price" id="pmin" class="search-select">
<option value=""></option>
<option value="1000">$1000</option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
</select>
</span>
</div>
<div class="option-bar mini">
<label><?=__("Max Price")?></label>
<span class="selectwrap">
<select name="max-price" id="pmax" class="search-select">
<option></option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
<option value="10000">$10,000</option>
</select>
</span>
</div>
<input type="hidden" id="prix" name="prix" class="sel2" value="" />
and i got this jquery code :
$("#pmin, #pmax").change(function(){
update();
});
function update() {
$("#prix").val($('#pmin').val() + "-" + $('#pmax').val());
}
So what i want to do is when the user select options in the two selectbox, verify if the min price value is lower than the max price value and if not show a message.
Thnx a lot guys.

$("#pmin, #pmax").change(function() {
if ($("#pmin").val() && $("#pmax").val()) { //check if both have values
if (parseFloat($("#pmin").val()) > parseFloat($("#pmax").val())) { //check if valid range
alert('invalid range')
return;
}
}
update();
});

$(".search-select").change(fucntion(){
var max_val = $("#pmax").val();
var min_val = $("#pmin").val();
if(max_val != '' && min_val != '' && max_val < min_val){
alert("Max value is less than Min value.");
}
});
Try this..!!

You should modify the change and update method as shown below:
$("#pmin, #pmax").change(function() {
if ($('#pmin').val() != "" && $('#pmax').val() != "") {
update();
}
});
function update() {
var computedValue = parseInt($('#pmin').val()) - parseInt($('#pmax').val());
if (computedValue < 0) {
alert('Invalid selection.');
}
$("#prix").val(computedValue);
}
Refer the demo.

javascript validate form with two or more dropdown lists

I'm designing a html form that has two dropdown lists and a few text inputs. I intend to validate using javascript but i'm not able to validate the dropdown lists.
I have tried and tested the JSFiddle but cannot figure out how i can use this for two or more dropdown lists. My code looks like this
<script>
function ValidateForm(){
var names = document.forms["myForm"]["names"].value;
var month = document.forms["myForm"]["month"].value;
var year = document.forms["myForm"]["year"].value;
if (names == null || names ==""){
lert ("name cannot be empty");
return false;
}
if(month == null || month ==""){
alert ("month must be selected");
return false;
}
if(year == null || year ==""){
alert ("year must be selected");
return false;
}
}
</script>
<html>
<body>
<form enctype="multipart/form-data" name = "myForm" action = "" onsubmit="return ValidateForm()" method = "post">
Name: <input name ="names" type = "text" size = "55" maxlength = "100"><br>
Month: <select id ="selectmonth" name="month">
<option value="">-select month-</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option><p>
<option value="April">April</option><p>
<option value="May">May</option><p>
<option value="June">June</option><p>
<option value="July">July</option><p>
<option value="August">August</option><p>
<option value="September">September</option><p>
<option value="October">October</option><p>
<option value="November">November</option><p>
<option value="December">December</option><p>
</select><p>
Year: <select name ="year">
<option value = ""> -select year-</option>
<option value = "2015"> 2015 </option>
<option value = "2016"> 2016 </option>
<option value = "2017"> 2017 </option>
</select><p>
<input name = "add_person" type="submit" value = "submit">
</form>
<body>
</html>
How can i have the form validate everything on clicking the submit button

After noticing .. you are missing an a in the alert.
Like this:
function ValidateForm(){
var names = document.forms["myForm"]["names"].value;
var month = document.forms["myForm"]["month"].value;
var year = document.forms["myForm"]["year"].value;
if (names == null || names ==""){
alert ("name cannot be empty"); //<-- here was lert()
return false;
}
if(month == null || month ==""){
alert ("month must be selected");
return false;
}
if(year == null || year ==""){
alert ("year must be selected");
return false;
}
}
<form enctype="multipart/form-data" name = "myForm" action = "" onsubmit="return ValidateForm()" method = "post">
Name: <input name ="names" type = "text" size = "55" maxlength = "100"><br>
Month: <select id ="selectmonth" name="month">
<option value="">-select month-</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option><p>
<option value="April">April</option><p>
<option value="May">May</option><p>
<option value="June">June</option><p>
<option value="July">July</option><p>
<option value="August">August</option><p>
<option value="September">September</option><p>
<option value="October">October</option><p>
<option value="November">November</option><p>
<option value="December">December</option><p>
</select><p>
Year: <select name ="year">
<option value = ""> -select year-</option>
<option value = "2015"> 2015 </option>
<option value = "2016"> 2016 </option>
<option value = "2017"> 2017 </option>
</select><p>
<input name = "add_person" type="submit" value = "submit">
</form>
After replacing for alert.. it works..
EDIT 1:
Regarding the JSFiddle as you suggested in the comment.
I've simplified it and made it work like you desire.
function fun()
{
var mainCard = document.getElementById("cardtype");
var mainCardValue = mainCard.value;
var otherCard = document.getElementById("othercard");
var otherCardValue = otherCard.value;
if (mainCardValue == "selectcard") {
alert("Please select a card type");
} else if (otherCardValue == 'selectcard') {
alert("Please select a secondary card type");
}
}
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select>
<select id="othercard" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select>
<input type="button" onclick="fun()" value="click here">

Categories