Dynamic POST Radio Button - post

I create, dynamically, groups ou radio button in the "jQuery(document).ready(function())".
The partial code is:
(...) texto_html = texto_html + ""+record.descricao_equipamento+":"+record.nome_fornecedor+" ("+record.preco_equip_fornecedor+"€)";
(...)
The output is ok, one example:
<h5 class=""><strong>Transmissor 1:</strong></h5>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<label class="radio line">
<input type="radio" name="optionsRadios11" value="11">Texto 1
</label>
</div>
</div>
<h5 class=""><strong>Transmissor 2:</strong></h5>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<label class="radio line">
<input type="radio" name="optionsRadios12" value="120">
Texto 2
</label>
<label class="radio line">
<input type="radio" name="optionsRadios12" value="12">
Text 3
</label>
</div>
Now I want to POST my Form with AJAX (data: $("#myForm").serialize(),(..)
My problem is in my php file (that will retrieve the Posted values). How can I know how many radios groups I have? Is there a way to serialize them with, let's say an array of radios? Because really I just want their value, independently if they belong to group1 or group2 ou whatever.
thank you.
I'm stuck here! :)))

If I understood correctly you want to iterate over all the radios that were sent:
I can think of two ways of doing that:
You can iterate over all the $_POST values and filter them by a regex (to get just the "optionsRadiosXX" ones)
you can also append a new parameter in your http post (after form.serialize) with all the radios under a given form and then use this parameter as a guide in your php.
.
var getRadios = function() {
var map = {};
$("#formID input[type=radio]").each(function(){
var e = $(this);
if(!map[e.attr("name")]) {
map[e.attr("name")] = true;
}
});
var a = []
for(var r in map) {
a.push(r);
}
// alert(JSON.stringify(a));
return a;
}
See here an example: http://codepen.io/anon/pen/IKayC
Hope that helps.

Related

how to handle subtraction in thymeleaf

I have registration form, where a user can enter her
name,email,dateofBirth,mobile Number. I want to calculate the users
age. If the user is 21 old he is able to register with us unless he cannot able to register. I have already created custom validation, and I pass the validation in my model class. But I am not able to calculate the age and use the logic for 21 year. I created dynamic form.
SignUp.html
<div class="content-area-container page-ath-wrap" th:object="${advertisement}">
<div class="page-ath-content container-fluid">
<div class="page-ath-form">
<div class="page-ath-heading">
<!-- <h3 th:text="*{reward_amount}">Congrats! You just earned $5 off your next beer.</h3>-->
<h3 th:text="*{form_title}"></h3>
<!-- <p>Enter your info to claim the reward!</p>-->
<p th:text="*{form_description}"></p>
</div>
<div class="singup-form">
<form id="form_signup">
<input id="id" th:field="*{id}" type="hidden"/>
<div th:each="item,iterStat : *{form}" >
<!-- <label th:label="${str.getLabel()}" th:type="${str.getType()}" th:text="${str.value}" ></label>-->
<div class="form-group">
<label th:for="${item.name}" th:text="${item.label}"></label>
<div th:if="${item.validation == 'dob'}" >
<input class="form-control" th:id="${item.name}" th:name="${item.name}" th:placeholder="${item.placeholder}" th:required="${item.required}"
th:type="${item.type}" th:attr="max=${#dates.format(#dates.createNow(), 'MM-dd-yyyy')}"/>
</div>
<div th:unless="${item.validation == 'dob'}" >
<input class="form-control" th:id="${item.name}" th:name="${item.name}" th:placeholder="${item.placeholder}" th:required="${item.required}"
th:type="${item.type}"/>
</div>
</div>
</div>
Advertisement.kt
class Advertisement(val media: ArrayList<MEDIA>? = null)
class Form(
val type:String="",
val required:Boolean,
val label:String="",
val placeholder:String="",
val name:String="",
val value:String="",
val validation:String="",
val min:Int,
)
As other answer suggested you can do it with javascript.
You can make use of this jQuery validation API
And add a custom validation method like so:
jQuery.validator.addMethod("olderThan21", function(value, element) {
return //age calculation logic if true-> validation pass
//if false->validation error }
, "You must be 21+ to subscribe");
In case that the validation isn't passed satisfactory this will prevent the form from submitting.

how to add the placeholder value to ngmodel

I am following an example in primeng in which I can add a new row to a table. Everything "seems" to work as long as I fill out all the fields in the input option. However, I want to add the place holder value to the NGmodel if the user does not change the value of the input. I tried everything (ng-init, ngvalue, etc etc) but I can never get the ngmodel to carry the value in the place holder... and the table gets fill with the 3 filled fields but not the one where the user did not type anything.
extract of the HTML....
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_id">Product ID</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_id" [ngModel]="myproduct.product_line_id" placeholder="{{ lastproductline + 1}}" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_1">Product</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_1" [(ngModel)]="myproduct.product_line_1" autofocus />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_2">Category</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_2" [(ngModel)]="myproduct.product_line_2" />
</div>
</div>
<div class="ui-g-12">
<div class="ui-g-4">
<label for="product_line_3">Sub Category</label>
</div>
<div class="ui-g-8">
<input pInputText id="product_line_3" [(ngModel)]="myproduct.product_line_3" />
</div>
</div>
the ts file looks something like...
productlines = [];
myproduct: { [s: string]: ProductLines; } = {};
showDialogToAdd() {
this.newProductLine = true;
this.myproduct = {};
this.displayDialog = true;
}
save() {
let productlines = [...this.productlines];
productlines.push(this.myproduct);
this.finalproductchanges.push(this.myproduct)
this.productlinesClone = productlines;
this.myproduct = null;
this.displayDialog = false;
}
Any ideas will be greatly appreciated
I managed to change the code by adding the field directly in the controller.

Getting all the values (checked and unchecked) from the dynamic checkbox in mvc

I'm adding a textbox and a corresponding checkbox to the view on click of a button. These checkbox will determine if the textbox value needs to be shown or hidden.
With the below code I've getting all the textbox fields, but for the checkbox I only get the checked values.
This is the view part
$('#btn-Add-Key-Name').click(function (e) {
i++;
e.preventDefault();
$(`<div class="row" id="rowid`+ i +`">
<div class= "col col-4" >
<section>
<label class="input">
<i class="icon-prepend fa fa-id-badge"></i>
<input type="text" name="KeyName" value="" placeholder="Key Name">
</label>
</section>
</div>
<div class="col col-2">
<label class="checkbox">
<input type="checkbox" name="IsKeyValid" value="true">
<i></i> Key
</label>
</div>
</div >`).appendTo($fields);
});
On the Controller
public JsonResult AddKeyToDB(string[] KeyName, IEnumerable<string> IsKeyValid)
{
}
//Is there a way to get the unchecked values as well for eg:
keyName = ["private", "public"] ,
IsKeyValid = ["false", "true"]
In your html you dont need to hard-code value of checkbox thats why you are only having checked values. So you need to make following change to your code. Just remove value="true" from input type checkbox.
<input type="checkbox" name="IsKeyValid" >

How to show password entered when checkbox is clicked?

in my form i have one checkbox so when i check the checkbox it should show password entered in password field.i am doing it using angular 7.
<div class="form-group">
<label for="Password" class="control-label">Password</label>
<div>
<input type="password" class="form-control" name="Password" ngModel
#pwd="ngModel" placeholder="Password" required pattern="^(?=.*[a-z])(?
=.*
[A-Z])(?=.*\d)(?=.*[#$!%*?&])[A-Za-z\d#$!%*?&]{8,}$">
<div *ngIf= pwd.invalid>
<small class="form-text text-danger" *ngIf=
pwd.errors.required>Password Required</small>
<small class="form-text text-danger"
*ngIf=pwd.errors.pattern>Minimum eight characters, at least one
uppercase letter, one lowercase letter, one number and one special
character.</small>
</div>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input"
[disabled]="pwd.invalid">
<label class="form-check-label" id="show" for="exampleCheck1">Show
Password</label>
</div>
By checking the checkbox it should show password entered in the password field.
Hi and welcome on Stackoverflow!
Try to switch between type="password" and type="text" based on checkbox value.
Add #showPassword to your checkbox input, like that :
<input #showPassword type="checkbox" class="form-check-input" [disabled]="pwd.invalid">
Then on your password field :
<input type="showPassword.checked ? 'text' : 'password'" .... />
EDIT (in case you did not solve it yet, and for others) :
component.ts
// show/hide boolean variable
showPassword: boolean;
constructor() {
// init value in constructor
this.showPassword = false;
}
// click event, show/hide based on checkbox value
showHidePassword(e) {
this.showPassword = e.target.checked;
}
component.html
<input [type]="showPassword ? 'text' : 'password'" />
<input type="checkbox" (change)="showHidePassword($event)" > toggle view

mvc radiobuttonfor in editortemplate keyboard navigation does not set model

Context:
Model generating some RadioButtonFor groupings as input to answer questions.
What is happening:
Case 1. When mouse click on a radio option the display looks correct. When the [HttpPost] ActionResult(model) for the page is triggered the Model.Answer comes through with the correct value. Which is good and desired.
Case 2. When navigating with the keyboard to the radio group and selecting one with arrow keys the display looks correct. But when the [HttpPost] ActionResult (model) is triggered the Model.Answer value is unchanged from what it was loaded as on page load.
Here is the code that makes the radio group:
#model NexusPWI.ViewModels.Wizard.QuestionModel
#* Dynamically generate and model bind controls for QuestionModel *#
#{
<div class="row d-contents">
<div class="form-group">
<div class="question">
<div class="col-lg-2 d-contents">
<div class="btn-group btn-toggle group-sm d-contents" data-toggle="buttons">
<label class="btn QuestionRadio btn-default #(Model.Answer == YesNoNAOptions.Yes ? "active" : "")" for="#Model.Answer">
#YesNoNAOptions.Yes.ToString().ToUpper()
#Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.Yes, new { #onfocus = "radiofocus(event)", #onblur = "radioblur(event)" })
</label>
<label class="btn QuestionRadio btn-default #(Model.Answer == YesNoNAOptions.No ? "active" : "")" for="#Model.Answer">
#YesNoNAOptions.No.ToString().ToUpper()
#Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.No, new { #onfocus = "radiofocus(event)", #onblur = "radioblur(event)" })
</label>
#if (!Model.NaInvalid)
{
<label class="btn QuestionRadio btn-default #(Model.Answer == YesNoNAOptions.NA ? "active" : "")" for="#Model.Answer">
N/A
#Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.NA, new { #onfocus = "radiofocus(event)", #onblur = "radioblur(event)" })
</label>
}
</div>
</div>
<div class="col-lg-9 d-contents">
<div class="row">
<p>
<strong>#Model.Question</strong>
</p>
</div>
#Html.HiddenFor(x => Model.Question_IdentityMarker, new { #class = "Question_IdentityMarker" })
</div>
</div>
</div>
</div>
}
Here is an example of the html that is generated:
<div class="form-group">
<div class="question">
<div class="col-lg-2 d-contents">
<div class="btn-group btn-toggle group-sm d-contents" data-toggle="buttons">
<label class="btn QuestionRadio btn-default " for="No">
YES
<input data-val="true" data-val-required="The Answer field is required." id="Questions_0__Answer" name="Questions[0].Answer" onblur="radioblur(event)" onfocus="radiofocus(event)" value="Yes" type="radio">
</label>
<label class="btn QuestionRadio btn-default active" for="No">
NO
<input checked="checked" id="Questions_0__Answer" name="Questions[0].Answer" onblur="radioblur(event)" onfocus="radiofocus(event)" value="No" type="radio">
</label>
<label class="btn QuestionRadio btn-default " for="No">
N/A
<input id="Questions_0__Answer" name="Questions[0].Answer" onblur="radioblur(event)" onfocus="radiofocus(event)" value="NA" type="radio">
</label>
</div>
</div>
<div class="col-lg-9 d-contents">
<div class="row">
<p>
<strong>Do you charge sales tax?</strong>
</p>
</div>
<input class="Question_IdentityMarker" id="Questions_0__Question_IdentityMarker" name="Questions[0].Question_IdentityMarker" value="CUSTOMERSALESTAX" type="hidden">
</div>
</div>
</div>
EDIT Adding onFocus & onBlur at request:
onFocus & onBlur are css highlighting for the keyboard navigation to make it more clear for the user where they are in the page.
function radiofocus(event) {
// Get event object if using Internet Explorer
var e = event || window.event;
// Check the object for W3C DOM event object, if not use IE event object to update the class of the parent element
if (e.target) {
var addClass = focusClass(e.target.parentNode.parentNode.parentNode.parentNode.parentNode.className, "r");
e.target.parentNode.parentNode.parentNode.parentNode.parentNode.className = addClass;
} else {
var addClass = focusClass(e.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode.className, "r");
e.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode.className = addClass;
}
};
function radioblur(event) {
// Get event object if using Internet Explorer
var e = event || window.event;
var removeClass = focusClass("", "r").trim();
// Check the object for W3C DOM event object, if not use IE event object to update the class of the parent element
if (e.target) {
e.target.parentNode.parentNode.parentNode.parentNode.parentNode.className = e.target.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(removeClass, "");
} else {
e.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode.className = e.srcElement.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(removeClass, "");
}
};
Why do the keyboard navigated changes not get back to the controller?
Anything to add to make this clearer?
Side note: For some reason before a value is chosen in the radio group the keyboard tab navigation is stopping for each radio answer for a question.

Resources