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()
},
},
}
Related
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>
Hi i'm new to JS and could use some help.
So I am basically trying to send some text from a textarea to a function called inputFromText on a submit button click event, but somehow the function is being triggered before the click (when opening the html window via electron) and nothing happens when you click the button afterwards.
How do I prevent this from happening?
<body>
<form>
<div class="form-group">
<textarea class="form-control" rows="5" id="txa_trainingText"></textarea>
<button type="submit" class="btn btn-default" id="btn_submit">Submit</button>
</div>
</form>
<script>
const trainingText = document.getElementById("txa_trainingText").value;
document.getElementById("btn_submit").addEventListener("click", inputFromText(trainingText));
function inputFromText(text) {
...
}
</script>
</body>
I found out that when using a function without the text argument one could solve the problem by writing:
function inputFromText(e) {
e.preventDefault();
...
}
I believe you need to wrap the click event handler as a function, so line would read:
document.getElementById("btn_submit").addEventListener("click", function() { inputFromText(trainingText)});
Just change the button type="submit" to button type="button"
<button type="button" class="btn btn-default" id="btn_submit">Submit</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>
This question already has answers here:
jQuery trigger click - no button value in request
(3 answers)
Closed 6 years ago.
A view is having more than one button as
<div class="row">
<div class="col-md-3">
#if(Model.Q>1)
{
#Html.ActionLink("Previous","Perform","Test",new{q=Model.Q-1},new{#class="btn btn-success",id="test-previous-btn"})
}
<input type="submit" value="Next" class="btn btn btn-success" id="test-next-btn" />
</div>
<div class="col-md-3">
<input type="button" data-confirm="Are you sure that you want to submit?" value="Submit" class="btn btn btn-primary" id="test-submit-btn" />
<input type="button" value="Cancel" class="btn btn-danger" id="test-cancel-btn" />
</div>
I want a confirmation from the user for the submit button, So I use following javascript function
$('#test-submit-btn').click(function(event){
var result=confirm("Are you sure! You want to submit?");
if(!result)
{
event.preventDefault();
return false;
}
});
It does not prevent submission to occur, irrespective of what was users response. However, If i remove other buttons, it functions as expected.
Your solution please!
e does not exist in your click event function. You would need to change it to
event.preventDefault();
Edit:
The Bearded Llama is correct. You will need to prevent the default action in the beginning of the click event, otherwise it will submit the form. You will need to do something like this:
$('#test-submit-btn').click(function(event){
event.preventDefault();
var result=confirm("Are you sure! You want to submit?");
if(result)
{
// this is assuming that the first form found is the one
// you want to submit, otherwise you will need to use the
// selector for the form: $("#my-form").submit();
$(this).parents("form").submit();
}
});
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>