I am stuck trying to pass a value from ng-repeat to my AngularJS controller. I don't feel like I know what anything is doing anymore. I keep trying different changes, but with no success.
My goal is to
1) display an array as options in a dropdown box.
2) Let the user select an option then
3) click a button that submits that choice to the Angular function.
I know the Angular function (I didn't include in this example) is working because I can pass a value to it statically and see the updates I expect. The problem is how do I capture the user selection in a variable that I can pass as a parameter to my $scope function named $scope.changeHost(newHost). Here is the AngularJS HTML I am having trouble with:
<form ng-submit="changeHost(newHost)">
<select type="text" class="form-control" ng-model="eveSingle.evePlayers">
<option ng-selected="{{eveSingle.evePlayers}}" value="{{eveSingle.evePlayers}}" ng-repeat="player in eveSingle.evePlayers">{{player}}</option>
</select>
<input class="btn submit-btn" type="submit" value="Change GM" />
</form>
Here is the (now abandoned) modified code that works as I intended:
<form ng-submit="changeHost(eveSingle.eveHost)">
<select type="text" class="form-control" ng-model="eveSingle.eveHost" ng-options="player for player in eveSingle.evePlayers">
<option type="text" value="{{eveSingle.evePlayers}}">{{player}}</option>
</select>
<input class="btn submit-btn" type="submit" value="Change GM" />
</form>
Here is a Final update because of a comment below. Once I changed to ng-options I no longer needed the HTML options in my code. When I removed it this bit still worked fine.
<form ng-submit="changeHost(eveSingle.eveHost)">
<select class="form-control" ng-model="eveSingle.eveHost" ng-options="player for player in eveSingle.evePlayers">
</select>
<input class="btn submit-btn" type="submit" value="Change GM" />
</form>
The user selection is the value of the variable binded to the ng-model. Therefore change ng-model="eveSingle.evePlayers" to ng-model="eveSingle.selectedPlayer" (adapt the name to your needs), and pass the selected player to changeHost:
ng-submit="changeHost(eveSingle.selectedPlayer)"
Notice that you should remove ng-selected="{{eveSingle.evePlayers}}" and type="text" (this applies to input elements).
As a side note, be advised that you can (should) use the ng-options syntax over the ng-repeat-ed options. The first allows you to bind to the model other types than strings, plus it is more efficient as it doesn't create isolated scopes for each option. Would be something like that:
<select class="form-control" ng-model="eveSingle.selectedPlayer"
ng-options="player for player in eveSingle.evePlayers">
</select>
Related
I'm building an app in django and I've got a filter form that is a dropdown and you can switch between "new" and "popular" (aka filter by date or number of votes). I decided that I want this to be formatted as buttons (kind of like how it is on yik yak) where it is easier to toggle between the two.
I am using django widget tweaks to display my forms so my generated HTML looks like:
<form action="/board/Intuna/" method="post" class="ng-pristine ng-valid">
<input type="hidden" name="csrfmiddlewaretoken" value="io55AwNMPKNzAkv69qWkcRzqNV7mwo1w">
<div class="form-group">
<label class="col-sm-1 control-label" for="id_filterType">Filter By</label>
<div class="col-sm-11">
<select class="form-control" id="id_filterType" name="filterType" onchange="this.form.submit();">
<option value="0" selected="selected">Most Recent</option>
<option value="1">Popularity</option>
</select>
</div>
</div>
</form>
UPDATE: I tried writing this javascript function to select the choice in my form
function filter(valueToSelect) {
var item = document.getElementById('id_filterType');
console.log(item);
if (item) {
item.value = valueToSelect;
}
}
And lastly in my HTML template I have two buttons
<button class="btn btn-primary" onclick="filter('0');">New</button>
<button class="btn btn-primary" onclick="filter('1');">Hot</button>
When I click the buttons, the selected option in my form changes but it doesn't submit, which does not make sense to me since it is supposed to automatically submit when the option is changed. Any ideas?
Still not sure why the form was not automatically submitting with onchange="this.form.submit();" but I ended up adding a name attribute to my form
<form action="/board/Intuna/" method="post" class="ng-pristine ng-valid" name="filter-form">
And then added to my javascript function
document.filter-form.submit();
and now it works! And to finish it up I wrapped the filterType field with <div class="hidden"> and everything looks/works perfectly!
I am currently making a kind of internal search engine with multiple options in a dropdown, it works at first but I would like to change the form to get the urls based on the dropdown, so I can get:
example.com/search/**Option_Value_Here**/?q=my+query
I'm using Django as the framework
<form action="/search/" method="get">
<input name="q" id="query" value="{{ query }}" type="text" autocomplete="off">
<select id="category" name="select-name" method="get">
<option value="Jose">Jose</option>
<option value="Mike">Mike</option>
<option value="Mary_Ann">Mary Ann</option>
<option value="chaplin">Chaplin</option>
</select>
<input value="Search" class="fit" type="submit">
</form>
My question is if there is a way where I can change the path of the form action:
<form action="/search/{{ Option_Value_Here }}}/" method="get">
Thanks for your time.
Regards
You can do that with JavaScript/jQuery.
<form id="myform">
...
</form>
$(".category").change(function(){
value = $(this).val()
$('.myform').attr('action', "/search/" + value)
});
Remember to place the code in a $(document).ready() listener.
Want to avoid JavaScript?
You can get the value directly in the template. You cannot change that value if the user changes the dropdown value: in this case, your only chance is that of redirecting the user in your views.py based on what he choose in the dropdown.
Remember: Django simply renders a page and sends it to the user. Whatever happens before a new call is made to your server is not in the possibilities of Django but those of JavaScript.
I am dealing with two versions of a page. The first one has a search input field as part of a form, and I can get that value no problem with
document.getElementsByClassName('search-input')[0].value
i.e. this will update as it's being typed. On the other version of the page (which I have no control over) the input field is not part of a form, and now the above code doesn't work (the class of the input field is still "search input").
Here is the html where it's working fine:
<form action="search-landing.aspx" method="GET">
<input class="search-input" autofocus="autofocus" placeholder="City, State or Zip" name="location" required="">
<button id="searchButton" tabindex="0" class="search-btn" type="submit">Search</button>
</form>
And here is the code where it's not
<div class="search-box">
<input type="text" class="search-input" placeholder="City, State or Zip">
</div>
Does anyone know why I'm having this issue? Is there a way around it (i.e. to grab a value from an input field that is NOT part of a form)?
Thanks
Rooster correctly pointed out that I may have more than 1 input field of class "search-input". There were two identical fields, one hidden so document.getElementsByClassName('search-input')[1].value was the answer in this case
I have a form with a save button which is being disable using $pristine and $invalid properties. Form has a drop down menu which contains a blank value as Select option. Once I selected the blank value it always sets the from's $invalid property to false. Could anyone suggest me an option?
My save button code like this
<button class="btn btn-primary app-form-buttons" disabled="disabled" name="btnSave" ng- disabled="myForm.$pristine || myForm.$invalid" type="submit">
<i class="icon-save"></i>
</button>
Drop down code like this
<div class="col-sm-8 col-xs-11">
<select class="form-control" name="Type" ng-model="bus.route" required ng-options="bus.type as type.Type for type in types" >
<option>---Please Choose---</option>
</select>
</div>
It seems like what you need is to set the placeholder option to disabled as you don't want it to be selected.
<div class="col-sm-8 col-xs-11">
<select class="form-control" name="Type" ng-model="bus.route" ng-options="bus.type as type.Type for type in types" >
<option disabled>---Please Choose---</option>
</select>
</div>
Problem has been solved. I was trying to validate the form using required attribute. Which had gave me an invalid error when I select the blank value. To overcome the problem I used custom method inside disable attribute.
This is probably a stupid way of doing what I want to do, so a more elegant solution to the bigger problem is definitely appreciated! However, the specific problem I am encountering is this:
I am processing a form with javascript. The form structure is as follows:
Name (text, also hidden value)
Preference (checkbox): Green, Purple (user can check both)
Time (Dropdown): AM, PM, Midnight
<FORM>
<SECTION>
Jane Doe:
<INPUT type="hidden" name="user[]" id="user[]" value="Jane_Doe" />
<INPUT type="checkbox" name="preference[]" id="preference[]" value="green" /> <INPUT type="checkbox" name="preference[]" id="preference[]" value="purple" />
<SELECT name="time[]" id="time[]">
<OPTION value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
<OPTION value="Midnight">Midnight</OPTION>
</SELECT>
</SECTION>
<SECTION>
John Jacob:
<INPUT type="hidden" name="user[]" id="user[]" value="John_Jacob" />
<INPUT type="checkbox" name="preference[]" id="preference[]" value="green" /> <INPUT type="checkbox" name="preference" id="preference" value="purple" />
<SELECT name="time[]" id="time[]">
<OPTION value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
<OPTION value="Midnight">Midnight</OPTION>
</SELECT>
</SECTION>
<INPUT type="button" Value="SUBMIT" onclick="function(form_script)"/>
</FORM>
Depending on a prior action by the user, a list of names is generated, with Preference and Time needing to be filled in.
The form is then submitted and a mySQL table will be populated according to the user's response using PHP coding.
I am currently at a loss to how to store the form responses with Javascript. As you can see from the coding, each <SECTION> contains the exact same coding structure.
Ideally, I'd like to store each form element within an array, (e.g. user['Jane_Doe', 'John_Jacob']) when the form is submitted, and pass that to the php script. But, I'm not sure how to create these arrays from the form elements, and would appreciate help.
I hope my question is clear.
Alternatively, if there are better ways of processing this form without using javascript arrays, I would definitely be interested in the solution!
assuming the id of your form is "form", to grab all the data from the form you will need to do this (you will need to include jquery to be able to perform this action) :
var form_data = $("#form").serialize();