I have checkboxes with values in HTML. The problem is that I want the values to store in the database and not a boolean. How do I do this?
HTML:
<div class="form-group" >
<label >Bachelor</label><br>
<input type="checkbox" id="ComputerScienceB" ng-model="vm.course.bachelor.computer" value="Computer Science"> Computer Science
<br>
<input type="checkbox" id="SystemsEngineeringB" ng-model="vm.course.bachelor.systems" value="Systems Engineering"> Systems Engineering
<br>
<input type="checkbox" id="EnvironmentalEngineeringB" ng-model="vm.course.bachelor.environmental" value="Environmental Engineering"> Environmental Engineering
<br>
<input type="checkbox" id="MechanicalEngineeringB" ng-model="vm.course.bachelor.mechanical" value="Mechanical Engineering"> Mechanical Engineering
<br>
<input type="checkbox" id="BiotechnologyB" ng-model="vm.course.bachelor.bio" value="Biotechnology"> Biotechnology
</div>
<br>
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-click="vm.saveCourse()">Add Course</button>
</div>
</form>
The database inserts the hole vm.course. I am using the hole mean stack.
You need ng-true-value attribute. You can use it like this:
<input ng-true-value="Biotechnology"
type="checkbox"
id="BiotechnologyB"
ng-model="vm.course.bachelor.bio">
See angular docs on input[checkbox]
Related
I hope you are good!
I built this piece of code, which results in the following design of a checklist, in which I am able to select multiple items from a list -
<!DOCTYPE html>
<html>
<body>
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type="checkbox" id="item1" name="item1" value="Tshirt">
<label for="item1"> Tshirt</label><br>
<input type="checkbox" id="item2" name="item2" value="Jeans">
<label for="item2"> Jeans</label><br>
<input type="checkbox" id="item3" name="item3" value="Shirt">
<label for="item3"> Shirt</label><br>
<input type="checkbox" id="item4" name="item4" value="Trousers">
<label for="item4"> Trousers</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The checklist I get :
And when I choose some items and click submit [for this time I chose Jeans & Trousers], I get my response in this format : item2=Jeans&item4=Trousers. Unfortunately, I cannot further work with this kind of response format...
The format I need should be more like : Jeans , Trousers. No item-ids, and no = signs - just their display names... Is it possible to get a response like that?
Any help would be appreciated! Thanks a lot! 🙂
Edit : Here's the code I took inspiration from - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_checkbox
You can get an array of values in your backed using name format like myarrayName[]. The name attribute doesn't have to be unique. For example:
<form action="" method="post">
<input type="checkbox" id="item1" name="item[]" value="Tshirt">
<label for="item1"> Tshirt</label><br>
<input type="checkbox" id="item2" name="item[]" value="Jeans">
<label for="item2"> Jeans</label><br>
<input type="checkbox" id="item3" name="item[]" value="Shirt">
<label for="item3"> Shirt</label><br>
<input type="checkbox" id="item4" name="item[]" value="Trousers">
<label for="item4"> Trousers</label><br><br>
<input type="submit" value="Submit">
</form>
I am trying to find the advanced search query for HTML to automatically search the results.
For example, a plain google.com query is https://google.com/search, while image search query is https://images.google.com/images
I can't find the query to automatically search the values from 4 text boxes through the Advanced Search engine.
The functionality I am looking for is that when I try searching for keywords from my web page it should go through the advanced search engine:
<form action="https://www.google.com/advanced_search?as_q=q&as_epq=r&as_oq=s&as_eq=t">
I found an alternative to going through the Advanced Search engine.
The Advanced Search has a few parameters that are passed in the URL for a search query:
all these words: the operator passed is as_q like this.
<input class="" type="text" name="as_q">
this exact word or phrase: the operator passed is as_epq
any of these words: the operator passed is as_oq
none of these words: the operator passed is as_eq
So I named the HTML textboxes with the corresponding names and concatenated the above parameters to the search query.
For the first section of the advanced search, try
<form action="https://google.com/search" name="f">
<div class="field">
<label for="field1">all these words:</label>
<input type="text" class="textinput" id="field1" value="" name="as_q">
</div>
<br>
<div class="field">
<label for="field2">this exact word or phrase: </label>
<input type="text" class="textinput" id="field2" value="" name="as_epq">
</div>
<br>
<div class="field">
<label for="field3">any of this words: </label>
<input type="text" class="textinput" id="field3" value="" name="as_oq">
</div>
<br>
<div class="field">
<label for="field4">none of these words: </label>
<input type="text" class="textinput" id="field4" value="" name="as_eq">
</div>
<br>
<div class="field">
<label for="field5">numbers ranging from: </label>
<input type="text" class="textinput1" id="field5" value="" name="as_nlo">
<span class="seperator">to</span>
<input type="text" class="textinput2" id="field5" value="" name="as_nhi">
</div>
<input type="submit" value="advanced search">
</form>
If you are trying to create HTML page, I would like to share this code.
You can add a space for a right indentation using & nbsp;.
Here is an example:
<form action="https://google.com/search">
All these words:<input type="text" name="as_q" >
<br><br>Exact word/phrase:<input type="text" name="as_epq" >
<br><br>Any of these words:<input type="text" name="as_oq" >
<br><br>None of these words:<input type="text" name="as_eq" >
<br><br> <input type="submit" value="advanced search">
</form>
I'd like to give three choices which are represented by words but are going to POST numbers:
<form method="POST">
{% csrf_token %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="Low" value=1 autocomplete="off"> Pale
</label>
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="Medium" value=5 autocomplete="off"> Medium
</label>
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="High" value=9 autocomplete="off"> Deep
</label>
</div>
</form>
But then in my view request.POST.get('intensity') is a string. Do I need to manually convert it or there's something I'm missing?
ps. I'm not using Django forms and I don't want to use it at the moment.
No. HTTP only deals with strings and the value of the string is left for the server to decide. You can convert the value using int() function in python.
Reference:
How to get int instead string from form?
I have a scenario where any one protocol has to be configured on a device. A web UI will display all the options as a checkbox and I need to retrieve the protocol and device that was checked and send this data via http post to backend server. I am using HTML and AngularJS.
Below is my code so far and please suggest if this can be done in a better way.
var Myapp = angular.module('Myapp', []);
Myapp.controller('CloudController', function($scope,$http)
{
$scope.execute = function(ImageLoc, protocol, device)
{
# HTTP request will be generated here
};
});
<form>
<h3>Choose the protocol:</h3>
<input type="checkbox" name="protocol" value=1> L3 Sanity <br>
<input type="checkbox" name="protocol" value=2> L2 Sanity <br>
<input type="checkbox" name="protocol" value=3> ROUTING <br>
<input type="checkbox" name="protocol" value=4> STP <br>
<input type="checkbox" name="protocol" value=5> VLAN <br>
<input type="checkbox" name="protocol" value=6> Interface Scale <br>
<input type="checkbox" name="protocol" value=7> VLAN SCALE <br>
<h3>Choose the Device:</h3>
<input type="checkbox" name="device" value=1> DUT 1 <br>
<input type="checkbox" name="device" value=2> DUT 2 <br>
<input type="checkbox" name="device" value=3> DUT 3 <br>
<input type="checkbox" name="device" value=4> DUT 4 <br>
<input type="checkbox" name="device" value=5> DUT 5 <br>
<h3>Enter Image location:</h3>
<input type="text" ng-model="ImageLoc" />
<p><input type="button" value="Launch" ng-click="execute(ImageLoc,protocol,device)"/></p>
</form>
My form is currently set up to gather all the input data to my autoresponder...however, I made the form with only one option - pay now. Users would like options, so Im thinking of giving them 2 choices, the old "pay now" COD method, and option#2 paypal. I think radio buttons are the best way for doing this. However I cant get them to work separately...when I choose option 2, option 1 remains selected. So I added the radio buttons myself after the ordernow button.
<p>mail: *</p>
<p>
<label>
<input type="text" class="wf-input wf-req wf-valid__email" name="mail" class="mj" ></input>
</label>
</p>
<p>name: *</p>
<p>
<label>
<input type="text" class="wf-input wf-req wf-valid__required" name="name" class="mj" ></input>
</label>
</p>
<p>
<input type="submit" value="ORDER NOW" class="butt">
<div class="selectpaymentradios">
<label class="radio" >select payment</label>
<input class="radio" type="radio" name="cash" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="ppal" value="ppal" /> <span>PaypaL</span>
</div>
<input type="hidden" name="webform_id" value="12x45"/>
</p>
</form>
<script type="text/javascript" src="http://xyz.com/view_webform.js?wid=12x45&mg_param1=1"></script>
Im trying to figure out how can I make this work with my autoresponder, I think this form has to be able to tell me what kind of payment did the customer chose...but the autoresponders form creator doesnt have radio buttons at all so Im stuck, I dont know if its possible...
<input class="radio" type="radio" name="cash" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="ppal" value="ppal" /> <span>PaypaL</span>
the problem you hit, is very simple - you have to use the same name for all radio-buttons, where only one item should be selected. like this:
<input class="radio" type="radio" name="payment" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="payment" value="ppal" /> <span>PaypaL</span>
The name attribute should be the same for both radio buttons:
<input class="radio" type="radio" name="method" value="cash" checked="checked" /> <span>Ca$h</span>
<input class="radio" type="radio" name="method" value="ppal" /> <span>PaypaL</span>
Also, if you are closing input tags, you are probably worried about XHTML validation. So instead of just checked you should type checked="checked".