I would like to get a typed value from a ReactStrap Input component, via the onChange function.
The aim is to use a text input only but be able to get a specific typed value (String or Number in my example below).
<Input valueAs="String" name="input1" type="text" onChange={this.onChange}></Input>
<Input valueAs="Number" name="input2" type="text" onChange={this.onChange}></Input>
You can see the expected type is defined by the valueAs attribute.
I expect to get an event in this.onChange with:
a value as a String for Input 1
a value as a Number for Input 2
What is the best way to do this with React / Reactstrap?
Input component of reactstrap does not have a property called valueAs. To get value in a format you need, you can do:
<Input name="input1" type="text" onChange={(e) => this.onChange(`${e.target.value}`)}/>
{/* to make it integer you can add unary plus sign like so: */}
{/* this.onChange(+e.target.value) */}
Related
I'm following this article
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
for a checkbox, but how do I set and get the check value?
As I need to a do a post back with the value.
<label class="container">Accept Offers?
<input type="checkbox" id="Offers" name="Offers"/>
span class="checkmark"></span>
</label>
change your code to this
<input type="checkbox" id="Offers" value="checkedValue" name="Offers"/>
If you see the Request.Form object or query-string (in case of HTTP GET submission) you will see the value, If this is not checked null will be seen or Request.Form will have not that key that belong to Checkbox.
I am using Tuple to pass two models inside the view like code given below.
#model Tuple<AdvanceSearchModel, List<SearchUserModel>>
<form role="search" method="post" action="/Public/AdvanceSearch">
<div class="form-group">
<label>Name</label>
<input name="FullNames" type="text" class="form-control" value=""/>
</div>
<div class="form-group">
<label>Product</label>
<input name="Products" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>Location:</label>
<input name="Location" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>State</label>
<input name="States" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>Country</label>
<input name="Countries" type="text" class="form-control" value=""/>
</div>
</form>
All the name attributes inside inputs are of AdvanceSearchModel. How do I use tag helper such as asp-for when passing multiple model to the views containing one or multiple forms? Also how do I retain values of the form after submitting the form in above scenario?
As you can see in the source code of InputTagHelper
You can see it creates the name attribute based on the (lambda) expression in html-tag:asp-for.
what you need
You need a form name tag like this SearchUserModel[0].Location
Where:
SearchUserModel is the property name on the model which is in the controller method you post to
[0] is the index in the list
Location is the property on the iten in the list the SearchUserModel instance
My suggestion
Not to do
Extend the InputTagHelper and add a prefix option (which adds a prefex to the name).
Use a view model Not a tuple!
Create a partial view that only takes SearchUserModel + a prefix (like an int for which row in the list it is for example: usermodel[1])
In your view loop over the list and call the partial.
result
#model SearchUserModel
<input asp-for="Location" my-prefix="ListItem[#Model.Id]" class="form-control" />
Better longterm option
Make a HTML template on how SearchUserModel part of the form should look.
Do ajax call to get the data or put the data as json in your view. (or take step 3 from what not to do)
Generate the form with well structured javascript.
On submit Instead of submitting the form, parse the from to json and send this as json ajax call.
Why do i say this? It is easier to debug if you get weird databindings in your controller.
That said, option 1 is perfectly fine but it might lead to problems later, as it is very static template, you wont be able to add or remove rows easily.
References for proper html name tags for lists:
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx
How does MVC 4 List Model Binding work?
I have the following mdl-textfield:
<div class="mdl-textfield mdl-js-textfield" id="step_condition">
<textarea class="mdl-textfield__input" type="text" rows="25"> </textarea>
<label class="mdl-textfield__label" for="step_json">Step condition</label>
</div>
To set the value of the field I use:
$("#step_condition").get(0).MaterialTextfield.change('100');
My questions are:
is this the correct way of setting the value of the field?
is there a similar way to fetch the value of the field?
I know I can fetch the value directly from the textarea, but somehow it seems to make more sense to use the API.
You should add an id to the textarea itself, like:
<div class="mdl-textfield mdl-js-textfield" >
<textarea class="mdl-textfield__input" type="text" rows="25" id="step_json"></textarea>
<label class="mdl-textfield__label" for="step_json">Step condition</label>
</div>
Look at the example on the official specifications, there is no id at the div level. http://www.getmdl.io/components/index.html#textfields-section
To set up the value of the field you could do
$("#step_json").val("100");
However you will have to deal with the fact that the label is not removed automatically. This post should help: https://github.com/google/material-design-lite/issues/903
I'm creating an input box that will only allow 17 characters and is formatted to display as a mac address.
I've added the first 11 characters, the rest the ( last 4 digits of mac) will be added by the user. Is there any way to stop them deleting the initial characters I've preset ?
<script>
function macAdd(val){
if (/[^\w-]|_/.test(val))
{alert("invalid form only alpanumeric and -")
return val}
val=val.replace(/[^\w-]|_/g,'')
val=val.replace(/(\w{2})([^-])/g,'$1'+'-'+'$2')
val=val.replace(/-$/,'')
return val
}
</script>
<input type="text" onkeypress="this.value=macAdd(this.value)" size="30" value="00-00-00-00" maxlength="17"> </p>
Thanks
This seems to achieve what I'm looking to do.
<form>
<input type="text" style="width:130px;" value="00-00-00-00-" readonly><input type="text" style="margin-left : -50px;width:50px;" maxlength="5" onkeypress="this.value=macAdd(this.value)">
</form>
I have set the limit of characters on textbox but while typing the input if it exceeds from 9 character it continues type it another field without use of tab
<input data-val="true" data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid">
I want it should stop to take input.
You should use jQuery for example
<input data-val="true" maxlength=9 data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid"><br>
<script lang="text/javascript">
$("#Ssn").keyup(function(e)
{
var str=$("#Ssn").val();
if(str.length==9)
{
$("#Ssn").blur();
}
});
</script>
at this code you must include jQuery before
** Edit Misunderstanding
Use the maxlength attribute
<input data-val="true" data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid" maxlength="9">
pattern attribute regular expressions aren't fully supported in all browsers--specifically, those that do support them don't always obey complex regular expressions. I've noticed this in Safari, at least.
The maxlength attribute SHOULD work. Not sure why it's not for you. Maybe post a JSBIN example for us to look at.
That said, for complex client-side form validation, you still need to rely on javascript to support a broader range of browsers.