I HAVE A FORM BUT NG SBMIT DOESNOT CALL THE FUNCTION
I dont understand why this form not submitting . i have check every thing but it not even call the alert button also
HTML
<form role="form" name="frmCashback" method="post" ng-submit="CashbackUser(frmCashback, Rates)">
<!-- Personal Details Start -->
<div class="well">
<legend> Cashback Details </legend>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Store">Store:</label>
<select name="Store" class="form-control" ng-model="Rates.Store" ng-options="stores.StoreID as stores.StoreName for stores in StoreList" >
<option value="">Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Store">Category:</label>
<select name="Category" class="form-control" ng-model="Rates.Category" ng-options="Cate.CategoryID as Cate.CategoryName for Cate in CategoryList" >
<option value="">Select</option>
</select>
</div>
<!-- Modal -->
<!---------Model End-------->
</div>
<div class="col-md-4">
<div class="form-group">
<label for="usr">Cash Back Rate:</label>
<input type="text" class="form-control" name="Cashback" id="Cashback" ng-model="Rates.Cashback" required>
</div>
</div>
</div>
<!---------Model End-------->
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" type="submit">Add Cashback</button>
</div>
</div>
</div>
<!-- Personal Details End -->
</form>
Here is my controller
CONTROLLER
$scope.CashbackUser = function(frm, Rates) {
alert('Hi');
//query_params.Status = CheckStatus.Action;
//console.log(Rates);
}
I have check :
function is within the controller
I am figthing with this for 4 hr kindly help me.
Your template seems to be having error ,form submit will not work if your template having error think so
<!---------Model End-------->
</div>
</div>
In your form, you can use this:
ng-submit="CashbackUser()"
And in your controller:
$scope.CashbackUser = function(){
console.log($scope.frmCashback);
console.log($scope.Rates);
}
Related
Trying to collect all the HTML data from my form, then to store it as an object and then send it using ajax request. Any ideas, please? Appreciate some help. I was trying with serialize's jquery, but read this in that way cannot be sent (to an API URL, no PHP) using ajax(post).
<form class="form" action="" method="" id="createProposal">
<div class="form-group">
<label class="col-md-12 control-label" for="asset-drop">Asset</label>
<div class="col-md-12">
<select id="asset-drop" name="asset-drop" class="form-control" >
<option value="1"> {{ this.assets[0] ? this.assets[0].name : '' }} </option>
<option value="2">{{ this.assets[1] ? this.assets[1].name : '' }}</option>
<option value="3">{{ this.assets[2] ? this.assets[2].name : '' }}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="amount-invest">Amount</label>
<div class="col-md-12">
<input id="amount-invest" name="amount-invest" type="text" placeholder="Currency" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="description-input">Description</label>
<div class="col-md-12">
<textarea class="form-control" id="description-input" name="description-input"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancel" v-on:click="hideCreatePropolsal">Cancel</button>
<button type="submit" class="btn btn-primary create" v-on:click="formDataCreation">Create</button>
</div>
</form>
i suggest to create an object in your data section which you call proposal and bind your form to that object using v-model, i'm using single file component but it doesn't matter, you can fit that solution to your case :
<template>
<form class="form" action="" method="" id="createProposal">
<div class="form-group">
<label class="col-md-12 control-label" for="asset-drop">Asset</label>
<div class="col-md-12">
<select id="asset-drop" name="asset-drop" class="form-control" v-model="proposal.selectedAsset" >
<option :value="index" :key="index" v-for="(asset,index) in proposal.assets">{{asset}} </option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="amount-invest">Amount</label>
<div class="col-md-12">
<input id="amount-invest" v-model="proposal.amount" name="amount-invest" type="text" placeholder="Currency" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="description-input">Description</label>
<div class="col-md-12">
<textarea class="form-control" v-model="proposal.description" id="description-input" name="description-input"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancel" v-on:click="hideCreatePropolsal">Cancel</button>
<button type="submit" class="btn btn-primary create" v-on:click="formDataCreation">Create</button>
</div>
</form>
</template>
<script>
export default {
data(){
return{
proposal:{
assets:[],
selectedAsset:'',
amount:'',
description:''
}
}
},
methods:{
hideCreatePropolsal(){
},
formDataCreation(){
/* $.ajax({
url: "yourUrl",
type: "POST",
data:this.proposal,
success: function (response) {
}});*/
}
}
};
</script>
<style>
</style>
you could check the whole code
I have created dynamic forms with ng-repeat directive. I am getting form field according to userid value. Once I have filled every field in form my add user button should be enabled. As of now its not enabled. I have attached my code below.
My html code:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="myid in userid">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="manualComment" id="textarea1" rows="1"></textarea>
</div>
<div class="col-md-3 ">
<label>Gender</label>
<select ng-model="gender" name="select2">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="!(myid && manualComment && gender)" type="button" id="adduser">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>
my app.js file
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.userid = [1, 2, 3]
});
How can I enable add user button once all field are filled?
Update:
If you want to convert your initial array from the server to a usage array check this fiddle
JSFiddle Demo
If you want an object which contains all the form values, please refer to the below fiddle!
JSFiddle Demo
Based on the statement below, this is my solution.
How can I enable add user button once all field are filled?
I have added the required attribute to all the input fields, the form name userForm is a variable in the scope. It has its validation variables, in my case I am using userForm.$invalid which will be true unless all the fields with required attribute are filled. The Add User is disabled by using the ng-disabled attribute, check the below JSFiddle for a demo.
JSFiddle Demo
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="myid in userid">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="manualComment" id="textarea1" rows="1" required></textarea>
</div>
<div class="col-md-3 ">
<label>Gender</label>
<select ng-model="gender" name="select2" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>
</div>
i have a rather dumb issue but still, can not figure the way around it...The concept is to have a select value which prompts the user to select a subject. Upon selection i need to store that subject id in every form that i am using below in so i can retrieve that subject, and i dont want to use different select for every single form that i need. here is the code below:
<div class="input-field col s12">
<select>
<c:forEach var="subjectItem" items="${subjectList }">
<option value="${subjectItem.id }">${subjectItem.subjectName }</option>
</c:forEach>
</select> <label>For subject</label>
</div>
......
.....
<form method="POST" action="subject-add-school-deadline"
id="deadlineSchoolForm">
----! Here is should retrieve that data from select !-------
<div class="row">
<div class="input-field col s6">
<input id="schoolD_title" type="text" class="validate"
name="title""> <label
for="schoolD_title">Title</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 l12 ">
<textarea id="schoolD_desc" name="description"
class="materialize-textarea validate" form="deadlineSchoolForm"></textarea>
<label for="schoolD_desc">Description</label>
</div>
</div>
<div class="row">
<label class="col s2">Deadline date</label> <input type="date"
class="datepicker col s4" name="date">
</div>
<div class="row right-align">
<button class="waves-effect waves-teal btn-flat" type="submit"
name="action" >
Add <i class="material-icons right">input</i>
</button>
</div>
</form>
----MORE FORMS BELOW ------
.....
.....
Note that i do not need something like
<select form="form1>
because i need that select value for multiple forms. Any help would be greatly appreciated. Thanks!!
I used jQuery to set the value in all inputs named title. Would this solve your problem?
JS Fiddle
The important part:
<script type="application/javascript">
$("select#foo").change(function() {
$("input[name='title']").val($("select#foo").val());
});
</script>
i have a case here. when clicked on button i want the class to be change for example if the button is clicked i want hide-tab to be removed and at the same time i want to add show-tab class this is my jquery code please help me with it
$(document).ready(function() {
$('#button').on('click', function() {
$('.form-group').removeClass('hide-tab');
$(this).addClass('show-tab');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-container">
<form class="fs-form fs-form-full">
<div class="form-group">
<label class="field">What is your name?</label>
<input type="text" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What is your mobile number?</label>
<input type="text" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What is your email address?</label>
<input type="email" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What type of event do you want us to organize?</label>
<select class="form-control">
<option>Dance Events</option>
<option>Birthday Events</option>
<option>Family Gathering Events</option>
<option>Marathon Events</option>
<option>Awards Ceremony</option>
<option>Art Competition</option>
</select>
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">Breif your thoughts</label>
<textarea class="form-control"></textarea>
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">Schdule Meeting</label>
<input type="date" class="form-control">
<div class="border"></div>
</div>
<div class="form_group">
<button type="submit" class="btn btn-primary" id="button">Continue</button>
</div>
</form>
</div>
Since your button type is submit.So changes happen but at-once form is processed and everything is reloaded. That's why you are unable to see the changes.
Use preventDefault() like below:-
$(document).ready(function() {
$('#button').on('click', function(e) {
e.preventDefault();
$('.form-group').removeClass('hide-tab'); // remove hide-tab class from all elements having form-group class
$(this).addClass('show-tab'); // this will add class to the button only not to others
});
});
I have a regular bootstrap-modal in HTML. I'm trying to show/hide it with javascript and i get undefined function.
I'm doing as the bootstrap documentation says, still i get undefined function on this row:
$("#registermodal").modal('show');
This is my HTML modal:
<div class="modal fade" id="registermodal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="registerDevice">Klargjøring</h4>
</div>
<div class="modal-body">
<div id="registerContent" class="form-group">
<form class="form-horizontal">
<div class="form-group">
<label for="Enhetsnavn" class="col-lg-4 control-label">UUID</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="uuid" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleID1" class="col-lg-4 control-label">Apple-ID #1</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleID1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleIDPassword1" class="col-lg-4 control-label">Apple-ID Password #1</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleIDPassword1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleID2" class="col-lg-4 control-label">Apple-ID #2</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleID2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleIDPassword2" class="col-lg-4 control-label">Apple-ID Password #2</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleIDPassword2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="SIMpin" class="col-lg-4 control-label">SIM-PIN</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="SIMpin" placeholder="">
</div>
</div>
<div class="form-group">
<label for="losekod" class="col-lg-4 control-label">Låsekod</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="losekod" placeholder="">
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Lokation</label>
<div class="col-lg-10">
<select size="6" class="form-control" id="lokationSelect">
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
</select>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal" onclick="performKlargjoring()">Klargjøring</button>
</div>
</div>
</div>
</div>
One reason you may receive an undefined function would be if you have defined the jquery library more than once.
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<div class="modal fade" id="registermodal" aria-hidden="true">
...
...
</div>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
The bootstrap library gets applied to the first jquery library but when you reload the jquery library, the original bootstrap load is lost (Modal function is in bootstrap).
One common cause of this issue is when including partial blocks of code within a web app as the same javascript file reference could appear in a complete page output in more than one location.
This is especially dangerous when your js definitions are scattered throughout your page ie, in the head, at the top of the body and at the bottom of the body (in a partial template).
I solved my problem changing
$(id).modal("show")
to
jQuery(id).modal("show").
Add following script tag before declaring your own js file. This will solve the error.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
EDIT: I added an on click to hide : DEMO2
DEMO
It is not giving the undefined function like you say. I suggest wrapping your $("#registermodal").modal('show');
in a $(document).ready(function(){});
If that doesn't work (or if you already did that) I suggest adding your js script (or link) right before your </body>
Last case scenario, make sure you have bootstrap.min.js and jquery on your HTML page.
Try:
$("#registermodal").modal();