How to properly handle empty, missed, default form values? - javascript

I have html form, where it is possible that:
(1) user input's nothing, for ex., in case with text input field;
<input type="text" class="input-xlarge" id="first-name" name="first-name">
(2) user leaves default empty value, like with select:
<select id="prof-area" class="input-xlarge">
<option value="0" selected="selected"></option>
(3) user leaves empty value, like with multiple options select:
<select multiple="multiple" id="reason" name="reason" class="input-xlarge">
<option value="001">reason001</option>
<option value="002">reason002</option>
In each case on GAE side I should understand that this is empty value.
first_name = None
if self.request.get('first-name'):
first_name = self.request.get('first-name')
works well with case (1).
prof_area = None
if self.request.get('prof-area') and self.request.get('prof-area') !='0':
prof_area = self.request.get('prof-area')
should work for case (2), but doesn't look well. Is there any better way to handle the same?

You don't need all this work unless you have added the required=True argument. If you put an entity missing some property, GAE create or update the entity with the property missed empty. See this docs

You do not have a name parameter for your prof-area field which is prob why you are't seeing data at the server.
Anyways, try this ...
At the client, just put an empty string in your empty select option, like this:
<select id="prof-area" name="prof-area" class="input-xlarge">
<option value="" selected="selected"> -- select -- </option>
</select
then at the server, first grab all the values into local variables - makes it easier for others to see whats going on ...
first_name = self.request.get('first_name')
prof_area = self.request.get('prof-area')
reason = self.request.get('reason')
you can then check each param in turn ...
if first_name:
# do something with first_name
if prof_area:
# do something with prof_area
if reason:
# do something with reason

Related

Vuejs Option. Get an ID from a selected item

I'm actually using VueJS and encountered a little problem
I have a selector, that needs to memorize an ID to be sent in an axios request later. In the "selected" var, we need to keep only the name of the "type" for user friendly reasons. So, I need to get the ID selected by the user without displaying it. Actually, the code looks like this.
<select v-model="selected">
<label for="lg_type" class="sr-only">Type de personnage</label>
<option disabled value="">Choisir un type</option>
<option v-for="onetype in playertype" class="form-control" id="lg_type" name="lg_type" v-bind:key="onetype.idType">
{{onetype.idType}}-{{ onetype.name }}
</option>
</select>
Selected is the actual name of the selected type. Since it's vue, when I click on another Type from my selector, it changes it automatically
onetype contains two things : A name, and an idType
playertype contains an array of all types
As we can see in the code, i display things like this "idType - name", but I only want to display "name" (so just erase onetype.idType), but I need to get the id to send it elswhere (I can't use onetype.idType to get the id to my axios method)
I don't know if it's clear enough, but I need to send the onetype.idType to an axios method, but I can't use it this way.
Thanks you in advance, this is driving me crazy and I feel I've missed something obvious ><
Use value attribute and you will get it in v-model instead of displayed option:
<select v-model="selected">
<label for="lg_type" class="sr-only">Type de personnage</label>
<option disabled value="">Choisir un type</option>
<option
v-for="onetype in playertype"
:value="onetype.idType"
class="form-control"
id="lg_type"
name="lg_type"
v-bind:key="onetype.idType"
>{{ onetype.idType }}-{{ onetype.name }}</option>
</select>

ERROR TypeError: Cannot read property 'clientId' of null

After clicking on my object I change the component to another to update this object.
in this component for update I have a form that contains a select element with options which should be initialized with values from database (in method OnInit)
and I need to select by default from this list of values the value of my object
<label>Catégorie Client:</label>
<select class="form-control" [(ngModel)]="client.clientId" >
<option></option>
<option *ngFor="let client of clients" [value]="client.clientId">{{client.name}}</option>
</select>
The problem is that the client can be null and I want in this case to show <option></option> as default value with empty value, but I got error
cannot read null value
I have my object instantiated ...
Thanks for helping.
[(ngModel)]="client.clientId" generates the error. client is not available here, you declared it in your optiontags
Be aware [value]="xxx" supports string only, if your clientId is number, you'd better choose [ngValue]="xxx"
<label>Catégorie Client:</label>
<select
class="form-control"
[(ngModel)]="selectedClient" >
<option></option>
<option
*ngFor="let client of clients"
[ngValue]="client"
>
{{client.name}}
</option>
</select>
selectedClient needs to be initialized by one item of clients,
as ConnorsFan mentioned, you can leave selectedClient as null, so nothing would be selected at the beginning.

Requesting inputted data

I have a form which has a select input
<select class="form-control" id="taskSelect" name="taskSelect" >
<option value="" name="task" id="task">Select One</option>
<option value="1" name="task">1</option>
<option value="2" name="task">2</option>
</select>
Now depending on what is selected, a sub form appears. I have set up an example JSFiddle
Now I need to pass any data that has been completed to a function
submitHandler: function(form){
var params = $(form).serialize();
generatePDF(params);
}
Normally to get the input I would do something like this
$('#someInput').val();
But in my situation I dont know what will be inputted so I am serializing things. If selection 1 is selected, then I only need the inputs for the fields it displays, not the fields for selection 2. Serializing seems to capture all inputs, not the ones that I want.
What is the best way to only pass the inputted data to the function?
Thanks
Maybe you can try splitting the form into 2 parts. Once this is done you can serialize only the selected form. This is assuming you don't have any other form elements outside the two tasks you mentioned above

How to use angularjs to change the values of another select tag?

I have two Web API's that I am calling. Each value in the first api Type has an ID that needs to be used to filter the second api which is Category. The JSON is below:
// Types
[{"ID":1,"Text":"Hardware","Description":"Hardware"},
{"ID":2,"Text":"Software,"Description":"Software"}"}];
// Categories
[{"ID":1,"TypeID":1,"ParentID":0,"Name":"Printing"},
{"ID":2,"TypeID":1,"ParentID":1,"Name":"Toner"}]
First of all, you have to store selectedTypeID that will be used to filter another array, and than you can call Angular $filter in your second array.
Sintax:
$filter('filter')(array, expression, comparator)
e.g:
$filter('filter')($scope.categories, {TypeID: $scope.selectedTypeID}, comparator)
I think you're asking this: *How can I dynamically populate a select input based on the selection in another select input?
I think you can go two ways. If there is not much total data (like with Categories), you could use a filter on the second set of data. https://docs.angularjs.org/api/ng/filter/filter#!
You can do this in the HTML or in the controller!
<!-- HTML Page -->
<select>
<option ng-repeat="value in values | filter..." value=value>
</select>
// controller.js
values = ($filter('filter')(result.Values, {Id: $routeParams.Id}));
If there is lots of data to filter, consider delaying your call to the Category API until a Type is selected.
Without seeing the controller/HTML and whatnot, it's hard to give a specific answer, but I think this will get you moving in the right direction.
$scope.countries = CustomerService.getCountry();
$scope.getCountryStates = function(){
$scope.sates = CustomerService.getCountryState($scope.customer.Country);
$scope.cities =[];
};
<select ng-model="customer.State"
ng-options="x.Id as x.state for x in sates"
ng-change = "getStateCities()"
class="form-control"
ng-required="true"
id="state">
<option value="">-- Choose State --</option>
</select>
<select ng-model="customer.City"
ng-options="x.Id as x.city for x in cities"
class="form-control"
ng-required="true"
id="city">
<option value="">-- Choose City --</option>
</select>
Check complete code with demo

Make the <select> Field Required? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can I apply the required attribute to <select> fields in HTML5?
I'm using the html5 contact form from here but I'm having issues trying to make the <select> field required. Everything else works fine, just having trouble with this and the dev hasnt responded when I asked about the field. this is what I have
<select name="package" id="package" title="Please choose a package" class="required">
<option value="">------------------</option>
<option value="basic">Basic</option>
<option value="plus">Plus</option>
<option value="premium">Premium</option>
</select>
What am I missing to get this working correctly?
I believe that the top answer to this question is what you're looking for.
To quote,
This works for me - Have the first value empty - required works on empty values.
<select required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
check this: http://www.w3.org/TR/html-markup/select.html
global attributes
Any attributes permitted globally.
name = string
The name part of the name/value pair associated with this element for the purposes of form submission.
disabled = "disabled" or "" (empty string) or empty
Specifies that the element represents a disabled control.
form = ID reference NEW
The value of the id attribute on the form with which to associate the element.
size = positive integer
The number of options to show to the user.
multiple = "multiple" or "" (empty string) or empty
If present, indicates that its select element represents a control for selecting zero or more options from a list of options.
If not present, indicates that its select element represents a control for selecting a single option from a list of options.
autofocus = "autofocus" or "" (empty string) or empty
Specifies that the element represents a control to which a UA is meant to give focus as soon as the document is loaded.
required = "required" or "" (empty string) or empty
Specifies that the element is a required part of form submission.
so you require a required = "required" attribute to your <select>
If you have a better browser, you can try this (like in this thread):
<select required>
<option value=""></option>
<option value="basic">Basic</option>
<option value="plus">Plus</option>
<option value="premium">Premium</option>
</select>
, but still you should use JavaScript because not a lot of people have browsers that support HTML5 required attribute. It's not supported by IE and Safari.

Categories

Resources