hope you're having a good time :)
I'm using a RESTful controller. Route looks like Route::controller('categories', 'CategoriesController');
I want to pass a value i.e. the category name user wants to delete
How do I do that? Or kindly point me in the right direction.
Note: I tried assigning a value to a hidden input field, when I used that hidden field's value, it was always empty, so the value is not binded to the input field "properly" in my jS function.
{{ Form::open(array('url'=>'categories/delete')) }}
<input style = "display: none;" type="hidden" name="asalDel" id = 'asalDelCat' value="acs" />
<input type='submit' class="btn btn-danger" value="Delete" />
{{ Form::close() }}
This is my form in my bladed-view
Related
I'm playing around with htmx and hyperscript and I want the "submit button" (Add User) to be enabled when all required input fields are valid in a form. In this case, a non-empty name and a valid email address must have been defined.
<form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend">
<label class="control-label" for="nameInput">Name</label>
<input id="nameInput" name="name" class="form-control" type="text" required placeholder="John Doe"/>
<label class="control-label" for="emailInput">Email</label>
<input id="emailInput" name="email" class="form-control" type="email" required placeholder="john#doe.org"/>
<button _="<what should I write here??>" class="btn btn-primary" disabled>Add User</button>
</div>
</form>
What should I write instead of <what should I write here??> to make this happen?
Something like this should work:
<button _="on change from closest <form/>
for elt in <[required]/>
if the elt's value is empty
add #disabled then exit
end
end
remove #disabled" class="btn btn-primary" disabled>Add User</button>
https://jsfiddle.net/xy8vn5jk/20/
I like #1cg answer
I have slightly more stringent requirements than the OP.
What I required is such that when the user types but doesn't leave the focus, the button should still disable or enable correctly.
If use keyup is wiser to use debounced,
hence my version is
<button _="on keyup from closest <form/> debounced at 150ms
if (<[required]:invalid/>).length > 0
add #disabled
put 'Check All Fields' into me
then exit
end
remove #disabled
put 'Submit' into me
" disabled type="submit">
Fill Out Required Fields
</button>
https://codepen.io/simkimsia/pen/LYQgZZK
by using [required]:invalid and comparing the length you can avoid doing a for loop and a nested if. Please note the parenthesis to wrap ([required]:invalid)
What I am trying to achieve is a component that deals conditionally with new input or old input(edit). I've tried this, inspired by this question:
<input type="text" placeholder="New Event" v-model="event.title ? event.title : title" required/>
or even
<input type="text" placeholder="New Event" v-model="event.title || title" required/>
but both don't work. I get errors in the console.
event.title comes from prop event;
title is a property in the data object with the value of ''.
In Vue 2 do I need to build 2 separate components? One for new input and another for editing?
You can try this one, it works for me :
<td>
<div v-if="event">
<input v-model="event.title">
</div>
<div v-else><input v-model="title"></div>
</td>
I think you can use computed for this purpose like below :
<input type="text" placeholder="New Event" v-model="nameOfMethod" required/>
and within computed methods create nameOfMethod with your logic like this :
computed:{
nameOfMethod(){
if (this.event.title === "")
return this.title;
else
return this.event.title;
},
}
Below are my code for 2 input fields in vuejs. The current validation rule is they both need to be numeric. I've read the official document here.
I need to add another rule, that max-amount must be bigger than min-amount. The trick is min-amount is user input, not pre-determined. How should I implement this customize validator?
<div class="min-section">
<label>Min</label>
<input type="text"
class="uk-input"
name="min-amount"
v-validate="'numeric'"
v-model="minAmount" />
</div>
<div class="max-section">
<label>Max</label>
<input type="text"
class="uk-input"
name="max-amount"
v-validate="'numeric'"
v-model="maxAmount"/>
</div>
You could bind min_value in the v-validate rules of the max-amount <input>:
<input name="min-amount" v-model="minAmount">
<input name="max-amount"
v-validate="'numeric|min_value:' + minAmount"
v-model="maxAmount">
demo
Also note if you don't have a specific reason to use a text input, you should consider using <input type="number"> (instead of <input type="text">) so that the user could only enter numeric values.
I'm trying to use the debounce binding behaviour on a list of checkboxes, but it doesn't seem to be working the way I expect (I'm not sure if you can even debounce a checkbox):
<label repeat.for="v of values">
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
clicking on any of the checkboxes results in the checkedVal array updating immediately, whereas it works as I expect for a normal input:
<input type="text" value.bind="textVal & debounce:1000"/>
Can I debounce a checkbox input?
Here's the full code, with a GistRun here.
app.html:
<template>
<h1>Checkbox bind debounce</h1>
<form>
<label for="text">text input with debounce:1000 </label>
<input type="text" value.bind="textVal & debounce:1000"/>
<div repeat.for="v of values">
<br/>
<label>
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
</div>
</form>
<br/>
<p>Text value: ${textVal}</p>
<p>Checked values:</p>
<p repeat.for="v of checkedVal">${v}</p>
</template>
app.js:
export class App {
values = [1, 2, 3];
checkedVal = [];
}
Thanks!
At this time, it's not supported. The debounce binding behavior controls the rate at which the checkedVal property is assigned. In a checked binding, the property isn't assigned, the array instance referenced by the property is mutated with push and splice which circumvents the debouncing in the binding expression.
I want to set two JavaScript variables as the values of these textboxes.
Can anyone can help me?
<form name="myform1">
<input type="number" name="pop_size" value="3">
<input type="button" value="Pop Size" id="population" onclick="setValue()">
</form>
<form name="myform2">
<input type="number" name="totalIterations" value="2">
<input type="button" value="Iterations" id="Iterations" onclick="setValue()">
</form>
You can use getElementsByName() to get a list of elements by their names in the form. Since your names are unique (which isn't necessary in the spec, but is a good idea for this exact reason), the array returned by that function should have exactly one element in it. Something like this:
var firstVariable = document.getElementsByName('pop_size')[0].value;
var secondVariable = document.getElementsByName('totalIterations')[0].value;
Or did you mean that you want to set the values to what's in a variable? That would be the reverse:
document.getElementsByName('pop_size')[0].value = firstVariable;
document.getElementsByName('totalIterations')[0].value = secondVariable;