I am putting a slider on my web form for users to enter how much they would like to rate a certain thing.
I am using Vue.js and I am not sure how to set up a v-model on this and how to get user's entered value.
<div v-else class="form-group">
<form action="">
<label for="formControlRange">Please drag the slider to decide how much you want to rate between 1 and 10</label>
<input type="range" class="form-control-range" id="formControlRange">
</form>
<div>
You just have to add the v-model attribute to your range input:
<input type="range" class="form-control-range" id="formControlRange" v-model="value">
And define value (however you want to name it) in your component.
...
data: {
value: 50 //initial value
}
Example: http://jsfiddle.net/q0Lmv196/
Related
I have an input with a prepend from Bootstrap, looks nice and modifiable. I know I can put another button on the other side, but can that button be a reset? I have tried multiple things. Here is what I know and I will attach pictures below.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Your calculation</span>
</div>
<input type="number" onkeypress="return isNumberKey(event)" onkeyup="return truncateDecimals(this, 2)" id="userInputMapOne" class="form-control" min="0" max="1000" step="0.01" aria-label="input value for your zone" value="e.g 12.34">
This is the current code I am using, it is NOT wrapped in a form. When I wrap it in a form things stop working for a strange reason. I am already having troubles with this, the min/max and step don't work (I have controlled min/max and step with JavaScript). So, is there a way to prepend (or append at the same time as a prepend) a second button onto that input and without being in a form and use that to clear the input field back to the default of ""?
It seemed like an easy job but this constantly interfered with the data being input. And for a weird reason, I can't seem to put a form just wrapping this input without upsetting the divs.
Note: While this would certainly work I think it would be in your bests
interests to review why a <form> is interfering with the
functionality of your code.
You cannot add a true <button type="reset">...</button> because you are not using a <form> and so the reset button doesn't know what to actually 'do'. You can quickly do something similar with just a few modifications of your existing code:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Your calculation</span>
</div>
<input type="number" id="calculation" onkeypress="return isNumberKey(event)" onkeyup="return truncateDecimals(this, 2)" id="userInputMapOne" class="form-control" min="0" max="1000" step="0.01" aria-label="input value for your zone" value="e.g 12.34">
<div class="input-group-append">
<button role="button" class="btn btn-secondary" onclick="document.getElementById('calculation').value = ''">Reset</button>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
First you need to add an ID to your input field so that you can easily target the field with a bit of JavaScript. Then you just need to add an .input-group-append to extend the input-group to include the new button we'll be adding.
The button operates just like any button would, with the exception that there is an onclick event:
document.getElementById('calculation').value = ''
This finds the field with an ID value of calculation and on a click event resets the value of that field to empty. It's not a reset in the true sense of how <button type="reset">...</button> would operate, but functionally it achieves the same result.
I have the following form with html
<h1>ng-dirty Test</h1>
<form [formGroup]="myForm">
<input required [(ngModel)]='myVar' formControlName="myVar" />
</form>
myForm.controls.myVar.dirty: {{myForm.controls.myVar.dirty}}
<br/>
my value 1
my value 2
my value 3
When I enter a value manually into the input field, I see ng-dirty is set as a class.
However, when I click the links to set the value, I do not see ng-dirty is changing.
https://plnkr.co/edit/C3Y4pE?p=preview
Does anyone know what the reason is?
I want to use a form to do parametric filtering by passing values to a URI. Specifically, part of this form would entail multiple checkboxes for one parameter set, I'll call this 'my-checkbox-parameter'
What I Have
A basic form with checkbox fields that post the values via the GET method
This does correctly post the values as I'd expect
My code:
<form id="results-filters" class="form-inline" action="form.php" method="GET">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" id="val3" value="val1" name="my-checkbox-parameter[]" class="form-control">
Value 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="val2" value="val2" name="my-checkbox-parameter[]" class="form-control">
Value 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="val3" value="val3" name="my-checkbox-parameter[]" class="form-control">
Value 3
</label>
</div>
<button type="submit" class="btn btn-default">
Filter Results
</button>
</form>
What I'm Stuck on
Making the checkbox fields reflect 'checked' status based on what parameters are in the URL. For instance, if my URI is: /form.php?my-checkbox-parameter[]=val1&my-checkbox-parameter[]=val2 , how can I make sure that the field values for 'Value 1' and 'Value 2' are checked? Is JavaScript/AJAX the only way to do this?
Bonus points, not a super huge priority, but rather a 'nice to have'... Is there a better way to handle checkbox value arrays in URIs? For instance, if I have 10 checkbox fields, the concatenated URI with these parameters might be quite long...
Thanks in advance!
First:
$checked= array();
$checked=$_GET['my-checkbox-parameter'];
And then:
<input type="checkbox" id="val1" value="val1" name="my-checkbox-parameter[]" class="form-control" <?php if(in_array("val1", $checked))echo "checked"; ?> >Value 1
So if there is val1 in your get parameters, the check box will be checked.
Do it for all check boxes and it should be ok.
AND for the second question: actually you are doing well with my-checkbox-parameter[ ], it's the usual way to do it in PHP. But you can check this question for more ways.
Assuming that i have the following data in my params
params:[input:[1, 2, 3]]
And i have the following form in my Grails app
<div class="block1">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input1" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
<div class="block2">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input2" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
<div class="block3">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input3" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
The form design above is correct, because in my form design, there will be several inputs of the same name (but each will be saved to the database under different primary keys) and it can be increases and decreases according to user selection.
Few questions using the above
How do i make it so that the value for input1 is params.input[0], input2 is params.input[1] and input3 is params.input[2] in the view? I can pass the model from controller without problem, but i couldn't distribute the value properly to each input on the form.
Is there any way to change the value ${input} dynamically? As in if i want to change the value to ${input[0]} or ${input[1]}
Can i automatically set the amount of block appended into the form using the g:each tag? Say like if from controller i want to set the rendering block amount to 3, so can i use the g:each tag to render the block 3 times in the form?
Thanks
The links are examples of how to use ajax/jquery to get values from a remote call and replace html element (divId) within a page - this divId could be the entire
<input type="text" name="input" value="newvalue"/>
upon triggering some form of call as above to get the new value.. in regards to
g:textField
yes it works like all other grails tags in the end they are transformed back to the correct HTML terminology...
The actual variable value is dynamic if you defined
<input name="existingvariable" value="${something}" ...
where something was a parameter from the given controller - and then you updated the call so
://YOURHOST:8080/yourapp/controller?existingvariable=newvalue
and refreshed or clicked this link which is what ajax would be doing for you doing a new call to either another controller to generate new values or same and passing new value to it and then grabbing data and pushing it back onto the divId ... (all in the background)
Groovy loading into divs
Grails - Select menu not rendering
I want my selects dropdowns to auto populate with Ajax in Grails website
The above are all related to using ajax to populate / update existing form elements
If you wish to update a live form with a new live value (non existant in DB) take a look at modaldynamix plugin. //github.com/vahidhedayati/modaldynamix
Building a CMS with node, mongoDB & angularjs. I have an edit form with inputs that I want to bind to the $scope so their values are populated with existing data. Ex:
<form ng-submit="editArticle(article._id, article)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-model="article.hed" value="{{article.hed}}" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-model="article.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
This appropriately fills in the input values with the current data from my mongo database. However, I would like to bind to a new form scope, so it doesn't try to pass in every value in the article scope, just the new scope within the form. (Article scope currently consists of every field in the article document in Mongo. If I pass all of this data in, I get an error about invalid schema because it is trying to pass in the __v field as well.)
So ideally I want to do this:
<form ng-submit="editArticle(article._id, form)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-model="form.hed" value="{{article.hed}}" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-model="form.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
So on submit, it only passes form.hed and form.dek to my database. However, now these input fields are blank because they're not bound to the original article data. The user would have to re-fill in each of the fields with the original values. Is there a way to bind to multiple models orrrr bind to a current model, but on submit only send the updated form data?
EDIT:
It looks like I have to add the ng-change attribute to each field, to populate the input fields with the original scope, then on change, set the form scope equal to the changed value. Eg.
<form ng-submit="editArticle(article._id, form)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-change(form.article = article.hed) ng-model="article.hed" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-change(form.dek = article.dek) ng-model="article.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
Not sure how thrilled I am about this solution, but it works. If anyone knows a more efficient way to accomplish this please let me know!
Do a copy of the original object (or part of it) upon receiving it from DB and bind your from to it.
Coping objects before edit is a very good pattern since it allows you to easily provide additional functionality like revert edits and disable save buttons if no edit was made.