Alpine.js - sync computed field back to model - alpine.js

I have a form with some dynamic inputs, and I need to define a readonly computed field, which will have a value count from other fields. This I am doing using x-bind:value='myFormulaFunction()' and it shows the value on the field correctly, and it even updates live if the variables change.
The problem is how to sync this count value back to the model. Even when I define x-model on the field, it doesn't update with the value. And apparently no functions like #change and #input are triggered on the value update either, neither does x-effect.
I made a quick fiddle here: https://jsfiddle.net/janzikmund/cm3zqeyj/12/
I know I should probably make a get function to achieve this, but I am doing this within x-for of dynamically generated array and having the logic on the field itself would just be much more convenient. Anything I am missing?

For that purpose you can use the $watch magic method that actually supports watching for multiple variables. So when one of the variables changes, it updates the value of count.sum.
Note: $watch checks for each child attribute, so don't watch the whole count variable because it will cause an infinite loop.
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
<div x-data="{ count: { f1: 0, f2: 0, sum: 0} }"
x-init="$watch('count.f1,count.f2', () => {count.sum = !isNaN(count.f1) && !isNaN(count.f2) ? parseInt(count.f1) + parseInt(count.f2) : 0})">
<input type="number" x-model="count.f1">
<input type="number" x-model="count.f2">
<input type="text" readonly x-model="count.sum">
<h2 x-text="count.sum"></h2>
</div>

Related

filter_input behavior for integer input tag name

I have form inputs that have their name attribute in Integer like below
<input type="hidden" name="100351312" value="test" />
If I use
echo filter_input( INPUT_POST, '100351312' )
It returns NULL
Whereas
echo $_POST['100351312'] prints the value correctly.
filter_input really needs three inputs; the type, the variable (both of which you have) and the filter, which you don't have. Here are some types of filters: http://php.net/manual/en/filter.filters.php
That said, if you're using WordPress you can almost always find a WordPress helper function you can use instead of filter_input()

mvc3 model bind to multiple lists of the same type

suppose...
in the razor view we have a model of Object A
#Model Object A
Object A is an instance of class A, which has multiple instances of Class B, which have a list of type C
Class A
public B Object1
public B Object2
Class B
public List<C> List1
There is an EditorView for Object B. There is a larger view for Object A in which each object B use an object B EditorView.
#Model Object B
...do things with list in object B
So, when the view renders, there are multiple Editor Views of class B present. What code can I use in the editorview to add additional C to the list List1 in B Object1 without affecting the list List1 in B Object2.
#Model Object B
... would like to add to this list and have it post back, and only effect the b it in. I don't know how to reference this object's master to add to this list exculsively
I looked at http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx a few times. Its like having multiple...
<input type="text" name="[0].Title" value="Curious George" />
<input type="text" name="[0].Author" value="H.A. Rey" />
<input type="text" name="[0].DatePublished" value="2/23/1973" />
<input type="text" name="[0].Title" value="Curious George" />
<input type="text" name="[0].Author" value="H.A. Rey" />
<input type="text" name="[0].DatePublished" value="2/23/1973" />
on the same page and wanting them to post back to their correct masters on the postback. Thats what I want to do. I want to dynamically add
<input type="text" name="...." value=""/>
but I'm running into problems with what do I put in the name spot to make it happen. Doing the #Html.EditorFor, and #Html.HiddenFor seem to work in that they modelbind to the correct parent, but they do not allow me to add additional input to the list.
My intuition direction - do something with reflection (or not) to get the name of the object of the master, use this to create a proper name?
Ideas or Code samples please. Thanks.
Using Html.EditorFor should give you the format to use. They need to be sequential and you'll need to either count the existing items (-1) to get your new [x] index to use in the name or parse the last elements name using a regex or string parse and extract its index, assuming you are allowing gaps in the sequence, which means you'll also need a custom binder if you want gaps.
okay, solution may be to use the editorfor a different variable to get the general name of the parent variable, and use jquery/js to parse this name and then dynamically insert the input type=file with a name based on this.

get form values other than by name in codeigniter

hi i am using codeigniter . i have a form , there i add hidden fields dynamically . so every hidden field is <input type='hidden' name='hidden' value="+$(this).attr('title')+"> so the name is equal .
the problem is when i submit the form and try to get my hiden field values i can only get one hidden field value , because the names are same
i print my form values
print_r($this->input->post());
i have 2 hidden fields but i get only one
Array
(
[hidden] => march
[textbox] => march
[mysubmit] => Submit
)
i can change the name dynamically of hidden field when creating , but then i don't know exactly the name of my hidden field ,
how can i get hidden field values with same name ?? is there any way to get form values other than by name ?? i tried and can not find an answer , please help .............
You'll need to use brackets in your name attributes:
<input type='hidden' name='hidden[]'>
<!-- ^^^^ -->
This will allow PHP to accept multiple inputs with the same name as an array of values, so in this case, $_POST['hidden'] will return an array of strings.
By default they are indexed starting at 0, so $_POST['hidden'][0] will get you the first one, $_POST['hidden'][1] will get you the second, etc., however - you can explicitly index them if it's easier for you, either with numbers or strings.
<input type='hidden' name='hidden[first]'>
<input type='hidden' name='hidden[second]'>
Or:
<input type='hidden' name='hidden[0]'>
<input type='hidden' name='hidden[1]'>
You can nest these as deep as you want like hidden[first][1][], and they will be treated similarly to a PHP array when you get the $_POST values, but you need the brackets in the HTML.
Without brackets, only the last field's value will be available in the $_POST array. This is a PHP feature, Codeigniter can't do anything about it.

Validating input type number in html5

I want to restrict entry of input onto a field of type number such that input cannot be outside range of min-max specified in the html.
input type = "number" min = "1" max = "5"
Is there a way of outputting the number field without the text box and i would rather not use
"input type = range"
as slider does not show value currently selected
Please help.
Thanks.
Based on what you said, I suggest using a simple input text field and check it's value validity on submission via JavaScript (as #Kush mentions above). You could also check it as the user types, or moves focus away from that field.
<form>
Only 1 to 100 <input type="text" name="number" pattern="\d{1,2}(?!\d)|100" title="one to hundreed only">
<input type="submit">
</form>

EditorFor with Collections and Name attribute

I am trying to create a form that allows the editing of multiple rows of data. I have no problem looping through and getting input boxes to render...I just cannot get the name attributes to output correctly.
I know that in order to submit a collection you need to post back an indexed name where the index is sequential starting at 0.
<input name="Books[0].Title" />
<input name="Books[1].Title" />
and so on...
Now, I can get the EditorFor function to output my proper name with given the following loop code
#For n = 0 To (Model.Books.Count - 1)
#Html.EditorFor(Function(m) Model.Books.Item(n).Title)
Next
giving me
<input name="Books[0].Title" />
<input name="Books[1].Title" />
and so on...
My problem is VS shows the following warning
Using the iteration variable in a lambda expression may have unexpected results. Instead, create a local variable within the loop and assign it the value of the iteration variable.
Yet when I change the loop to
#For n = 0 To (Model.Books.Count - 1)
Dim item = Mode.Books.Item(n)
#Html.EditorFor(Function(m) item.Title)
Next
I get
<input name="$VB$Local_item.Title" />
<input name="$VB$Local_item.Title" />
and so on...
Any thoughts? Should I just ignore the warning?
Thanks.
Jason
MVC works by actually breaking apart the lambda expression, and seeing what it's made of. It doesn't just execute the lambda and get the result. So you need to actually use the model parameter in the lambda for it to work. This should do it for you:
#For n = 0 To (Model.Books.Count - 1)
Dim index = n
#Html.EditorFor(Function(m) m(index).Title)
Next

Resources