I have a button that opens an ngDialog.openConfirm. Within that dialog I have a form, which includes a textarea which is required and needs to be a minimum 20 characters.
Here is a simplified version of my code:
someFunction() {
let newScope = $scope.$new();
newScope.vm = vm;
ngDialog.openConfirm({
scope: newScope,
template: 'componentDescription.html'
})
}
And my html:
<form role="form" name="subForm">
<textarea name="compDesc"
required="true"
ng-minlength="20"
ng-model="vm.compDesc">
</textarea>
<button type="button" ng-click="confirm(0)">Submit</button>
<button type="button" ng-click="closeThisDialog(0)">Cancel</button>
</form>
I would like for the Dialog to only be submitted if the form is valid.
I tried to do this by creating a function in my controller , but that has trouble accessing the form/closing the dialog.
Any ideas?
UPDATE:
I've changed my html like so:
<form role="form" name="subForm" novalidate ng-submit="confirm(0)">
<textarea name="compDesc"
required="true"
ng-minlength="20"
ng-model="vm.compDesc">
</textarea>
<button type="submit">Submit</button>
<button type="button" ng-click="closeThisDialog(0)">Cancel</button>
</form>
This works on the first click, which brings up my error messages, but on the second click it submits the form even though it's invalid. Seems that whenever the error messages are displayed the submit button ignores the validation.
You can manually decide whether to call $scope.confirm() or not,
Pass validation then call $scope.confirm().
Not Pass validation, don't call $scope.confirm().
e.g.
Template:
<button type="button" ng-click="ok(0)">Submit</button>
Controller:
$scope.ok = function () {
if(!validationHasPassed()){
//errorMsg.push('xxx')
return false;
}
$scope.confirm();
};
Simply you can add ng-disabled option with your form name
<button type="button" ng-disabled="subForm.$invalid" ng-click="confirm(0)">Submit</button>
you can disable submit button if length of input string is less then 20
<button type="button" ng-disabled="vm.compDesc.length < 20" ng-click="confirm(0)">Submit</button>
you can also display an error message below text area so users can understand why submit button is not enabled
<form role="form" name="subForm">
<textarea name="compDesc"
required="true"
ng-minlength="20"
ng-model="vm.compDesc">
</textarea>
<p ng-show="vm.compDesc.length < 20" style="color:#cc5965">Description should be at least 20 characters</p>
<button type="button" ng-click="confirm(0)">Submit</button>
<button type="button" ng-click="closeThisDialog(0)">Cancel</button>
</form>
Related
I created a Vue form where there are two buttons. In my formSubmit() function i need to somehow find which button was used to submit the form. Here is what i tried:
<form #submit.prevent="formSubmit()">
<input type="text" class="form-control" v-model="name">
<input type="text" class="form-control" v-model="product">
<button class="btn btn-primary" v-model="buttonType" value="button1">BUTTON1</button>
<button class="btn btn-primary" v-model="buttonType" value="button2">BUTTON2</button>
</form>
And my function:
formSubmit(){
console.log(this.buttonType)
}
But once i click the button, i always get an undefined. Is there any other way to get the button used to submit the form? Any advice is appreciated.
You shouldn't really use v-model on a <button> element.
You can register separate event handlers for each button and call submit your form at the event of the respective event handlers.
<form #submit.prevent="onFormSubmit">
<button #click="onClickButton1">Button 1</button>
<button #click="onClickButton2">Button 2</button>
</form>
{
// ...
methods: {
onFormSubmit() {},
onClickButton1() {
// code for when button 1 is pressed
this.onFormSubmit()
},
onClickButton2() {
// code for when button 2 is pressed
this.onFormSubmit()
},
},
}
I am trying to reset the form to blank values in the input textboxes after the data filled in the textbox have been searched.
<form id="myForm" class="mt-5" asp-controller="Leave" asp-action="GetAllLeaves">
<div class="form group col-md-6">
<label>Employee </label>
<div class="col">
<input type="hidden" id="employeeId" name="employeeId" />
<input type="text" name="employeeName" id="employeeName" value="#ViewData["CurrentFilterE"]" />
</div>
</div>
<button type="submit" class="btn btn-outline-success">Search</button>
<button type="reset" id="reset" class="btn btn-outline-primary">Reset</button>
</form>
I have tried bunch of different javascripts but none of them work after the search has been completed. They work fine before the search button is clicked. I am aware that there are questions already asked about this here and I have tried those codes but they don't work for me.
These are the different codes that I have tried. They don't work after the search button has been hit. Even refreshing the page does not delete the data in the input boxes.
function myFunction() {
document.getElementById("myForm")[0].reset();
};
$("#reset").click(function () {
$(this).closest('form').find("input[type=text], textarea").val("");
});
document.getElementById("reset").onclick = () => {
document.getElementById("myForm").reset()
};
let inputs = document.querySelectorAll('input');
document.getElementById("reset").onclick = () => {
inputs.forEach(input => input.value ='');
}
in your post method you need to have an IactionResult return type method and then you need to pass property name to ModelState.Remove method, not the value.
Either pass the property name in string, eg. ModelState.Remove("PropertyName"); or in the newer .NET framework, you can use nameof() keyword, eg. ModelState.Remove(nameof(model.Property));
The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button. If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method. It does not reset other attributes in the input, such as disabled.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset.
Your default input value = "#ViewData["CurrentFilterE"]". Reset method restores a form element's default values.
This will help to reset the input:
html:
<form id="myForm">
<input type="text" name="employeeName" id="employeeName" value="test" />
<button id="reset" class="btn btn-outline-primary">Reset</button>
</form>
js:
document.getElementById("reset").onclick = function(e) {
document.getElementById("employeeName").value = "";
}
I ended up using the following
$("#reset").click(function () {
// this for normal <input> text box
$('#employeeName').attr("value", "");
//this for checkbox
document.getElementById('searchAprroved').removeAttribute('checked');
});
I have the following code:
<form id="buttonForm" action = "/goSomeWhere" method="post" >
<input type="submit" name="bnext" value="Next Page" >
<input type="submit" name="bprevious" value="Previous Page" >
</form>
When either one of this two buttons are submitted I receive "bnext" or "bprevious" values in Django View request.POST so I can further construct the logic that I need.
But when I'm trying to insert some javascript for the second button I loose those values:
<input type="submit" name="bnext" value="Next Page" >
<input type="submit" name="bprevious" id="bpid" onclick="disable()" value="Previous Page" >
function disable()
{
document.getElementById("bpid").disabled = true;
document.getElementById("buttonForm").submit();
}
There is a way to do this and still receiving input names values ?
Sorry I didn't fully understood that what you are trying to do
If you are trying to stop form submission then:
function disable() {
document.getElementById("bpid").disabled = true;
document.getElementById("buttonForm").preventDefault();
}
If you want that client should not click previous button again then, it is best to change inputType submit to hidden:
function disable() {
document.getElementById("bpid").type="hidden";
document.getElementById("buttonForm").submit();
}
Or
create new <input type=hidden>, set name values ,append to form and submit it:
function disable() {
document.getElementById("bpid"). disabled=true;
newip= document.createElement("input");
newip.type="hidden";
newip.name="bprevious";
newip.value="Previous Page";
document.getElementById("buttonForm").appendChild(newip);
document.getElementById("buttonForm").submit();
}
try to use button instead input like this
<button name="bprevious" id='bpid' onclick='disable()' value="Previous Page">Previous Page</button>
Let's say I have this HTML:
<div id="container"></div>
<p>Output: <span id="output"></span></p>
and this JS:
function otherAction(e) {
document.getElementById('output').innerHTML = 'otherAction';
e.preventDefault();
}
function submit(e) {
document.getElementById('output').innerHTML = 'submit';
e.preventDefault();
}
ReactDOM.render(
<form onSubmit={submit}>
<input type="text" defaultValue="foo" />
<button onClick={otherAction}>Other Action</button>
<button type="submit">Submit</button>
</form>,
document.getElementById('container')
);
Actually, let's not just say it, let's put it in a JSFiddle example. What I want to happen is that:
Clicking the "Other Action" button triggers the otherAction function (it does!)
Clicking the "Submit" button triggers the submit function (it does!)
Putting your cursor in the text box and pressing enter triggers the submit function (this does not work currently!)
In #3, what happens instead is that otherAction gets triggered. How can I change that?
If you set the first button to type="button" (i.e. provide a type for each button) it should work.
<button type="button" onClick={otherAction}>Other Action</button>
https://jsfiddle.net/L0urqamz/3/
You should provide types for all buttons, otherwise it won't work:
<form onSubmit={handleSubmit}>
// form content
<button type="button" onClick={someButtonEvent}>DO STH</button>
<button type="submit">SUBMIT</button>
</form>
I have this form, that is never submitted: it just triggers a calcularplazas() function when pressing a non-submit button:
<form name="what" id="what" action="">
<input id="mat" type="text"/>
<button id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>
<input id="btnLimpiar" class="btn" type="reset" value="CLEAR" />
<p id="resultado"></p>
</form>
When clicking on the button, function works properly but no result can be shown, as the window reloads. I do not understand this behaviour as there's nothing on the function making it reload, neither is a form submitting.
As consequence of this, the result text is exported to <p id="resultado"></p> but on miliseconds dissapears, as window reloads.
Why this behaviour?
function calcularplazas(){
var mensaje = "MENSAJE FINAL";
document.getElementById("resultado").innerHTML = mensaje;
}
You say "non-submit" button, but since you haven't given your <button> element a type attribute, it is a submit button by default. You need to tell the browser to treat it as a "normal" button:
<button type="button" id="btnEnviar" class="btn" onclick="calcularplazas();">SEND</button>
Clicking this will now not submit the form, and not cause the page to reload.
You can prevent submit event to be dispatched.
myForm.addEventListener('submit', function(e) {
e.preventDefault();
calcularplazas();
// do anything else you want
})
And HTML
<form id="myForm">
<input id="input1" type="text"/>
<button type="submit" id="myButton">SEND</button>
</form>
It will works for Return key to do as well
The button in the form, have you tried giving it type="button" ?
Because in a form it gets type="submit" by default (or the form behaves like it would with a submit type).
You Need to make only 2 changes and the code will run .
Put return false in the javascript function.
when you call the function on onclick function write return calcularplazas.
check the below code for for your reference.
function calcularplazas(){
var mensaje = "MENSAJE FINAL";
document.getElementById("resultado").innerHTML = mensaje;
return false;
}
<button id="btnEnviar" class="btn" onclick="return calcularplazas();">SEND</button>