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>
Related
I have a form with some inputs that are filled from the result of an AJAX request. When I submit the form I get only null on the back-end. I tried to submit the values without editing it and it works
this is my java script code
editPayment = function() {
if ($('#entrytransId').val() != '') {
if ($('#entryReceiptTypesselect').val() == "1") {
$.ajax({
type: "GET",
url: "#Url.Action("GetInvoiceNumber", "Payment")",
data: {transId: $('#entrytransId').val()},
success: function(response) {
if (response.invNo == 0) {
window.location.reload();
} else {
$('#reciptNo').val(response.invNo);
$('#enteryAmt').val(response.Amt);
$('#entrytransId').attr("disabled", "true");
$('#enteryhide').show(500);
}
},
error: function(reponse) {
window.location.reload();
}
});
}
}
This is Exactly My HTML Form with inputs I have tried more times and its failures
but when I deleted the javascript function and fill the data manually its works
<form action="/Payment/EditPayment" id="MF" method="post">
<div class="row">
<div class="col-md-2">
<label class="form-control">Receipt Type</label>
</div>
<div class="col-md-8">
<select class="form-control" id="entryReceiptTypesselect"
name="entryReceiptTypes" required="true"><option value="">-Choose</option>
<option value="1">MoF</option>
<option value="2">Zakah</option>
<option value="3">Tax</option>
<option value="4">Other Taxs</option>
<option value="5">M & S</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">Trans Id</label>
</div>
<div class="col-md-3">
<input required="" type="number" class="form-control" id="entrytransId" name="entrytransId">
</div>
<div class="col-md-2" hidden="" id="btnHidden">
<button type="button" class="btn btn-primary legitRipple" onclick="editPayment()">check</button>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-2">
<label class="form-control" id="lblinvoice">reciptNo</label>
</div>
<div class="col-md-4">
<input required="" type="number" name="reciptNo" class="form-control" id="reciptNo">
</div>
</div>
<div class="row" hidden="" id="enteryhide">
<div class="col-md-2">
<label class="form-control">enteryAmt</label>
</div>
<div class="col-md-4">
<input required="" type="number" value="0" name="enteryAmt" class="form-control" id="enteryAmt">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">E15 userName</label>
</div>
<div class="col-md-8">
<input required="" type="text" class="form-control" id="userName" name="userName">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">password</label>
</div>
<div class="col-md-8">
<input required="" type="password" class="form-control" id="password" name="password">
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<input type="submit" value="submit" class="btn btn-block btn-success legitRipple" id="enterysubmit">
</div>
</div>
</form>
The issue is not with setting the values via javascript/jquery, but specifically with setting the inputs to disabled.
$('#entrytransId').attr("disabled", "true");
when an input is set to disabled, it is not included (it is excluded) from the form's POST, so will appear as null in the server-side code.
You can:
- not set them to disabled (will affect your UX)
- enable them just before POST (icky)
- use hidden fields
MVC does this for checkboxes, so you can copy that idea here:
<input type='text' name='entryid' />
<input type='hidden' name='entryid' />
POST uses the input's name field, not its id, so it's ok to have multiple inputs with the same name.
POST will then use the first input that is not disabled (so don't put the hidden one first...)
Then just update the jquery to apply the value to both inputs (if you also want it shown in the UI) rather than by id, eg:
$("name[entryid]").each(function() { $(this).val(newvalue); });
(other ways to set this may be better, not checked if .val() will apply to all, likely only applies to the first)
The proplem was on $('#entrytransId').attr("disabled", "true");
i have another function onselectChange() is disabled all inputs , i tried $('#entrytransId').attr("disabled", "true"); and its works well
I have few input fields and some static text. I need that to be printed but can not get it to work. Can you please help me?
<div class="modal-body" id="printable-consent">
<div class="row">
<div class="col-md-6">
<label for="patient-surname-consent">Patient’s surname/family name : </label>
<div class="form-group">
<input type="text" id="patient-surname-consent" onkeyup="printDiv()" name="patient-surname-consent" value="" class="form-control">
</div>
</div>
<div class="col-md-6">
<label for="patient-firstname-consent">First name: </label>
<div class="form-group">
<input type="text" id="patient-firstname-consent" onkeyup="printDiv()" name="patient-firstname-consent" value="" class="form-control">
</div>
</div>
</div>
I want to type text in the modal box and that to be print (sent to printer). Can you help me?
Thanks!
You can access it using JavaScript and the "value" property of the element.
For example,
var myPatientFirstName = document.querySelector("#patient-firstname-consent").value;
console.log(myPatientFirstName);
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 am a new programmer and I have a little question. This is a part of my code:
<script type="text/html" id="experienceTmpl">
<li class="clearfix">
<div class="page-header no-border holder">
<a class="btn btn-icon-toggle btn-accent btn-delete stick-top-right"><span class="md md-delete"></span></a>
<h4 class="text-accent">Food Items
<%=index%>
</h4>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" id="experience-company-<%=index%>" placeholder="Food Item" name="experience-company-<%=index%>">
<label for="experience-company-<%=index%>"></label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" id="experience-functiontitle-<%=index%>" placeholder="Price" name="experience-functiontitle-<%=index%>" data-rule-number="true">
<label for="experience-functiontitle-<%=index%>"></label>
<p class="help-block">Digits only</p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select id="select1-<%=index%>" name="select1-<%=index%>" class="form-control" placeholder="Select" required>
<option value="Full Plate">Full Plate</option>
<option value="Half Plate">Half Plate</option>
<option value="Quarter Plate">Quarter Plate</option>
</select>
<label for="select1-<%=index%>"></label>
</div>
</div>
</div>
<div class="form-group">
<input type="text" multiple name="cuisine" class="tagsInput" value="Afghani,Mughlai" data-url="cuisine.json" data-user-option-allowed="true" data-load-once="true" required />
</div>
</li>
</script>
My question is how can I add this script in this html template so the class in input tag call this script:
<script type="text/javascript">
$('.tagsInput').fastselect();
</script>
Is this Possible to call this script in the html template please provide the solution I'm totally blank.
I think best way to do this is, when rendering particular script/html template dynamically add javascript to DOM.
Detail:
In application level you know which template is going to rend in the page. make separate JS files for each template id's and inject active template related javascript file to DOM.
Note:
This is like you are going to create template engine. Best way to use existing template engine such as Handlebars,JADE,Underscore. it will save your development time and reduced bugs.
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);
}