how to send multiple checkboxes values to post api call in the form of key and value pair in angular - angular14

HTML Code File:
<form [FormGroup]="form">
Subjects
<div>
<input type="checkbox" id=""formControlName="phyiscs">
<label class="checkvalues">Phyiscs</label><br>
<input type="checkbox" id=""formControlName="chemistry">
<label class="checkvalues">Chemistry</label><br>
<input type="checkbox" id=""formControlName="maths">
<label class="checkvalues">Maths</label><br>
</div>
Hobbies
<div>
<input type="checkbox" id=""formControlName="Outdoor">
<label class="checkvalues">Outdoor</label><br>
<input type="checkbox" id=""formControlName="Indoor">
<label class="checkvalues">Indoor</label><br>
<input type="checkbox" id=""formControlName="music">
<label class="checkvalues">Music</label><br>
</div>
Disability
<div>
<input type="checkbox" id=""formControlName="disability">
<label class="checkvalues">Disability</label><br>
<input type="checkbox" id=""formControlName="nodisability">
<label class="checkvalues">No Disability</label><br>
<input type="checkbox" id=""formControlName="visuadisability">
<label class="checkvalues">Visual Disability</label><br>
</div>
</form>
Ts File Code:
form = new FormGroup({
});
api response output: ["subject":{ {"physics":true}, {"chemistry":false}, {"Maths":false}, }, "hobbies":{ {"outdoor":true}, {"indoor":false}, {"music":false}, }, "disability":{ {"disability":false}, {"nodisability":true}, {"visualdisablity":false}, }]Give me some input on how to send values through the form array

Related

How to render form on button clic in Vue?

I have two registration forms ona a page, but I only want to render one by clicking on proper button: 'Contract Form' or 'Company Form'. Should I do it with v-if? In the code below I just copied few lines of the form.
<template>
<div>
<button #click="contract">UMOWA</button>
<button #click="company">FIRMA</button>
<div v-if="contract">
<form method="post" #submit.prevent="onSubmit">
<label for="firstname">IMIĘ</label>
<input id="firstname" v-model="firstName" type="text" required />
<label for="lastname">NAZWISKO</label>
<input id="lastname" v-model="lastName" type="text" required />
<button type="submit">Zarejestruj się</button>
</form>
</div>
<div v-if="company">
<form method="post" #submit.prevent="onSubmit">
<label for="firstname">IMIĘ</label>
<input id="firstname" v-model="firstName" type="text" required />
<label for="lastname">NAZWISKO</label>
<button type="submit">Zarejestruj się</button>
<input id="lastname" v-model="lastName" type="text" required />
<label for="email">ADRES E-MAIL</label>
<input id="email" v-model="email" type="text" required />
<button type="submit">Zarejestruj się</button>
</form>
</div>
</div>
</template>
Yes but you will need to add true in the buttons onclick:
<button #click="contract = true">UMOWA</button>
<button #click="company = true">FIRMA</button>

Assigning a value by checking a box in razor pages

I`m making a web app for online exams and after i write the question and the answers, i want to select the right answer by checking a checkbox. [The right answer][1] will have the same value as the checked answer but i do not know how to make it appear in the [question list][2] or in the [database][3].
Model variables:
public string question{get;set;}
public string asnwer1{get;set;}
public string answer2{get;set;}
public string answer3{get;set;}
public string answer4{get;set;}
public string rightanswer{get;set;}
Create question page cshtml:
Intrebare = Question | Optiune = Answer | Raspuns = Right Answer.
<div class="form-group">
<label asp-for="AplicatieIntrebare.Intrebare" class="control-label"></label>
<input asp-for="AplicatieIntrebare.Intrebare" class="form-control" />
<span asp-validation-for="AplicatieIntrebare.Intrebare" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AplicatieIntrebare.Optiune1" class="control-label"></label>
<input asp-for="AplicatieIntrebare.Optiune1" class="form-control" />
<span asp-validation-for="AplicatieIntrebare.Optiune1" class="text-danger"></span>
<input id="Checkbox1" type="checkbox" />
</div>
<div class="form-group">
<label asp-for="AplicatieIntrebare.Optiune2" class="control-label"></label>
<input asp-for="AplicatieIntrebare.Optiune2" class="form-control" />
<span asp-validation-for="AplicatieIntrebare.Optiune2" class="text-danger"></span>
<input id="Checkbox2" type="checkbox" />
</div>
<div class="form-group">
<label asp-for="AplicatieIntrebare.Optiune3" class="control-label"></label>
<input asp-for="AplicatieIntrebare.Optiune3" class="form-control" />
<span asp-validation-for="AplicatieIntrebare.Optiune3" class="text-danger"></span>
<input id="Checkbox3" type="checkbox" />
</div>
<div class="form-group">
<label asp-for="AplicatieIntrebare.Optiune4" class="control-label"></label>
<input asp-for="AplicatieIntrebare.Optiune4" class="form-control" />
<span asp-validation-for="AplicatieIntrebare.Optiune4" class="text-danger"></span>
<input id="Checkbox4" type="checkbox" />
</div>
Thank you!
[1]:https://i.stack.imgur.com/MRUqr.png
[2]:https://i.stack.imgur.com/sgnst.png
[3]:https://i.stack.imgur.com/ztIIc.png
If you want to bind Raspuns when the checkbox is checked,you can add a hidden input with asp-for="AplicatieIntrebare.Raspuns",and before posting form,iterate div with class="form-group",then check if the check box in the div is checked.If so,set the hidden input value with the input's value in the div.Here is a demo:
cshtml:
<form method="post" id="myform">
<div class="form-group">
<label asp-for="AplicatieIntrebare.Intrebare" class="control-label"></label>
<input asp-for="AplicatieIntrebare.Intrebare" class="form-control" />
<span asp-validation-for="AplicatieIntrebare.Intrebare" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AplicatieIntrebare.Optiune1" class="control-label"></label>
<input asp-for="AplicatieIntrebare.Optiune1" class="form-control" />
<span asp-validation-for="AplicatieIntrebare.Optiune1" class="text-danger"></span>
<input id="Checkbox1" type="checkbox" />
</div>
<div class="form-group">
<label asp-for="AplicatieIntrebare.Optiune2" class="control-label"></label>
<input asp-for="AplicatieIntrebare.Optiune2" class="form-control" />
<span asp-validation-for="AplicatieIntrebare.Optiune2" class="text-danger"></span>
<input id="Checkbox2" type="checkbox" />
</div>
<div class="form-group">
<label asp-for="AplicatieIntrebare.Optiune3" class="control-label"></label>
<input asp-for="AplicatieIntrebare.Optiune3" class="form-control" />
<span asp-validation-for="AplicatieIntrebare.Optiune3" class="text-danger"></span>
<input id="Checkbox3" type="checkbox" />
</div>
<div class="form-group">
<label asp-for="AplicatieIntrebare.Optiune4" class="control-label"></label>
<input asp-for="AplicatieIntrebare.Optiune4" class="form-control" />
<span asp-validation-for="AplicatieIntrebare.Optiune4" class="text-danger"></span>
<input id="Checkbox4" type="checkbox" />
</div>
<input type="submit" value="submit" />
<input asp-for="AplicatieIntrebare.Raspuns" hidden />
</form>
#section scripts {
<script>
$("#myform").submit(function () {
$(".form-group").each(function (index, element) {
if ($(element).children("input[type='checkbox']").prop("checked")) {
$("#AplicatieIntrebare_Raspuns").attr("value", $(element).children("input[type='text']").val());
}
})
})
</script>
}
cshtml.cs:
[BindProperty]
public AplicatieIntrebare AplicatieIntrebare { get; set; }
public void OnGet()
{
AplicatieIntrebare = new AplicatieIntrebare { Intrebare = "What's my dog's name?", Optiune1 = "Jerry", Optiune2 = "Spot", Optiune3 = "Rex", Optiune4 = "Max" };
}
public void OnPost()
{
}
result:

using Bootstrap3 form in laravel5.1

I am trying to make a form using bootstrap3 in laravel5.1 so that I can get values from user and store it on the database and want to redirect the same page.
here is the form part of my code --
<div class="row">
<form action="{{url('fastshops/menu')}} " method="post" role="form">
<legend>ADD NEW ITEM</legend>
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" name="ItemID" id="" placeholder="Item ID...">
<label for=""></label>
<input type="text" class="form-control" name="ItemName" id="" placeholder="Item Name...">
<label for=""></label>
<input type="text" class="form-control" name="SellPrice" id="" placeholder="Sell Price...">
<label for=""></label>
<input type="text" class="form-control" name="NetPrice" id="" placeholder="Net Price...">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
but this part action="{{url('fastshops/menu')}} is not working ! If I click on the submit button I am having TokenMismatchException ! please help me out.
thanks in advance.
add this
<input type="hidden" name="_token" value="{{Session::token()}}"/> or
<input type="hidden" name="_token" value="{{csrf_token()}}"/>
inside your form.
Laravel 5 automatically check for CSRF on all Post request for all the routes. Read the docs, they are pretty self explainatory

how to make label field and text field to appear on same line in asp.net mvc4?

#using (Html.BeginForm()) {
<div>
<fieldset>
<legend>Form</legend>
<label for="FirstName">First Name:</label>
<input type="text" name="FirstName">
<label for="LastName">Last Name:</label>
<input type="text" name="LastName">
<label for="Period">Date:</label>
<input type="text" name="Period">
<p>
<input type="submit" value=" Send " />
</p>
</fieldset>
</div>
}
Here i want to make all the label field and text field to appear on same line?How could i do that?
Change Parent Div and paragraph display style to inline
<div style="display:inline">
<fieldset>
<legend>Form</legend>
<label for="FirstName">First Name:</label>
<input type="text" name="FirstName">
<label for="LastName">Last Name:</label>
<input type="text" name="LastName">
<label for="Period">Date:</label>
<input type="text" name="Period">
<p style="display:inline">
<input type="submit" value=" Send " />
</p>
</fieldset>
</div>

How to get widget data in POST method of form submission?

I have widget called List builder, which i used to sort list of contacts.
when i submit the form the, i should get these sorted list of contacts in my $_POST array.
I am getting the content from CGridview widget but not from the following widget:
$this->widget('ext.widgets.multiselects.XMultiSelects',array(
'leftTitle'=>'Email',
'leftName'=>'Contactlist[email][]',
'leftList'=>Contactlist::model()->findUsersByemail( ),
'rightTitle'=>'Email-List',
'rightName'=>'Contactlist[email][]',
//'rightList'=>Contactlist::model()->findUsersByemail( ),
'rightList'=>array(),
'size'=>20,
'width'=>'200px',
));
How to submit this widget data, so that i can access it from $_POST array?
Here is the code generated by this widget:
<form id="yw0" action="/amantran/index.php?r=invmgmt/contactlist/admin" method="get">
<div class="row">
<label for="Contactlist_econtact">Econtact</label> <input size="10" maxlength="10" name="Contactlist[econtact]" id="Contactlist_econtact" type="text" /> </div>
<div class="row">
<label for="Contactlist_fname">Fname</label> <input size="40" maxlength="40" name="Contactlist[fname]" id="Contactlist_fname" type="text" /> </div>
<div class="row">
<label for="Contactlist_lname">Lname</label> <input size="25" maxlength="25" name="Contactlist[lname]" id="Contactlist_lname" type="text" /> </div>
<div class="row">
<label for="Contactlist_email">Email</label> <input size="50" maxlength="50" name="Contactlist[email]" id="Contactlist_email" type="text" /> </div>
<div class="row">
<label for="Contactlist_mobile">Mobile</label> <input size="10" maxlength="10" name="Contactlist[mobile]" id="Contactlist_mobile" type="text" /> </div>
<div class="row">
<label for="Contactlist_address">Address</label> <input size="50" maxlength="50" name="Contactlist[address]" id="Contactlist_address" type="text" /> </div>
<div class="row buttons">
<input type="submit" name="yt0" value="Search" /> </div>
You are having method="get" in your form, change it to method="post"