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.
Related
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.
so I'm having a weird problem that I haven't encountered before. My code is the following:
<div class="row">
<div class="col-md-12">
<h4>Send message to seller</h4>
<div class="panel panel-default">
<div class="panel-body">
<form action="#" method="POST">
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" id="InputEmail" placeholder="Enter your email" >
</div>
<div class="form-group">
<label for="InputText">Your text</label>
<textarea class="form-control" id="InputText" name="message" placeholder="Type in your message" rows="5" style="margin-bottom:10px;"></textarea>
</div>
<button class="btn btn-info" type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
When I run it on the server, this is the result, and it is really annoying:
<div class="form-group">
<label for="InputEmail">Email address</label>
<div class="has-placeholder form-control"><label>Enter your email</label><input type="email" class="form-control" id="InputEmail"></div>
For the second code, I omitted the rest of the code. As you can see, it adds a new and a new with a class of place-holer.
I have 2 versions of this file. Full HTML, and one with PHP etc.. The HTML version is just fine, but this one, for some reason, has this result. Can anyone explain to my why this is happening.
I have looked in the js files that are being included and cannot find anything regarding that added class and what not.
Thanks.
Your this html code is just perfect. Probably you missed some tag in php file. Can you please post your php code so that we can sorted it out.
Thanks
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');
I am trying to implement a form within a bootstrap popover; but i cannot seem to be able to align them both. The form elements move out side the popover ; the solution should make the popover adjust according to the size of the form elements. Please help.
HTML:
<br> <br> <br>
<div class="popover-markup">Popover link
<div class="head hide"> Events </div>
<div class="content hide">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn pull-left">Sign in</button>
</div>
</div>
</form>
</div>
Javascript:
$('.popover-markup>.trigger').popover({
html : true,
title: function() {
return $(this).parent().find('.head').html();
},
content: function() {
return $(this).parent().find('.content').html();
}
});
here's the fiddle.
http://jsfiddle.net/MgcDU/6524/
Okay so i found a solution which is basically that i wasn't using the form tags in the body before the form horizontal div. But even if i do that; my fields aren't inline fields. Can anyone suggest a solution to that?
Change the form-horizonal to "form-inline" and to be safe you can also add a style to override the popvoer style. I have tried it and its working.
.popover {
max-width: 800px;
width: auto;