In jQuery, how can I append a line of HTML to some HTML, as well as remove the line of HTML?
Here is the before code:
<div class="form-group">
<label class="control-label col-md-2" for="txtCvc">Cvc</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="txtCvc" name="Cvc" type="text" value="" />
</div>
</div>
Here is the after code:
<div class="form-group">
<label class="control-label col-md-2" for="txtCvc">Cvc</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="txtCvc" name="Cvc" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="txtCvc" data-valmsg-replace="true">Test message.</span>
</div>
</div>
I am needing to add this line of code:
<span class="field-validation-error" data-valmsg-for="txtCvc" data-valmsg-replace="true">Test message.</span>
Also, the reverse. How can I remove this line of code?
Here is the before code:
<div class="form-group">
<label class="control-label col-md-2" for="txtCvc">Cvc</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="txtCvc" name="Cvc" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="txtCvc" data-valmsg-replace="true">Test message.</span>
</div>
</div>
Here is the after code:
<div class="form-group">
<label class="control-label col-md-2" for="txtCvc">Cvc</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="txtCvc" name="Cvc" type="text" value="" />
</div>
</div>
Sorry, I forgot to mention that I am a beginner when it comes to jQuery. I am looking at the append and remove functions right now.
Thanks in advance.
Simply use .append() and .remove() methods.
It would be more appropriate if you use show() and hide() for an error message like
$('.field-validation-error').show();
for showing the message and
$('.field-validation-error').hide();
for hiding it, use if else for checking your condition.
Providing that you know input field element that you want to show/hide validation messages for, you can use after method to add message:
$field.after('<span class="field-validation-error" data-valmsg-for="txtCvc" data-valmsg-replace="true">Test message.</span>');
and remove to remove it:
$field.next('.field-validation-error').remove();
So $field can be something like this:
var $field = $('#txtCvc');
Related
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 currently ran into a problem that i cannot remove the appended html with jQuery.
What works now is i can append the html that i want and it looks nice, but removing does not work. It works only on reload the first loaded html the others that i append are not working - I don't know why.
Here is my code for appending the html:
$("#adWasteStream").click(function(){
var newTxt = $('<div class="row-waste-container width-100"><div class="row"><div class="col-md-9"><p>Stream 1</p></div><div class="col-md-3"><button class="btn btn-add-waste deleteWasteStream"><i class="fa fa-minus-circle o-btn-add" aria-hidden="true"></i>Remove Waste Stream</button></div><div class="form-group col-md-7"><label for="business-mng-name" class="control-label">Waste Stream</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="Co-mingled recycling"><span class="help-block"></span></div></div><div class="row width-100"><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Volume (m <sup>3</sup>)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="50"><span class="help-block"></span></div><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Weight (t)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="20"><span class="help-block"></span></div><div class="form-group col-md-4"><label for="business-mng-name" class="control-label">Cost ($)</label><input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="400"><span class="help-block"></span></div></div></div>');
$(".row-cont-main").append(newTxt);
});
My code for removing:
$(".deleteWasteStream").click(function(){
var curRow = $(this).parents('div.row-waste-container');
curRow.remove();
});
I don't need to use Id's as they need to be unique all elements (for back-end purposes).
The structure of the html looks like this:
<div class="row-waste-container width-100">
<div class="row">
<div class="col-md-9">
<p>Stream 1</p>
</div>
<div class="col-md-3">
<button class="btn btn-add-waste deleteWasteStream"><i class="fa fa-minus-circle o-btn-add" aria-hidden="true"></i>Remove Waste Stream</button>
</div>
<div class="form-group col-md-7">
<label for="business-mng-name" class="control-label">Waste Stream</label>
<input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="Co-mingled recycling">
<span class="help-block"></span>
</div>
</div><!-- end row -->
<div class="row width-100">
<div class="form-group col-md-4">
<label for="business-mng-name" class="control-label">Volume (m <sup>3</sup>)</label>
<input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="50">
<span class="help-block"></span>
</div>
<div class="form-group col-md-4">
<label for="business-mng-name" class="control-label">Weight (t)</label>
<input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="20">
<span class="help-block"></span>
</div>
<div class="form-group col-md-4">
<label for="business-mng-name" class="control-label">Cost ($)</label>
<input type="text" class="form-control form-input-field" name="business-mng-name" value="" required="" placeholder="400">
<span class="help-block"></span>
</div>
</div><!-- end row -->
</div><!-- end row-waste container -->
You need to change your click event handler to handle also dynamically appended html.
Update your remove click handler with the code below
$("body").on('click' , '.deleteWasteStream' , function(){
var curRow = $(this).parents('div.row-waste-container');
curRow.remove();
});
You cant use .click() on dynamic objects/html. You can use .on()
$("body").on('click', '.deleteWasteStream', function( event ) {
var curRow = $(this).parents('div.row-waste-container');
curRow.remove();
});
Documentation: http://api.jquery.com/on/
Since the elements were created dynamically, they are not registered in DOM like pre-rendered elements (those rendered when your webpage is loaded in the browser). The best solution is binding the dynamically created element to the prerendered ones using the on event binder
$('.row-cont-main').on('click','.deleteWasteStream',function(){
var curRow = $(this).parents('div.row-waste-container');
curRow.remove();
});
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.
I have to check validation on two fields with ng-change. The selected values cannot be same so i have implemented below logic but this function is not even being called. Its been hours and i cannot figure out what i am doing wrong. Please check if logic is being implemented correctly.
So far tried code....
main.html
<div class="panel-body">
<form name="addAttesForm" id="addAttesForm" novalidate k-validate-on-blur="false">
<div class="row">
<div class="form-group col-md-6">
<label for="roleType" class="col-md-4">Role Type:</label>
<div class="col-md-8">
<select
kendo-drop-down-list
data-text-field="'text'"
data-value-field="'id'" name="roleType"
k-option-label="'Select'"
k-data-source="roleTypeDataSource"
ng-model="attestorDTO.riskAssessmentRoleTypeKey"
id="roleType">
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="attestorWorker" class="col-md-4">Attestor:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" readonly="readonly"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="proxyWorker" class="col-md-4">Proxy :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" readonly="readonly"/>
<p class="text-danger" ng-show="addAttesForm.proxyWorker.$error.dateRange">Attestor and Proxy can not be same</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary pull-right" type="button" ng-disabled="addAttesForm.$invalid" ng-click="saveAttestor()">Add attestor</button>
</div>
</div>
</form>
</div>
main.js
$scope.validateProxy = function(startField, endField) {
console.log("calling validation...");
var isValid = ($scope.attestorDTO[startField]) <= ($scope.attestorDTO[endField]);
$scope.addAttesForm[endField].$setValidity('dateRange',isValid);
$scope.addAttesForm.$setValidity('dateRange',isValid);
};
Remove the readonly attribute. ng-change will not fire on the readonly input elements and the model should be changed via the UI not by the javascript code.
Try like this:
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" />
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" />
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.