I have the following HTML structure, which cannot be changed.
I need to append the user typed info to a <ul> list with jQuery.
I have tried it using the following code but id does nothing. What would be the correct way to do it?
$(document).ready(function() {
$(".btn btn-outline-primary").click(function() {
let toAdd = $("input[#title]").val();
$("<li>" + toAdd + "</li>").appendTo("<ul>");
});
});
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h2>Add Show</h2>
<form>
<div class="form-group">
<label for="title">Show Title</label>
<input type="text" class="form-control" id="title" placeholder="enter title" />
</div>
<div class="form-group">
<label for="rating">Show rating </label>
<input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
</div>
<button type="submit" class="btn btn-outline-primary">Add show</button>
</form>
</div>
<div class="col-6">
<h2> Show List</h2>
<ul>
</ul>
<button class="btn btn-outline-secondary"> Delete List</button>
</div>
</div>
</div>
</body>
</html>
A bunch of bugs to fix:
Separating selectors with space means that the document is searched for the first selector with a descendant of the second selector - you don't want that here, keep the class names together (or just select the btn-outline-primary alone, since there's only one of them)
You need to preventDefault() to keep the form from submitting and replacing the page
The existing ul in the HTML should be selected if you want to append to it - '<ul>' isn't a valid selector.
The #title should just be selected as #title (ids can't be repeated in HTML, after all):
$(".btn-outline-primary").click(function(e) {
e.preventDefault();
let toAdd = $("#title").val();
$("<li>" + toAdd + "</li>").appendTo("ul");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<h2>Add Show</h2>
<form>
<div class="form-group">
<label for="title">Show Title</label>
<input type="text" class="form-control" id="title" placeholder="enter title" />
</div>
<div class="form-group">
<label for="rating">Show rating </label>
<input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
</div>
<button class="btn btn-outline-primary">Add show</button>
</form>
</div>
<div class="col-6">
<h2> Show List</h2>
<ul>
</ul>
<button class="btn btn-outline-secondary"> Delete List</button>
</div>
</div>
</div>
$(document).ready(function(){
$('form').submit(function(e) {
e.preventDefault();
let toAdd = $("#title").val();
$("<li>" +toAdd+ "</li>").appendTo(jQuery("ul"));
});
});
First override the submit.
Value should be fetched properly. using #title
Append to proper element
You have wrong selectors in your code (for btn and title), plus i'd change also the append code.
Also, you have a submit button inside a form, clicking it will cause the submit.
Try this:
$(document).ready(function(){
$("form").submit(function(e){
//prevent form submit;
e.preventDefault();
//append input text value to UL
$("ul").append("<li>" + $("#title").val() + "</li>");
});
});
Click here to test if in JsFiddle
Related
I want to find all available div.finput parents and loop through them, then remove the div.fsetting children and leave the div.form-group element and append it to the result wrapper with div.result.
How can I achieve this?
(($) => {
generateForm()
})(jQuery);
function generateForm() {
$(document).on('click', '.js-generate', function(e) {
let elementRows = $('.finput');
// alert(elementRows.length)
let html = '';
$.each(elementRows, function(i, v) {
html += elementRows.html();
});
$('.result').html(html);
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="finput">
<div class="fsetting">
<button class="fexpand">edit</button>>
</div>
<div class="form-group">
<input type="text" name="firatname" id="firstname">
</div>
</div>
<div class="finput">
<div class="fsetting">
<button class="fexpand">edit</button>>
</div>
<div class="form-group">
<input type="email" name="email" id="email">
</div>
</div>
<button class="js-generate">generate</button>
<div class="result"></div>
The appended element in div.result should look like this:
<div class="result">
<div class="form-group">
<input type="text" name="firstname" id="firstname">
</div>
<div class="form-group">
<input type="email" name="email" id="email">
</div>
</div>
To create the HTML in your output example you can select the .form-group children of the .finput elements and append() them to .result. Then you can remove() the original .finput elements completely.
(($) => {
generateForm()
})(jQuery);
function generateForm() {
$(document).on('click', '.js-generate', function(e) {
let $fInputs = $('.finput').remove();
let $formGroups = $fInputs.children('.form-group');
$('.result').append($formGroups);
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="finput">
<div class="fsetting">
<button class="fexpand">edit</button>
</div>
<div class="form-group">
<input type="text" name="firatname" id="firstname">
</div>
</div>
<div class="finput">
<div class="fsetting">
<button class="fexpand">edit</button>
</div>
<div class="form-group">
<input type="email" name="email" id="email">
</div>
</div>
<button class="js-generate">generate</button>
<div class="result"></div>
Also note that the (($) => {})(jQuery) structure you're using is an IIFE, not a document.ready event handler. The code is fine in this case as you're using a delegated event handler, however there's a meaningful difference between the two which may cause you issues if you're not aware of it.
I have created a two javascript.
1.When i click the checkbox the input field is appeared and when i unchecked input field is disappeared.
2.Second is when i click the add more items the all fields are created one more time.
Now the problem is when is created a second and more items the checkbox is not working.
HTML Code:
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Food Name" name="Name1" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Name</label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="field-value" placeholder="Description" style="width:120%;" required>
<label class="sr-only" for="field-value">Description</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<select id="select1" name="select1" style="width:130%;" class="form-control" required>
<option value=""></option>
<option value="1">Food Type 1</option>
<option value="2">Food Type 2</option>
<select>
<label for="select1">Food Type</label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" value="" class="form-control" data-role="tagsinput" placeholder="Tags" />
<label class="sr-only" for="field-tags">Tags</label>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Price" name="price" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Price</label>
</div>
</div>
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
<div class="col-md-3">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" id="trigger" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields">
<input type="text" id="hidden_field" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-100px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
</div>
</div>
<button class="btn btn-icon-toggle btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove"> <span class="md md-delete"></span> </button>
<button class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add"> Add More Items </button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
</div>
<!-- /div.col-md-12 -->
</div>
<div class="form-group">
<button type="button" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary">Submit Items</button>
</div>
<!--end .form-group -->
</div>
Checkbox Js:
<script type="text/javascript">
$(function() {
// Get the form fields and hidden div
var checkbox = $("#trigger");
var hidden = $("#hidden_fields");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
// Make sure that the hidden fields are indeed
// hidden.
hidden.hide();
$("#hidden_field").val("");
}
});
});
$(function() {
var checkbox = $("#trigger2");
var hidden = $("#hidden_fields2");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$("#hidden_field2").val("");
}
});
});
</script>
Add more items JS:
$(function() {
// Remove button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]', function(e) {
e.preventDefault();
$(this).closest('.form-inline').remove();
});
// Add button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="add"]', function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first-child').clone();
new_field_group.find('input').each(function() {
$(this).val('');
});
container.append(new_field_group);
});
});
page Screenshot:
There are a couple of problems here:
You are cloning elements and then trying to access them via the same ID (you should use class)
Your functions don't target just clicked element but any element with the selector.
You are cloning elements so you need bind the click event to a non-cloned element: e.g. via $(document).on
I've updated some of your code to demonstrate what I'm talking about. In the html, I've added classes in the trigger2 and hidden_fields2 elements and display:none style to the hidden fields so they are hidden by default.:
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
In the javascript, I've changed the function to run from a $(document).on event bind and used the element class instead of the id. I've also changed the code so it only effects the checkbox you change and the closest hidden elements:
$(function() {
$(document).on('change', '.trigger2', function(){
var checkbox = $(this);
var parent = checkbox.closest('.form-inline');
var hidden = parent.find(".hidden_fields2");
hidden.hide();
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$(".hidden_field2").val("");
}
});
});
You need to use the same logic on your other functions and inputs.
When user clicks on "edit" how can I find closest row_form and remove it with jquery?
Here is what I tried so far jsfiddle
HTML
<div id="settings_wrapper">
<h1>General settings</h1>
<div class="settings_row">
<span class="row_name">Name</span>
<div class="row_edit"><p class="row_edit_button">Edit</p></div>
<div class="row_form">
<form action="this.php"><span>New name:</span><input type="text" /><input type="submit" value="Save"><span>New name:</span><input type="text" /></form>
</div>
</div>
<div class="settings_row">
<span class="row_name">Name</span>
<div class="row_edit"><p class="row_edit_button">Edit</p></div>
<div class="row_form">
<form action="this.php"><span>New name:</span><input type="text" /><input type="submit" value="Save"><span>New name:</span><input type="text" /></form>
</div>
</div>
</div>
JQUERY
$(document).ready(function(){
$(".row_edit_button").click(function(){
$(this).closest(".row_form").remove();
});
});
The target element is the next sibling of the parentNode of the clicked element. closest selects the closest matching parent element. One option is:
$(".row_edit_button").click(function() {
$(this.parentNode).siblings(".row_form").remove();
});
Other options are:
$(this).parent().next(".row_form").remove();
$(this).closest('.settings_row').find(".row_form").remove();
I am using this code inside $(document).ready(function(){ ... }):
$('#flavours').on('click', '.toggle-quantity', function(e){
e.preventDefault();
var $quantity_percent = $(this).parent().find('.quantity_percent');
if($quantity_percent.is(':hidden')){
console.log("is hidden");
$quantity_percent.show();
}else{
console.log("is not hidden");
$quantity_percent.hide();
}
});
What's happening is the console.log() is working, but the $quantity_percent is not showing/hiding.
Additionally, if I add an alert('test') to the beginning of the function (just after e.preventDefault) this also doesn't work, but the console.log() continues to work (it correctly logs 'is not hidden').
EDIT: Relevant HTML markup:
<div id="flavours">
<div class="row flavour" id="flavour_1" style="display: block;">
<div class="form-group">
<div class="col-xs-12">
<fieldset>
<legend>Flavour 1</legend>
<div class="col-sm-4">
<label>Flavour Name</label>
<input type="text" value="" name="flavour_name[]" data-flavour-id="1" id="flavour_name_1" class="form-control autocomp" placeholder="Flavour name">
<input type="hidden" value="" name="flavour_id[]" id="flavour_id_1" class="form-control flavour_id">
<p class="flavour_info"></p>
</div>
<div class="col-sm-6">
<label>Flavour Quantity <span class="fa fa-filter"></span> <span class="hidden-sm">Switch to </span>drops per ml</label>
<div class="input-group" id="quantity_percent">
<input type="text" class="form-control" id="flavour_percentage_1" name="flavour_percentage[]" placeholder="Flavour Quantity">
<span class="input-group-addon">%</span>
</div>
<div class="input-group" id="quantity_drops" style="display: none;">
<input type="text" class="form-control" id="flavour_drops_1" name="flavour_drops[]" placeholder="Flavour Quantity">
<span class="input-group-addon">drops/ml</span>
</div>
<p class="flavour_recommended_percentage"></p>
</div>
<div class="col-sm-2">
<label> </label>
<button class="btn btn-danger btn-block remove-flavour"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</fieldset>
</div>
</div>
</div>
$(this).parent() is a label element which doesn't have a child with .quantity_percent
Also quantity_percent is an id and not a class. Use the ID selector
So use
var $quantity_percent = $('#quantity_percent');
instead of
var $quantity_percent = $(this).parent().find('.quantity_percent');
Note: IDs must be unique in HTML
EDIT: as per OPs comments
I updated it to a class rather than ID (as it's on a dynamically growing list)
Usage
var $quantity_percent = $(this).closest('.col-sm-6').find('.quantity_percent');
The .parent() targets the <label> therefore it can't find .quantity_percent
I have 3 forms. I'd like to show each separately. Having the user fillout and then have the completed form slide to the left, and then revealing the proceeding form.
$('.button-action').click(function() {
$('.firstForm').animate({left: '-=150px'}, 500);
});
How would I go about making this happen?
Here is a fiddle that I've tried to work with.
Thank you for your help.
I've changed the divs to have a class called 'wizard' (because that's the way I see what you are trying to do) you can change that however you'd like.
HTML
<div class="promo">
<div class="wrapper">
<div id="signup" class="wizard">
<div class="heading">
<h1>Just need your email to get started</h1>
</div>
<ul>
<li>
<input class="signup-email" type="text" placeholder="Email address" />
</li>
<li>
<button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
</li>
</ul>
</div>
<div id="form1" class="wizard">
<h1>One more to go</h1>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Country" />
<button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
</div>
<div id="form2" class="wizard">
<h1>Last one</h1>
<input type="text" class="input-text" placeholder="Company Name" />
<button validationDiv="form2" class="button button-action">Done</button>
</div>
</div>
</div>
jQuery
$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
var valid = true;
$("#" + $(this).attr("validationDiv")).find("input").each(function () {
if ($(this).val() == "") valid = false;
});
if (valid) {
$(".wizard").slideUp();
$("#" + $(this).attr("data-next-id")).slideDown();
}
});
JSFiddle