For paging I have this code which enables me to update the querystring without losing any elements in the querystring.
var tRVD = new RouteValueDictionary(ViewContext.RouteData.Values);
foreach (string key in Request.QueryString.Keys)
{
tRVD[key] = Request.QueryString[key];
}
tRVD["page"] = #i;
#Html.ActionLink(#i.ToString(CultureInfo.InvariantCulture), "Index", tRVD);
I need to do the same with sorting. I have the following code but of course the querystring is overwritten by sortby. What I need is the same as I have for paging, something that just adds sortby to the querstring if it is not there and updates it if it is. How is this possible?
<form name="sortbyformtop">
<select onchange="location.href=this.options[this.selectedIndex].value" name="sortbyselecttop">
<option value=""></option>
<option value="sortby=accommodationtype">Accommodation type</option>
<option value="sortby=mostreviewed">Most reviewed</option>
<option value="sortby=lowestprice">Lowest price</option>
</select>
</form>
So, what I'm trying to achieve is setting the querystring to the same value as it is now plus sortby.
You need to add an <input type="hidden"> to your form for each value in the querystring.
Related
I made a quick code in html and js. The thing i want to do is via method get, to send the <select> into the url but without the ? symbol, and also the names in the select attributes. For example if I click the button, the url will appear
https://mytesting.com/?marca=HEREGOESTHESELECTEDITEM&modelo=HEREGOESTHESELECTEDITEM&ano=HEREGOESTHESELECTEDITEM`
What i want to do, is just to remove the ? and the names marca= &modelo= and &ano= and only show the selected items. For example:
`https://mytesting.com/Firstelement-Secondelement-Thirdelement
This is my html code
<form name="marcas" action="https://mytesting.com">
<select name="marca" onchange="relation()">
<option value="-">Marca</option>
<option value="vw">VW</option>
<option value="nissan">Nissan</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="buick">Buick</option>
<option value="chevrolet">Chevrolet</option>
</select>
<select name="modelo">
<option value="modelo">Modelo</option>"
</select>
<select name="ano">
<option value="ano">Año</option>
</select>
<button class="button1" id="send" type="submit" method="GET">Buscar</button>
</form>
And the javascript I made, just shows the corresponding items that are in an array.
You'll need to use JavaScript to intercept the submit event and craft the new URL
document.querySelector("form[name=marcas]").addEventListener("submit", (e) => {
e.preventDefault(); // stop the normal form submit action
const data = new FormData(e.target); // capture all the fields
const url = new URL(e.target.action); // start with the form action
// create the pathname by joining together all the field values
url.pathname = Array.from(data, ([_, val]) => val).join("-");
// now redirect to the new URL
location.href = url;
});
my multi-select selection is only giving the output as my first selection. I'm sending the data to firebase, and only the first selection is reflected there. For example, if I select (energy, health care, real estate) in my firebase it only shows energy.
Here is my HTML code:
<select name="Sector" value="sector" id="interested_sector" class="selectpicker" multiple="multiple" data-live-search="true">
<option value="">Sector</option>
<option value="energy">Energy</option>
<option value="materials">Materials</option>
<option value="consumer discretionary">Consumer Discretionary</option>
<option value="consumer staples">Consumer staples</option>
<option value="health care">Health Care</option>
<option value="financials">Financials</option>
<option value="information technology">Information Technology</option>
<option value="telecommunication services">Telecommunication services</option>
<option value="utilites">Utilites</option>
<option value="real estate">Real Estate</option>
</select>
Here's is the snippet of code in my .js file that sends data to realtime database
var interested_sector = getInputVal('interested_sector')
function getInputVal(id){
return document.getElementById(id).value;
}
function saveUserInfo( interested_sector){
firebase.database().ref('User_info/'+id).update({
interested_sector: interested_sector,
}).then(() => {
window.location = //it goes to a different html page;
})
}
A firebase RealTime Database is made up of JSON Objects, when you get the Values from the input, make sure they return in proper format, here, you seem to be updating an existing key that is called interested_sector and adding value health, energy etc to it. As Realtime Database accepts JSON, what you send has to be a proper JSON, that is where your code is breaking the value and probably taking the first number, you need to run through all the values taken in and decide in what format do you want to store them?
for example:
{
interested_sector: {
1: 'health',
2: 'energy'
}
}
or
{
interested_sector: "health, energy"
}
as you can see both are working options, but you need to parse the values first before you send them for an update.
So after testing your code, it turns out that interested_sector value changes everything you select a new value, it replaces the old value, that is why when you update the field in firebase database, it only shows the latest of the values,
so for example:
if you select 'Energy' and hit the button to save info, it will save 'Energy'
and then you click on 'Materials' and hit the button to save the info, the interested_sector value gets changed and replaces the old value and the function to save the info changes the firebase value as well.
solution is to add a local var that keeps the value and keeps on appending them interested_sector += new value and use a separator like ',' or ';'.
so the correct code of the above, should be something like this:
<!DOCTYPE html>
<html>
<body>
<select name="Sector" value="sector" id="interested_sector" class="selectpicker" multiple="multiple" data-live-search="true">
<option value="sector">Sector</option>
<option value="energy">Energy</option>
<option value="materials">Materials</option>
<option value="consumer discretionary">Consumer Discretionary</option>
<option value="consumer staples">Consumer staples</option>
<option value="health care">Health Care</option>
<option value="financials">Financials</option>
<option value="information technology">Information Technology</option>
<option value="telecommunication services">Telecommunication services</option>
<option value="utilites">Utilites</option>
<option value="real estate">Real Estate</option>
</select>
<button onclick="getCalled()">Get Called</button>
<script>
var final_val = "";
function getInputVal(id) {
return document.getElementById(id).value;
}
function getCalled() {
var interested_sector = getInputVal('interested_sector');
final_val += interested_sector + ', ';
console.log(final_val);
alert(final_val);
}
</script>
</body>
</html>
FYI: firebase's update function doesn't append to the old value, it changes only the specific fields that you want to change and keeps all the other fields the same. unlike ref().set() function which completely rewrites the entire json object
I'm trying to make a chained dropdown that contain continent, region,country, province,city,district, and village, but i'm stuck at country.
my dropdown require me to use the id from database to chain all the dropdown, so to get the text name i usually using this method :
Country :
<select name="loc_country" class="loc_country loc5" id="loc_country" onchange="javacript: var valor2 = this.options[selectedIndex].text; document.getElementById('loc_country_real').value = valor2;">
<option value="0">-Select-</option>
</select>
<input type="text" id="loc_country_real" name="loc_country_real">
However this method doesn't work this time so i try another approach with :
<select name="loc_country" class="loc_country loc5" id="loc_country">
<option value="0">-Select-</option>
</select>
<input type="text" id="loc_country_real" name="loc_country_real">
and js :
$("#continent").change(function () {
$("#loc_country_real").val($('#loc_country').text());
});
and hoping when my select box with id="continent" changing, the value will update.
And that method also failed because the value given in "loc_country_real" doesn't match with selectbox "loc_country" (e.g.:when i selected europe on the continent selectbox, the loc_country select box will give me a list of european countries but the value in "loc_country_real" will be asian from country)
i need to make the text in "loc_country" and "loc_country_real" match but i have no idea how to do it, please help.
Try this:
Change your select's to have a VALUE matching the text you want E.G:
<select name="loc_country" class="loc_country loc5" id="loc_country">
<option value="0">--Select--</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>
You can then use document.getElementById('loc_country').value to get the selected option value
// Change `loc_country_real`'s value to match `loc_country` selected option
document.getElementById('loc_country_real').value = document.getElementById('loc_country').value;
Or the jQuery way:
$('#loc_country').change(function(){
$('#loc_country_real').val($('#loc_country').val());
});
Edit since you mentioned you cannot use value:
$('#loc_country').change(function(){
var textOfSelectedOption = $("#loc_country option:selected").text();
$('#loc_country_real').val(textOfSelectedOption);
});
I have a page with isotope filter. It's using the combination filters with hash history. So whenever multiple filters are selected it updates the URL like this:
example.com/portfolio/#.filter1&.filter4&.filter6
Then I have a search form with multiple 'select' elements:
<form id="search-form" method="post">
<select>
<option value="filter1">Filter Name</option>
<option value="filter2">Filter Name</option>
<option value="filter3">Filter Name</option>
</select>
<select>
<option value="filter4">Filter Name</option>
<option value="filter5">Filter Name</option>
<option value="filter6">Filter Name</option>
</select>
...
<input type="submit" value="Search" />
</form>
I would like to combine the values from all the selected options of each 'select' element into the single URL and redirect to isotope ('portfolio') page with that combined value.
What would be the best way to achieve that? I'm unable to figure it out.
Try this in your js:
var data = { 'filters' : arrayHere };
$.ajax({
type: 'POST',
url: 'your url here',
data: data,
success: function(re) {
console.log('this is your return', re);
}
})
Make an array using $.each, and populate all values inside the array, then post it view ajax call.
1) Keep the selects out of the form and use IDs to access the selected values.
2) Create a hidden input field in the form
3) use onsubmit="mergeSelects()" javascript event.
4) create a function in js
function mergeSelects(){
//get all the values of selects
// append then and generate a string may be
var mergedStringVal = ""; // <--- store values here
// Set it in the hidden input field created in the form and submit them
document.getElementById("mergedSelects").val(mergedStringVal);
}
I have this html:
<select onchange="check_status(this);" name="status[171]">
<option selected="true" value="open" data="04f2cf35e4d7a1c0158459fd0450a605">open</option>
<option value="in_process" data="04f2cf35e4d7a1c0158459fd0450a605">pending</option>
<option value="finished" data="04f2cf35e4d7a1c0158459fd0450a605">finished</option>
<option value="canceled" data="04f2cf35e4d7a1c0158459fd0450a605">canceled</option>
</select>
and js
function check_status(obj){
var uid = obj.getAttribute('data');
alert(uid);
}
but it always alerts null instead of data value
Where is the problem guys? Thanks
The problem is that you get select element and not selected option element as function argument. And it does not have the data attribute. You have to get the option attribute like so:
function check_status(obj) {
var uid = obj.options[obj.selectedIndex].getAttribute('data-uid');
alert(uid);
}
<select onchange="check_status(this);" name="status[171]">
<option selected="true" value="open" data-uid="01f2cf35e4d7a1c0158459fd0450a601">open</option>
<option value="in_process" data-uid="02f2cf35e4d7a1c0158459fd0450a602">pending</option>
<option value="finished" data-uid="03f2cf35e4d7a1c0158459fd0450a603">finished</option>
<option value="canceled" data-uid="04f2cf35e4d7a1c0158459fd0450a604">canceled</option>
</select>
Notice that I changed the attribute name to data-uid for it to be valid according to HTML5 specificaion.
You are trying to get select data attribute, and not option's.
Also, I can see that all you data attributes are identical. Then you can move it from option to select itself: <select onchange="check_status(this);" name="status[171]" data="04f2cf35e4d7a1c0158459fd0450a605" > and use code snipped from your question unmodified.
function check_status(obj) {
var uid = obj.options[obj.selectedIndex].getAttribute('data');
alert(uid)
}
<select onchange="check_status(this);" name="status[171]">
<option selected="true" value="open" data="open04f2cf35e4d7a1c0158459fd0450a605">open</option>
<option value="in_process" data="pending104f2cf35e4d7a1c0158459fd0450a605">pending</option>
<option value="finished" data="finished04f2cf35e4d7a1c0158459fd0450a605">finished</option>
<option value="canceled" data="canceled04f2cf35e4d7a1c0158459fd0450a605">canceled</option>
</select>
You define custom attributes using the "data" attribute. In your code, there is not custome attribute which I'm sure you wanted it to be an ID. The exact format is "data-*", where "*" is replaced with the desired custom attribute name, then set to the desired string value. So in your code, it should ideally be:
<select onchange="check_status(this);" name="status[171]">
<option selected="true" value="open" data-id="open04f2cf35e4d7a1c0158459fd0450a605">open</option>
<option value="in_process" data-id="pending104f2cf35e4d7a1c0158459fd0450a605">pending</option>
<option value="finished" data-id="finished04f2cf35e4d7a1c0158459fd0450a605">finished</option>
<option value="canceled" data-id="canceled04f2cf35e4d7a1c0158459fd0450a605">canceled</option>
</select>
assuming you want the custom attribute to be "id".
There are two ways you can retrieve the value of "data" attributes using pure JavaScript: in addition to the good old fashion get/setAttribute(), you can also access using the "dataset" property of the element
Using DOM's getAttribute() property
function check_status(obj) {
var myoption = obj.options[obj.selectedIndex];
var uid = myoption.getAttribute('data');
alert(uid);
// setting and removing the data-id attribute
myoption.setAttribute("data-id", "foo") //changes "data-id" to "foo"
myoption.removeAttribute("data-id") //removes "data-id" attribute entirely
}
Using JavaScript's dataset property
function check_status(obj) {
var myoption = obj.options[obj.selectedIndex];
var uid = myoption.dataset.id;
alert(uid);
var statusId = myoption.dataset["id"]
alert(statusId);
}
function check_status(obj){
var uid = obj.options[obj.selectedIndex].getAttribute('data');
alert(uid);
}