I have asked a similar question, but have since made a lot of progress so I wanted to share it.
Basically, I have form elements which can be dragged and dropped - it makes use of clone. It allows me to create my own forms. The problem is, an output might be something like so
<form id="content">
<div data-type="text" class="form-group">
<label class="control-label col-sm-5" for="text_input">Text Input</label>
<div class="controls col-sm-7">
<input type="text" name="text_input" class="form-control" id="text_input">
</div>
</div>
<div data-type="text" class="form-group">
<label class="control-label col-sm-5" for="text_input">Text Input</label>
<div class="controls col-sm-7">
<input type="text" name="text_input" class="form-control" id="text_input">
</div>
</div>
<div data-type="textarea" class="form-group">
<label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label>
<div class="controls col-sm-7">
<textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea>
</div>
</div>
<div data-type="textarea" class="form-group">
<label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label>
<div class="controls col-sm-7">
<textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea>
</div>
</div>
<div data-type="date" class="form-group">
<label class="control-label col-sm-5" for="dateInput">Date Input:</label>
<div class="col-sm-3">
<input type="text" name="dateInput" class="form-control date_picker" id="dateInput">
</div>
</div>
<div data-type="date" class="form-group">
<label class="control-label col-sm-5" for="dateInput">Date Input:</label>
<div class="col-sm-3">
<input type="text" name="dateInput" class="form-control date_picker" id="dateInput">
</div>
</div>
<input type="submit" value="Save Template" id="templateSubmit" class="btn btn-primary">
</form>
The problem with this is that if I clone 2 form elements of the same type, they both have the same name and id like shown above. So I need to make sure that each cloned element has a unique name and id. At the moment, I have a partial solution.
I have created a fiddle here Fiddle If you click Save Template, you will see what happens. The id numbers seem very strange, for instance textareaInput222. Really, each element type should start at 0, and 1 be added to it for each additional element of the same type.
Would this be possible? The other thing I am struggling with is setting the elements labels for attribute to be the same as the name which is set for that element.
How can I achieve this?
Thanks
$("#content").find(".form-group").each(function() {
$("textarea").each(function(index, value) {
my friend, these two each is the reason. There are around 6 .form-group element, so that textarea#each ran 6 times. And regard to DRY, here I gave my version https://jsfiddle.net/yjaL2zgL/2/
I'd use underscore.js's unique id function personally, or your own implementation of it and suffix every id with a unique number on the page that increments like "dateInput-345". Even just using a counter variable that everything uses would be easy enough instead of basing it on indexes in loops.
http://underscorejs.org/#uniqueId
your own counter:
instead of using
(index + 1)
you can use something like
var uid = 0; //this needs to be where you declared your other vars
then when you need an id:
var new_id = $(value).attr("id") + '-' + uid++;
just make sure you arent copying an id that already has a number attached to it or you need to deal with that too.
Related
This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed 1 year ago.
I am getting the dynamic input id custom_field_42, and i need to get the form-group div to change display to block from none, how can i do that?
<div class="form-group row g-mb-5" style="display:none;">
<label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>
<div class="col-sm-10">
<input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
</div>
</div>
I have tried this, it doesn't work.
$('#custom_field_42').closest('.form-group').show()
Community edit...
Actually, this works:
$('#custom_field_42').closest('.form-group').show();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row g-mb-5" style="display:none;">
<label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>
<div class="col-sm-10">
<input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
</div>
</div>
You can use Element.closest to find the first parent element which matches a selector, which, in our case, is .row:
const input = custom_field_42;
input.closest('.row').style.display="block";
<div class="form-group row g-mb-5" style="display:none;">
<label for="custom_field_42" class="col-sm-2 col-form-label g-mb-10 text-right">insteructyor</label>
<div class="col-sm-10">
<input type="text" class="form-control u-form-control rounded-0 custom_field_input" id="custom_field_42" name="insteructyor" placeholder="insteructyor">
</div>
</div>
I am trying to send the parameters to control and I am struck in between and need help.
There are multiple types of question inside the ng-repeat i.e 'question' and I am iterating these. The problem is when there are two question with same question type. When I give input into one question the other question is also taking the same data. Kindly help me out with this.
Below is the form.
<div ng-repeat="question in qgroup[grp_id].question" name="outerDiv">
<div ng-if="question.question_type === 'short_text'" class="row form-group">
<label class="control-label label-pad-top col-sm-6" for="short-text">{{question.name}}:</label>
<div class="col-sm-12">
<input type="f-name" name="shortText" class="form-control" id="first-name" placeholder="First Name" ng-model="data.answer.shortText">
</div>
</div>
<div ng-if="question.question_type === 'date_format'" class="row form-group">
<label class="control-label label-pad-top col-sm-6" for="short-text">{{question.name}}:</label>
<div class="col-sm-12">
<input type="d-type" name="date" class="form-control" id="date-type" placeholder="YYYY/MM/DD" ng-model="data.answer.date">
</div>
</div>
</div>
The problem is that the model you are using for the input is shared between questions of the same type.
A natural solution to this would be to put the answer onto the question object. i.e.
<input type="f-name" name="shortText" class="form-control" id="first-name" placeholder="First Name" ng-model="question.answer">
instead of
<input type="f-name" name="shortText" class="form-control" id="first-name" placeholder="First Name" ng-model="data.answer.shortText">
What seems like a simple thing in AngularJS is not working for me and I was hoping you all could be of assistance. Specifically, I am trying to enter the result of an AngularJS expression in another input's "value" attribute. I have set the ng-model's and am calling those correctly, just can't figure out why it won't evaluate. I have tried doing the same expression below the input, and it evaluates, so I believe it's something to do with being in the value attribute which is causing the issue.The code I have currently is:
<div class="row-fluid">
<div class="span4">
<label for="employeeID">Employee ID</label>
<input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
</div>
<div class="span4">
<label>First Name</label>
<input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
</div>
<div class="span4">
<label>Last Name</label>
<input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level" placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>
<div class="span4">
<label>Password</label>
<input type="password" class="input-block-level" placeholder="***************">
</div>
<div class="span4">
<label>Role</label>
<select class="input-block-level">
<option value="user">User</option>
<option value="admin">Administrator</option>
</select>
</div>
</div>
Ideally, I would like to figure out how to get a username of the first letter of the first name and the full last name to auto-populate using data-binding, but at this point I haven't even been able to get just the standard first name + last name to work.
Any help you could offer would be greatly appreciated.
Thank you!
<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="un" >
Use ng-change directive.
var app = angular.module("app", []);
app.controller("myCtrl", ["$scope", function ($scope){
$scope.fn = "";
$scope.ln = "";
$scope.changed = function () {
$scope.un = $scope.fn[0] + $scope.ln;
};
}]);
DEMO
please use ng-value instead value
here demo: http://jsbin.com/zamih/1/edit
<body ng-app="app">
<div ng-controller="firstCtrl">
<div class="row-fluid">
<div class="span4">
<label for="employeeID">Employee ID</label>
<input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
</div>
<div class="span4">
<label>First Name</label>
<input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
</div>
<div class="span4">
<label>Last Name</label>
<input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="createNewUser.LastName" >
</div>
<div class="span4">
<label>Password</label>
<input type="password" class="input-block-level" placeholder="***************">
</div>
<div class="span4">
<label>Role</label>
<select class="input-block-level">
<option value="user">User</option>
<option value="admin">Administrator</option>
</select>
</div>
</div>
</div>
</body>
Change this line:
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level"
placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>
To this instead:
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level"
placeholder="JohnathanSmith" value="{{createNewUser.LastName}}" >
</div>
Your issue is that you are not evaluating createNewUser.LastName as an angular binding, but instead just assigning the text "createNewUser.LastName" to the value attribute. To fix this, put the createNewUser.LastName variable in double curly braces {{...}}.
Hope this helps!
If you have tried any/all of these above mentioned methods and still not able to fix your problem, it could be that your updated files are not loaded to Chrome.
That's what happened to me.
There are two ways to make sure that your js files are up to date on the browser,
1) Hold shift while clicking the reload button of your browser
2) Hard reload your page
* Open Developer Tools by either pressing F12 or ... -> More Tools -> Developer Tools
* Right-click the reload button of your browser and click "Empty Cache and Hard Reload"
Given the following html snippet, I cant seem to access the input elements under the div with class="input-group"
<form action="login.html#register" method="post" id="form-register" class="form-horizontal display-none">
<div class="form-group">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon"><i class="gi gi-user"></i></span>
<input type="text" id="register-firstname" name="register-firstname" class="form-control input-lg" placeholder="Firstname">
</div>
</div>
<div class="col-xs-6">
<input type="text" id="register-lastname" name="register-lastname" class="form-control input-lg" placeholder="Lastname">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon"><i class="gi gi-envelope"></i></span>
<input type="text" id="register-email" name="register-email" class="form-control input-lg" placeholder="Email">
</div>
</div>
</div>
</form>
I have tried numerous selector syntax but nothing seems to work. I cannot figure out why this version doesn't work, it certainly should, but I'm no expert on JQuery just yet.
To me the syntax below says get all the items with class form-group in the element with id form-register, then get all divs with class input-group and then all the input tags in those divs. Am I mistaken there?
$('#form-register.form-group > div.input-group > input').attr('disabled', true);
The proper syntax is, via assistance from the accepted answer;
$('#form-register div[class^="col-xs"] input').attr('disabled', true);
Your CSS syntax is incorrect. Try this:
$('#form-register .form-group div.input-group > input').attr('disabled', true);
Firstly, notice the space between the first two selectors, because .form-group is a child of #form-register. Secondly the > means 'direct child of', so was incorrect when used on div.input-group.
The Following is the code I am using in Mootools,
var company_name = $('company_name-wrapper').clone();
company_name.inject($('wmd-button-bar'));
The HTML is as follows,
<div id="company_name-wrapper" class="form-wrapper" style='float:left;'>
<div id="company_name-label" class="form-label">
<label for="company_name" class="required">
Company
</label>
</div>
<div id="company_name-element" class="form-element">
<input type="text" name="company_name[]" id="company_name" value="">
</div>
</div>
..............
..............
<div id='wmd-button-bar'></div>
The Output I am getting after executing the code is,
<div id='wmd-button-bar'>
<div class="form-wrapper">
<div class="form-label">
<label for="company_name" class="required">
Company
</label>
</div>
<div class="form-element">
<input type="text" name="company_name[]" id="company_name" value="">
</div>
</div>
</div>
The Id's or the style of any elements is not getting cloned.
Any help or suggestion is appreciated,
thanks in advance.
Mootools avoids copying ID's to avoid getting double ID's, but you can override that using .clone([contents, keepid]) keepid function paramenters.
So try using: var company_name = $('company_name-wrapper').clone(true, true);
Demo
Notice that doing so you will have duplicate ID's and that is invalid HTML, it will give you problems when you try to refer to different elements with the same ID.