All I want is one form which has two different buttons with different actions behind. I was wondering in every angular 2 component we can have only one onSubmit to call service. how can I have two? and how can I tell angular which buttons is associate to which service call.
when there is one button every thing is Ok but not with two buttons.
this is my onSubmit code:
onSubmit() {
this.service.generatePhone(this.data)
.subscribe(
() => {
this.success = true;
},
(error) => {
},
I want another onSubmit to call service.updatePhone.
and in my shortened html file:
<div class="form-signin">
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<p class="text-left">your phone number </p>
</div>
<button type="submit" >
generate
</button>
<br/>
</form>
</div>
I want another
<button type="submit" >update </button>
<button type="button" (click)="doSomething()">
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 have an HTML form that has its elements displayed in various Bootstrap modals. The first modal has a text box input that and a "Next" button to open the next modal. When the "next" button is pressed. I want to check if the text box is empty, and trigger a validation message. The form does not get submitted until the very end. Everything I've tried has not worked so far.
Javascript/jQuery code
$("#add_assistant_next").click(function () {
var textInput = document.getElementById('add_assistant_user');
var text = textInput.value;
if (text === "") {
textInput.setCustomValidity('Please fill out this field.');
textInput.checkValidity();
var form = $('#form_add_assistant');
form.find(':submit').click();
} else {
textInput.setCustomValidity('');
}
});
HTML
<form name="add_assistant" method="post" id="form_add_assistant">
<div class="modal-body">
<div class="step">
<span class="fas fa-arrow-right choose-arrow mr-1"></span>1. Choose a user to add
</div>
<div class="pl-3 pt-1">
<div>
<input type="text" id="add_assistant_user" name="add_assistant[user]" required="required" placeholder="UCInetID or UCI email address" class="mr-0 form-control" />
<button type="button" id="add_assistant_next" name="add_assistant[next]" data-toggle="modal" data-target="#add-user-modal" class="btn btn-outline-secondary btn">Look up user</button>
</div>
<input type="hidden" name="user_search_route" value="/courseSpace/20900/listAssistantEnrollment">
</div>
</div>
... form continues in other modals
Your JS code is probably fighting with Bootstrap for control of that button. To get around that, and have your validation, you could try modifying your code to have a middle step / temporary button to help with validation first before actually submitting. So something like this:
Javascript/jQuery code
$("#my_temp_button").click(function () {
var textInput = document.getElementById('add_assistant_user');
var text = textInput.value;
// Might also want to handle null and undefined cases?
if (text === "" || text === undefined || text === null) {
// I'm assuming if it's empty, it doesn't pass validation,
// so we just display this warning and wait for the user to fix it:
textInput.setCustomValidity('Please fill out this field.');
} else {
// it's not empty so validate:
if (textInput.checkValidity()) {
// it passed validation, so ok to submit.
// call the real button:
$('#add_assistant_next').click();
// do you need this?
var form = $('#form_add_assistant');
form.find(':submit').click();
} else {
// it failed validation, so display another error?
textInput.setCustomValidity('Try again.');
}
}
});
HTML:
<form name="add_assistant" method="post" id="form_add_assistant">
<div class="modal-body">
<div class="step">
<span class="fas fa-arrow-right choose-arrow mr-1"></span>1. Choose a user to add
</div>
<div class="pl-3 pt-1">
<div>
<input type="text" id="add_assistant_user" name="add_assistant[user]" required="required" placeholder="UCInetID or UCI email address" class="mr-0 form-control" />
<!-- Feel free to change the id name. This is the button the user sees. It's only purpose is to give your function above full control to it and prevent Bootstrap from touching it and jumping to the next modal without having the user fix the validation failure first: -->
<button type="button" id="my_temp_button" class="btn btn-outline-secondary btn">Look up user</button>
<!-- Hide the real button from the user: -->
<div style="display:none">
<button type="button" id="add_assistant_next" name="add_assistant[next]" data-toggle="modal" data-target="#add-user-modal" class="btn btn-outline-secondary btn">Look up user</button>
</div>
</div>
<input type="hidden" name="user_search_route" value="/courseSpace/20900/listAssistantEnrollment">
</div>
</div>
...
Have you tried adding a trap for the submit event itself?
$('#form_add_assistant').submit(function(evt){
//do your validation here
if (validation fails){
return false; // OR, alternatively, `evt.preventDefault()`
}
//form submission will continue if not returned false
});
References:
https://api.jquery.com/submit/
How to conduct manual form validation via jQuery .submit()
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>
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 3 buttons : ADD , SEARCH , IMPORT and there are three strut forms within the jsp each form performing add,search and import functions. When the add button is clicked only add form should be shown and when search button is clicked only search form should be displayed.All 3 forms should not be shown at once
How to link the buttons to the form actions
You should have to use jquery and ajax call to sumbit the form.
Suppose you have three Form A,B,C and intially a form is shown.
then you should have to use jquery show() and hide() function to show and hide the respective forms.
and you should have to use ajax call to submit you action to server.
i can provide you a code example.
$(document).ready(function(e) {
$(".showForm").click(function(e) {
var form_toshow = $(this).attr("data-form-toshow");
$("#fomr1").hide();
$("#fomr2").hide();
$("#fomr3").hide();
$("#" + form_toshow).show();
});
$("#fomr1form").submit(function(e) {
//make ajax call to sumit data
return false;
});
$("#fomr2form").submit(function(e) {
//make ajax call to sumit data
return false;
});
$("#fomr3form").submit(function(e) {
//make ajax call to sumit data
return false;
});
});
#fomr2,
#fomr3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnshowform1" data-form-toshow="fomr1" class="showForm">
show form 1
</button>
<button id="btnshowform2" data-form-toshow="fomr2" class="showForm">
show form 2
</button>
<button id="btnshowform3" data-form-toshow="fomr3" class="showForm">
show form 3
</button>
<br>
<br>
<div id="fomr1">
<form id="form1form">
form 1
<input type="text" name="form1text" id="form1text" />
<br>
<button id="sumitForm1">submit form1</button>
</form>
</div>
<div id="fomr2">
<form id="form2form">
form 2
<input type="text" name="form2text" id="form2text" />
<br>
<button id="sumitForm2">submit form2</button>
</form>
</div>
<div id="fomr3">
<form id="form3form">
form 3
<input type="text" name="form3text" id="form3text" />
<br>
<button id="sumitForm3">submit form3</button>
</form>
</div>