I have an <input>, showing a number. I used ng-model to bind this number to a variable. My problem is that I don't want the variable to change simply on input, I want it to change on button click, but I also want a default value shown in the input to be the one that's stored in the variable.
To make it slightly clearer:
<input type="number" ng-model="foo">
<button ng-click="updateFoo()">Update foo</button>
{{foo}}
I want foo to reflect changes only when button is pressed, but if I refresh the page, {{foo}} will show some value (logic to retrieve the values exist).
The way I currently did it, in my AngularJS controller:
$scope.foo = 5;
$scope.updateFoo = function(num){
$scope.foo = num;
}
and HTML:
<input type="number" ng-model="not_in_controller">
<button ng-click="updateFoo(not_in_controller)">Update foo</button>
{{foo}}
This works as I want it to, but the input is empty by default.
Another thought was to use two variables, one is for presentation, another one is set after clicking the button
Simply use ng-init directive:
<input type="number" ng-model="not_in_controller" ng-init="not_in_controller=5">
<button ng-click="updateFoo(not_in_controller)">Update foo</button>
{{not_in_controller}}
Just use value="{{ foo }}" in your <input />
Here a jsfiddle: http://jsfiddle.net/5s3cjyuw/
Related
In my angular 4 project I have multiple forms, some of these forms have an input field that needs to be controlled, and if the value isn't correct the button save needs to be disabled.
If i want a input field with only positive numbers I use this:
<input type="number" class="form-control" id="blockFrom" required
[(ngModel)]="blockFrom" min="0" name="blockFrom">
<button (click)="save()" [disabled]="modelForm.form.invalid ||
modelForm.form.pristine">save</button>
But if I write in the input field negative numbers the button is enabled (I see the input field red correctly because the value isn't permitted)
Why?
How can I block the button if value is negative?
You can put a function directly here: [disabled]="checkIfValid()".
The function will then checks your form data.
it should look like this:
checkIfValid():boolean
{
return blockForm>0
}
<input type = 'submit' value = '1'>
^---Instead of the input type displaying '1', I would like for it to display 'first page'. Is that possible?
With <input type="submit"> or <input type="button">, it's not possible to separate the value that's sent from the label on the button. If you want to do that, you need to use <button>.
<button type="submit" value="1">First Page</button>
Use of the button tag for this purpose is a new information for me and thanks for sharing that.
Depending on your requirement you can use a hidden filed to hold your value which gets submitted when the form is submitted.
if you want to use it with JS then you can use another attribute to hold the value such as "title" or a custom one, eg:cusval
If your intention is to see if the particular submit button was click at the server side then you can check if the variable is available in the post data.
PHP eg: if( isset($_POST['submitbtn']) )
Just value="First Page". value will display whatever you want. It may be string or int.
I've read plenty of answers that use the value of submit type input, but my collection of input buttons need to all have the same text. Others use Javascript, and I'm trying to avoid that as well.
<input type="submit" value="Press This" name="submitButton" />
Doesn't work because they all need to be named 'Press This'.
<button type="submit" value="12" name="submitButton">Press This</button>
Doesn't work because it doesn't post the value.
Is there some way to make the <button> submit it's value or to change the text of the <input type="submit"> so they all say the same on the page while having different values? Or possibly even hiding the numeric value in the value attribute of the input element and then just removing the "Press This" before using the value?
Perhaps using <input type="image" value="12" /> with a image that says "Press This"?
Edit: Tried the <input type="image"> and it doesn't work. It'll submit the form, but it doesn't use the name attribute to go to the correct action on the controller.
Edit2: I should also add, the number of submit buttons is dynamic and thus I cannot give them all different names and then see which parameter in the controller had a value passed to it. Unless there is some way to do this for a unknown number of buttons...
your buttons should look like this:
<button name="button" value="12">Press This</button>
<button name="button" value="13">Press That</button>
then just get them in the action
public ActionResult MyAction(string button)
{
if (button == "12"){
//Do this
}
if (button == "13"){
//Do that
}
}
I have an HTML form that needs multiple submit buttons, like this:
<input type="submit" name="foo" value="1"/>
<input type="submit" name="foo" value="2"/>
<input type="submit" name="foo" value="3"/>
The problem is that I want it to display on the button something other than what is in the value attribute (in the example above: 1, 2, 3). For example, I want to show "Bar" for the button with value="1". Is this possible?
I've considered using the <button> tag, like this:
<button name="foo" value="1">Bar</button>
The problem with using <button> (from w3schools):
If you use the element in an HTML form, different browsers
may submit different values. Internet Explorer, prior version 9, will
submit the text between the and tags, while other
browsers will submit the content of the value attribute. Use the
element to create buttons in an HTML form.
Thoughts?
Give each of the buttons a unique name and then check for their existence in the POST vars instead. Then you can set the value to whatever you want.
Every button must have unique name so that you can set any value/values to one or more buttons. eg
<input type = "button" name = "foo1" value = "Bar1">
<input type = "button" name = "foo2" value = "Bar2">
<input type = "button" name = "foo3" value = "Bar3">
implement it..
I am using jstl with dropdown lists.
When i click submit button i success the specification but values int dropdownlists are reinitialized.
So I want to submit form without loosing the values already selected in the form because I need to stay always at the same level in the form.To be more clear, user choose a value from ddl and click edit button to show other options and fill them at the same form without loosing what he has selected.
I have tried to deal like that...
<form action="myjsp.jsp" method="post">
<input type="Submit" value="Edit">
...but it doesn't work.
Thank you for your help.
You need to preset the inputs with the request parameter values. You can access parameter values in EL by ${param.name}. Basically:
<input type="text" name="foo" value="${param.foo}">
Note that this is XSS sensitive. You always need to sanitize the user inputs. You can use the JSTL functions taglib for this.
<input type="text" name="foo" value="${fn:escapeXml(param.foo)}">
In case of dropdowns rendered by HTML <select> element, it's a bit trickier. You need to set the selected attribute of the HTML <option> element in question. You can make use of the ternary operator in EL to print the selected attribute whenever the option value matches the request parameter value.
Basic example:
<select name="foo">
<c:forEach items="${options}" var="option">
<option ${param.foo == option ? 'selected' : ''}>${option}</option>
</c:forEach>
</select>