retrive value from multiple checkbox in html using angularJS - html

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>

Related

Woocommerce bookings

I'm trying to create custom steps on checkout page with Woo bookings plugin.
So I have 3 steps.
create booking product with parameters like duration, start date, end date.
Extra services
Payment
My problem is that I need to submit form details, in other words add this booking product to cart, but without submitting order.
I'm using this structure with hardcoded values, but whem I'm submitting this it acts like place order button, not like add to cart button. How do I just add to cart?
<div class="form-group">
<input type="radio" id="Terminal1withcancelation" class="form-check-input" name="add-to-cart" value="13"><label for="Terminal1withcancelation">terminal 1</label>
<input type="radio" id="Terminal1nocancelation" class="form-check-input" name="add-to-cart" value="13"><label for="Terminal1nocancelation">terminal 1</label>
<input type="radio" id="Terminal2withcancelation" class="form-check-input" name="add-to-cart" value="13"><label for="Terminal2withcancelation">terminal 2</label>
<input type="radio" id="Terminal2nocancelation" class="form-check-input" name="add-to-cart" value="13"><label for="Terminal2nocancelation">terminal 2</label>
<input type="hidden" name="wc_bookings_field_duration" value="4">
<input type="hidden" name="wc_bookings_field_start_date_month" value="07">
<input type="hidden" name="wc_bookings_field_start_date_day" value="23">
<input type="hidden" name="wc_bookings_field_start_date_year" value="22">
<input type="hidden" name="wc_bookings_field_start_date_to_month" value="07">
<input type="hidden" name="wc_bookings_field_start_date_to_day" value="26">
<input type="hidden" name="wc_bookings_field_start_date_to_year" value="2022">
</div>
<button type="submit" name="btn1" value="btn1" class="buy custom_add_btn" id="nextBtn" onclick="nextPrev(1)">NEXT</button>

How can I further format the response I get from a standard HTML checklist?

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>

checkbox form validation - jquery

$(document).ready(function(){
$('#update2').click(function(){
var checkboxes = $('input[name="checkbox1"], input[name="checkbox2"]');
checkboxes.on("change", function(e){
checkboxes[0].setCustomValidity(checkboxes.filter(":checked").length ? '' : 'please select at least one option to procees')
}).change
});
});
$(document).ready(function(){
$('#select2').click(function(){
var checkboxes2 = $('input[name="choose1"], input[name="choose2"]');
checkboxes2.on("change", function(e){
checkboxes2[0].setCustomValidity(checkboxes2.filter(":checked").length ? '' : 'please select at least one option to procees')
}).change
});
});
<form>
<input type="radio" id="update" name="update-button" value="1">
<input type="radio" id="update2" name"update-button" value="2">
<input type="checkbox" id="check1" name="checkbox1" value="3">
<input type="checkbox" id="check2" name="checkbox2" value="4">
<input type="submit" name="submit-button">
</form>
<form>
<input type="radio" id="select" name="select-button" value="10">
<input type="radio" id="select2" name"select-button" value="11">
<input type="checkbox" id="box1" name="choose1" value="12">
<input type="checkbox" id="box2" name="choose2" value="13">
<input type="submit" name="submit-select">
</form>
Im trying to set custom validation to the checkboxes. so when i select the radio button with the id "select2", the checkboxes with diffrent name "choose1" and "choose2" one of them is required before submitting the form. it is working perfieclty in the first example with "update2" and "checkbox1","checkbox2" checkboxes. but i have no idea why it is not working in the second example with the "select2" and "choose1", "choose2" checkboxes.

Get checkboxes to send value instead of boolean

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]

Payment options with radio buttons in the contact 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".