I am running into an issue where I am using JavaScript to populate two hidden input fields as a user moves around a cropping tool on an image. The hidden inputs are being populated with the pixels where the image would be cropped. My initial understanding is that using wire.model won't work with hidden input fields that are updated by JavaScript as it will always return null when I submit the form.
<input type="hidden" id="formWidth" name="width" value="width" wire:model.defer="width">
<input type="hidden" id="formHeight" name="height" value="height" wire:model.defer="height">
The value changes as a user moves the cropping tool around the image so once they are ready to submit it would look like:
<input type="hidden" id="formWidth" name="width" value="40px" wire:model.defer="width">
<input type="hidden" id="formHeight" name="height" value="20px" wire:model.defer="height">
I am new to Livewire and I was hoping someone could push me in the direction of how I should be handling hidden inputs or if there is a way to have Livewire read a JavaScript variable and I would no longer update it in the input, but instead a new variable.
I ended up find my solution on Lirewire's forum and thought I would share if anyone else runs into the same issue as me:
After you set the value, you can do something like:
var element = document.getElementById('description');
element.dispatchEvent(new Event('input'));
This should trigger the input event on the field and cause livewire to communicate to your backend.
Related
I have a little challenge when testing a website. Just wanted to see if you folks have any suggestions on this. The story behind this is that I need to mask the input fields for the screenshots when the test has been executed as we are sharing the data with other teams. Before the script I am running JS with 'document***.type="password";', but when script starts to type, then input type is changed back to the type of text. Also, class changes from class="is-invalid" to class="is-focused is-invalid" when it's active. Also, I could of course change the type after I have typed the value, but even tho when I click the next field, the class changes. When I have filled the first input field it checks the data against the server and the class is of course changed.
I have an input field when inactive:
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-invalid">
And the input field when active"
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-focused is-invalid">
Any suggestions from a fellow testers, how could I fix this? Thanks a lot in advance!
As pretty much evident from the HTML the <input> field whenever recieves the focus_ the classname is-focused added.
This addition of classname is pretty much controled through the attributes, presumably the css_properties of the parent elements.
As as conclusion, it would be difficult to mask the password field characters from the clientside and have to be controled from the Application Server side.
In Firefox, at least, native HTML5 input element validity, e.g. a required text field, shows up as a red border, but only after interaction.
e.g. in the example below, I initially see two input boxes. If I type something in one of them, delete it and press Tab, the first one now glows red to show me it's invalid (because it's required).
Using Javascript, how can I reset the form to the pristine initial state, where the red border is not showing?
<form action='#'>
<div>
<input required name="a" type="text" />
<input required name="b" />
</div>
</form>
The only reliable way I've found is to reset the form, either via a <button type="reset"> or through form.reset().
Note, however, that this will wipe the values of any and all fields in the form, so if you need these to remain you'll need to repopulate their values after the reset is done.
Setting <form novalidate> will work, however subsequently removing the novalidate attribute will make the field(s) show errors again.
I want to validate the inputs from a form in vuejs, and when the data is pre-populated I want the inputs to convert to readonly.
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false">
the problem with this now is that always that i writed on the input if the value is higher than 0 the input is readonly and i dont want that.. how can do that with vuejs 2?.. thank you.
What you are trying achieve can be done easily using v-once directive
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false" v-once>
As mentioned in docs
You can also perform one-time interpolations that do not update on
data change by using the v-once directive, but keep in mind this will
also affect any other bindings on the same node
v-once will let you set readonly for the inputs having pre populated data, and not readonly for the inputs which are not pre populated. This thing will happen only once so next time you write on the input it will won't affect the readonly anymore.
Let's consider the two following line:
mydomain.com?quantity=10
<input type="text" name="quantity" size="1" value="1" />
Is there any way for me to automatically change the value of "quantity" in the URL when a new value is typed by the user (by using the input) ?
Submitting the element value in a form automatically updates the URL with the current value for quantity. If you use the onchange event to trigger submit, the URL will not change until the user clicks outside the input:
<form>
<input type="text" name="quantity" size="1" value="1"
onchange="this.form.submit()" />
</form>
Variations of this could look at keyboard events whilst focus is still with the input element. It remains to be seen if reloading the page would be user friendly and it is not clear if this is indeed what you wish to happen. If you don't want to reload the page see the comment and link from #igwan regarding using the history api (check on MDN for browser support).
No. All javascript code affect only the document part of the browser. It can send you to another page where the quantity can be changed though.
I want to disable an input field, but when I submit the form it should still pass the value.
Use case: I am trying to get latitude and longitude from Google Maps and wanna display it, but I don't want the user to edit it.
Is this possible?
I wanna Disable an Input Field on a
form and when i submit the form the
values from the disabled form is not
submitted.
Use Case: i am trying to get Lat Lng
from Google Map and wanna Display it..
but dont want the user to edit it.
You can use the readonly property in your input field
<input type="text" readonly="readonly" />
I know this is old but I just ran into this problem and none of the answers are suitable. nickf's solution works but it requires javascript. The best way is to disable the field and still pass the value is to use a hidden input field to pass the value to the form. For example,
<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />
This way the value is passed but the user sees the greyed out field. The readonly attribute does not gray it out.
you can also use the Readonly attribute: the input is not gonna be grayed but it won't be editable
<input type="text" name="lat" value="22.2222" readonly="readonly" />
Input elements have a property called disabled. When the form submits, just run some code like this:
var myInput = document.getElementById('myInput');
myInput.disabled = true;