I am trying to disable or enable a button when the value of a variable changes. ng-disabled is viewing the change of the value but is not disabling the button if it is enabled.
Html:
<form name="myForm">
<input ng-pattern="onlyNumbers" ng-model="value" name="number" />
Valid? {{myForm.number.$valid}}
<button ng-disabled="{{!myForm.number.$valid}}"> Hello </button>
</form>
Js:
$scope.onlyNumbers = /^\d+$/;
You don't have to use interpolation({{}}) inside ng-disabled:
<button ng-disabled="!myForm.number.$valid"> Hello </button>
Remove the brackets within ng-disabled:
<button ng-disabled="!myForm.number.$valid"> Hello </button>
Try this:
<form name="myForm">
<input ng-pattern="onlyNumbers" ng-model="value" name="number" />
Valid? {{myForm.number.$valid}}
<button ng-disabled="myForm.number.$invalid"> Hello </button>
</form>
Related
This question already has answers here:
Bypass HTML "required" attribute when submitting [duplicate]
(4 answers)
Closed 2 years ago.
how can you submit a form by bypassing the required attribute using button 2
like i have button 2 and button 1
i want to submit form by clicking button 2 and bypass required attribute
and both buttons must have type=submit
<form method="POST">
<input name="try" required>
<button type="submit">button 1</button>
<button type="submit">button 2</button>
</form>
You can use formnovalidate
<form method="POST">
<input name="try" required>
<button type="submit">button 1</button>
<button type="submit" formnovalidate>button 2</button>
</form>
Using some simple Javascript should allow you to use button two but ignore the required attribute assigned to the text field.
document.querySelectorAll('button')[1].addEventListener('click',function(e){
e.preventDefault();
this.parentNode.try.required=false;
this.parentNode.submit();
})
<h2>submit test</h2>
<form method="POST">
<input type="text" name="try" required />
<button type="submit">button 1</button>
<button type="submit">button 2</button>
</form>
Try
<form method="POST">
<input name="try" required>
<button type="submit">button 1</button>
<button type="submit" value="ignore" >button 2</button>
</form>
I tried with code like
<form>
Date: <input type="date" id="availableDate"/>
<input type="button" value="Run" id="button1">
</form>
It showed up
How can I edit that code to have space between date picker and button like
if you are trying to add space of few pixels then you can use margin property.
<form>
Date: <input type="date" id="availableDate"/>
<input type="button" value="Run" id="button1" style="margin-left: 24px">
</form>
I have a question about something that I can not explain, so I give an example what my output needs to be.
This is my script,
function myfunction(e) {
var value = document.getElementById("value").value;
alert(value);
}
<div class="test">
<input id="value" type="text" name="" value="banana">
<button id="button" type="button" name="button" onclick="myfunction()">Button</button>
</div>
<div class="test">
<input id="value" type="text" name="" value="apple">
<button id="button" type="button" name="button" onclick="myfunction()">Button</button>
</div>
As you can see only the input value is different. If I run the script now and I click the div where apple is my value is banana. But i need to have it if I click on div banana it alert "banana" if I click apple it alert "apple". How can I do this It need to go trought 1 button click not on a div click. It is really hard to explane so if you have any questions please let me know.
First of all never use an id twice.
The code below alerts the value from the input, that is a sibling element of the button, from which the function is called.
function myfunction(e) {
var input = e.parentNode.getElementsByTagName("input")[0]; //or whatever selector you need
var value = input.value;
console.log(value);
}
<div class="test">
<input type="text" name="" value="banana">
<button type="button" name="button" onclick="myfunction(this)">Button</button>
</div>
<div class="test">
<input type="text" name="" value="apple">
<button type="button" name="button" onclick="myfunction(this)">Button</button>
</div>
I'm using jquery form validation from http://www.runningcoder.org/jqueryvalidation/
demo.html
<form id="form-signup_v1" name="form-signup_v1" method="get" class="validation-form-container">
<div class="field">
<label for="signup_v1-username">First Name</label>
<div class="ui left labeled input">
<input id="first_name" name="first_name" type="text">
<div class="ui corner label">
<i class="asterisk icon">*</i>
</div>
</div>
</div>
<input name="ok" id="ok" type="submit" class="ui blue submit button" value="Ok">
<input name="cancel" id="cancel" type="submit" class="ui blue submit button" value="Cancel">
</form>
<script>
$('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
}
}
});
</script>
I'm use form validation in the url not include the value of submit button
demo.html?first_name=John
I try to remove jquery form validation in the url include the value of submit button
demo.html?first_name=John&ok=OK
I want to check submit button when click from query string but when i use validation the url alway not include query string of button like the figure 1
If you want that the query doesn't include the button name just remove the name attribute from <input type = "button" name="ok">. Also assign a value to the button. By default the submit action forms the query string from the name value pairs in the form.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="get">
<input name="first_name" type="text" />
<input type="submit" value="button">
</form>
I have an HTML page with form block
<div>
<form>
<div class="row">
...
<input required> a </input>
...
<div>
<div class="row">
...
<input required> b </input>
...
<div>
<div>
<button ng-click="expand()"> Expand </button>
<button type="submit" ng-submit="create()"> Start </button>
</div>
</form>
</div>
When I click on start, and a or b are empties, message is shown: "Please fill out this field" (which it is the desire behavior) . But when I fill out this field, and click again, create() is not submitted and I get the following error: An invalid form control with name='' is not focusable.
I try also in this way:
<div>
<form ng-submit="create()">
<div class="row">
...
</div>
<div>
<button ng-click="expand()"> Expand </button>
<button type="submit"> Start </button>
</div>
</form>
</div>
But then even if I click on Expand, create() is executed instead of expand().
I also try yo change ng-submit to ng-click, but then it doesn't validate that the fields is fill out.
My purpose is that create() will NOT be executed if one of the fields is empty, and proper message will be shown.
Try this:
<div>
<form ng-submit="submit()">
<div class="row">
<input required type="text" ng-model="text" name="text_a">A</input>
</div>
<div class="row">
<input required type="text" ng-model="text" name="text_b">B</input>
</div>
<div>
<button ng-click="expand()"> Expand </button>
<input type="submit" id="submit" value="Create" />
</div>
</form>
</div>
The simple way to do form validation is like this:
Give your form a name attribute
<form name="myForm">
Add the required attribute to your inputs.
Disable your button with
<button ng-disable="myForm.$invalid" ng-click="create()">Submit</button>
If one of your inputs is invalid you can likewise display a message with a span or div that has the ng-show="myForm.$invalid" attribute.
I'm not clear on exactly what you are doing with the data from the inputs.