How to use form select value to action method (without query) - html

I'm using pug to render some pages for my nodeJS server. In this case I'm trying to use the value captured in the form select in order to change the action method.
So, the idea is use the group name selected to go to that page:
form.w3-container(action="http://localhost:5004/groups/" + (option selected down below) method="GET")
select.form-control(data-toggle='select' class="form-control" data-placeholder='Disabled results')
option group1
option group2
option group3
button.btn.btn-success(type='submit') Go
Any suggestion on how can I do this, if possible without jquery (if it is not possible without I, an explanation on how to "use" it would be very much appreciated).
From what Shoaib said in this post, it should be possible, but I dint't quit understand his suggestion, poor context :/

HTML code:
<form id="myForm" class="w3-container" action="" method="POST">
<select id="mySelector" data-toggle='select' class="form-control" data-placeholder='Disabled results'>
<option value="">Select</option>
<option value="group1">group1</option>
<option value="group2">group2</option>
<option value="group3">group3</option>
</select>
</form>
ECMAscript code:
var selector = document.getElementById("mySelector");
selector.addEventListener("change", function() {
changeAction();
});
function changeAction() {
var finalAction = document.getElementById("myForm").action = "http://localhost:5004/groups/" + selector.value;
}
JSFiddle: https://jsfiddle.net/ytvhqrs0/1/

Related

AngularJS conditional ng-option

I have an app angular that can be translate both in french and english. I'm using angular translate to do that. The problem is: I receive an array of object from an API and in those object, I have a property bookConditionEn and a property bookConditionFr and other like ids.
In a select input , I want to display bookCondition depending by the current language.
In the controller, I can get the current language with the $translate service
vm.getCurrentLanguage = function() {
return $translate.use();
}
So, I wonder if in the view I could use a condition in the ng-option.
<select
ng-options="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
ng-model="bookCtrl.bookConditions"
name="Condition" class="form-control"
></select>
You can use conditionals to show/hide options by changing the way you are creating the <select>:
<select ng-options=ng-model="bookCtrl.bookConditions" name="Condition" class="form-control">
<option
ng-repeat="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
ng-if="vm.getCurrentLanguage==bookCondition.language"
>
</select>
I didn't quite understand how you have your JSON set up so I am assuming you have a property that contains the language (bookCondition.language). You can compare this against the user's currently-selected language which is returned by your vm.getCurrentLanguage. By the way, I suggest changing that from a function to just be a variable like this:
vm.currentLanguage = $translate.use();
This should be all you need to do to specify options in a conditional manner.
It worked your way
<select ng-model="bookCtrl.bookCondition" name="Condition" class="form-control">
<option ng-if="bookCtrl.getCurrentLanguage() === 'en'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookCondition}}</option>
<option ng-if="bookCtrl.getCurrentLanguage() === 'fr'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookConditionFr}}</option>
</select>

Chosen select not calling a function on ng-click

I'm working with a chosen select, i added a function call when the event ng-click happens, but it's not doing anything, when i make the call to the same function in a button it works, why is this?
ng-change doesn't work either, even worse, it eats my options and leaves only the first one.
my select code:
<select ng-model="ind_oferta" multiple class="control-group chosen-select" chosen >
<optgroup label="Oferta">
<option value=""> </option>
<option ng-click="aplicarFiltro()" ng-repeat="menuOpcion in menu[0].opciones.oferta" value={{menuOpcion.id}}>
{{menuOpcion.tipo}}</option>
</optgroup>
</select>
the function is very simple, it's just a javascript alert
$scope.aplicarFiltro = function(){
alert("hello");
}
and i think is not worth put the button code, that one works so...
EDIT: i changed the select code to this, still not making the call to the function, help!
<select multiple class="control-group chosen-select" chosen style="width:250px;"
ng-model="ind_oferta" ng-click="aplicarFiltro();"
ng-options="menuOpcion.id as menuOpcion.tipo for menuOpcion in menu[0].opciones.oferta">
<option>--</option>
</select>
You should use the ng-options directive together with ng-model (you can still add a single <option> as the default value). It would probably look something like this:
<select ng-options="menuOpcion.tipo for menuOpcion in menu[0].opciones.oferta"
ng-model="selected"
ng-change="aplicarFiltro()" chosen multiple>
<option value=""></option>
</select>
There is a lot of customization options, so it is best if you check out the documentation.
To get the option which was removed by the user you could do something like this in your controller:
var previousSelection = [];
$scope.changedSelection = function () {
// Check if the current selection contains every element of the previous selection
for (var i = 0; i < previousSelection.length; i++) {
if ($scope.selectModel.indexOf(previousSelection[i]) == -1) {
// previousSelection[i] was deselected
}
}
// Set the previous selection to the current selection
previousSelection = $scope.selectModel;
}

Passing Select Option Value into OnChange Function

I've got an HTML form that I'm using JavaScript to submit with the 'onchange' function of a select control like this:
<form action='seeLocation.php?'>Jump To Location:
<select onchange='this.form.submit()'>
<option value='1'>Location1</option>
<option value='2'>Location2</option>
<option value='3'>Location3</option>
</select>
</form>
The problem is, I need to pass the <option>'s value tag into the form's action tag such it's actually something like
<form action='seeLocation.php?1'>
or
<form action='seeLocation.php?2'>
etc.
Is that possible? Thanks!
In your onchange function I think you can do this (haven't tested it):
this.form.action="seeLocation.php?"+this.options[this.selectedIndex].value;this.form.submit()
Change your html to be:
<script type="text/javascript">
function changeDropDown(dropdown){
var location = dropdown.options[dropdown.selectedIndex].value;
document.getElementById("form1").action = "seeLocation.php?" + location;
document.getElementById("form1").submit();
}
</script>
<form id="form1" name="form1">Jump To Location:
<select onchange='changeDropDown(this);'>
<option value='1'>Location1</option>
<option value='2'>Location2</option>
<option value='3'>Location3</option>
</select>
</form>
You can also do it inline if you need less verbose code.

Not send GET variable on submit if dropwdown not selected

I have a form that I used to filter search results that consist of only dropdowns. I use GET rather then post so that the results can easily be shared with the URL.
<form action="" name='filter' method="GET">
<select name="Make" id="Make">
<option selected="selected" value ="nothing">All</option>
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
</select>
<input type="submit" value="Filter">
</form>
As it is right now if It will submit the value "nothing" for the get variable Make if the user doesn't change the selection. They're are multiple drop downs identical as this one for model year etc.
Is it possible for the Make variable to not show up in the URL if it isn't used?
As it is now if that code is submited it will say website.com/?Make=nothing. I tried removing the value and then it says website.com/?Make=All. I do not want make to show up in the URL if "All" is selected. Is this possible?
You don't have a submit button :)
you can add a JS that runs on submit and checks the value of "Make" and in case it's "nothing" just do a simple redirect instead of submitting the form. Something like:
var e = document.getElementById("Make");
var val = e.options[e.selectedIndex].value;
if (val === 'nothing'){
window.location = "http://www.google.com/"
}

Set value of select element based on GET parameters, without JavaScript?

Here's a very basic HTML question for you:
<form method="get" action="#">
<select id="u" name="u">
<option value="nothing" title=""></option>
<option value="AdamT" title="AT">Adam Temple</option>
<option value="AlexP" title="AP">Alex Potts</option>
</select>
<INPUT TYPE="submit" />
</form>
After submitting the form, the URL ends ?u=AdamT. However, the list has reverted to the blank element.
Is there any way I could make the list be pre-selected with the correct option, without using JavaScript?
Add selected (its a boolean attribute) to the appropriate <option> element in whatever server side language you use to process the form.
Put your javascript at the end of html script or include the .js at the end of the body.
var val = location.href.match(/[?&]u=(.*?)(?:$|&)/)[1]; // get params "u" from URL
document.getElementById("you-selection-id").value = val; // u
Hope this will help:
Use selected for preselected values
<option value="AdamT" title="AT" selected>Adam Temple</option>