I'm trying to format and change the structure of a standard HTML form. At the moment the output looks like this
<form accept-charset="UTF-8" autocomplete="off" method="POST">
<ol class="questions">
<div>
<label>First Name *</label>
<input type="text" />
</div>
<div>
<label>Email *</label>
<input type="text" />
</div>
<div class="submit">
<input type="submit" value="Submit" />
</div>
</ol>
</div>
</form>
I need to change the divs to list items and then add a span around the labels if possible.
I've got this so far but it's not altering unfortunately.
window.onload = function() {
var widgetHTML = $('ol.questions').html();
widgetHTML = widgetHTML
.replace(/<div>/g, '<li>')
.replace(/<\/div>/g, '</li>');
$('ol.questions').html(widgetHTML);
};
Any ideas to add the span and replace the DIVs to LIs that would be great
Use .replaceWith() and .wrap():
$("form div").replaceWith(function(){
$(this).find('label').wrap('<span/>');
return $('<li>' + this.innerHTML + '</li>')
});
jsFiddle example
This will give you:
<form accept-charset="UTF-8" autocomplete="off" method="POST">
<ol class="questions">
<li>
<span><label>First Name *</label></span>
<input type="text">
</li>
<li>
<span><label>Email *</label></span>
<input type="text">
</li>
<li>
<input type="submit" value="Submit">
</li>
</ol>
</form>
This should do it.
$('ol.questions div').each(function(){
$('label',this).wrap('<span/>');
var children = $(this).children();
$(this).replaceWith($('<li/>').append(children));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" autocomplete="off" method="POST">
<ol class="questions">
<div>
<label>First Name *</label>
<input type="text" />
</div>
<div>
<label>Email *</label>
<input type="text" />
</div>
<div class="submit">
<input type="submit" value="Submit" />
</div>
</ol>
</form>
Use the following jQuery function for changing the type:
(function($) {
$.fn.changeElementType = function(newType) {
var attrs = {};
$.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
this.replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
}
})(jQuery);
// USAGE
$("div").changeElementType("li");
(https://stackoverflow.com/a/8584217/1017882)
Use the following code to wrap your labels with a span:
$("label").wrap("<span></span>");
NOTE: You'll need to refine the selectors as you see fit. The selectors above will work given the markup you've posted, but I assume you have other divs and labels on your page.
Related
I am looking to clone a div while also changing id's of the elements inside the mentioned div
The code i am using clone the div is
<!DOCTYPE html>
<html lang="en">
<body>
<form>
<div class="dynamic-field" id="dynamic-field-1">
<div>
<label for="name" class="hidden-md">Name</label>
<input type="text" id="name-1" class="form-control" name="field[]" />
</div>
<div>
<label for="age" class="hidden-md">Age</label>
<input type="text" id="age-1" class="form-control" name="field[]" />
</div>
</div>
<div>
<button type="button" id="add-button">
Add
</button>
</div>
</form>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script>
$(document).ready(function () {
var buttonAdd = $("#add-button");
var className = ".dynamic-field";
var count = 0;
function totalFields() {
return $(className).length;
}
function addNewField() {
count = totalFields() + 1;
field = $("#dynamic-field-1").clone();
field.attr("id", "dynamic-field-" + count);
field.find("input").val("");
$(className + ":last").after($(field));
}
buttonAdd.click(function () {
addNewField();
});
});
</script>
</body>
</html>
The code used can clone div and change its id in an incremental manner. the problem is changing the element input id and name of the label
the cloned div's element's id needs to be like eg field-1,field2,..etc
The expected Result is..
<form>
<div class="dynamic-field" id="dynamic-field-">
<div>
<label for="name" class="hidden-md">Name</label>
<input type="text" id="name-1" class="form-control" name="field[]" />
</div>
<div>
<label for="age" class="hidden-md">Age</label>
<input type="text" id="age-1" class="form-control" name="field[]" />
</div>
</div>
<div class="dynamic-field" id="dynamic-field-2">
<div>
<label for="name" class="hidden-md">Name</label>
<input type="text" id="name-2" class="form-control" name="field[]" />
</div>
<div>
<label for="age" class="hidden-md">Age</label>
<input type="text" id="age-2" class="form-control" name="field[]" />
</div>
</div>
<div>
<button type="button" id="add-button">
Add
</button>
</div>
How can i achieve by altering the existing code and not using an entirely different method
Using Jquery attr:
field.find("input").attr("id","field-" + count);
field.find("label").attr("for","field-" + count);
I'm trying to get the values from my form when the user clones the row. When I clone the rows are the id still the same? If so how do I make the new rows to have a unique id?
jQuery(function($) {
var $button = $('#add-row'),
$row = $('.period-row').clone();
$button.click(function() {
$row.clone().insertBefore($button);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="heading">Please select appointment period</h3>
<div class="form-wrapper">
<form action="#" id="date-form" name="date-form" method="POST">
<div class="period-row">
<label for="start">From:</label>
<input type="datetime-local" name="start[]" id="start">
<label for="end">To:</label>
<input type="datetime-local" name="end[]" id="end">
</div>
<input type="button" id="add-row" name="add-row" value="add period" />
<button type="submit">submit</button>
</form>
</div>
I don't understand what exactly you want and to do it on the proper way you have to use class on the input and not id because the id is unique. But I hope this code will help you.
jQuery(function($) {
var $button = $('#add-row'),
$row = $('.period-row').clone();
$button.click(function() {
let from = $('#start').val();
let to = $('#end').val();
$row.clone().insertBefore($button).addClass('active');
$('.period-row.active').find("#start").val(from);
$('.period-row.active').find("#end").val(from);
$('.period-row').removeClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="heading">Please select appointment period</h3>
<div class="form-wrapper">
<form action="#" id="date-form" name="date-form" method="POST">
<div class="period-row">
<label for="start">From:</label>
<input type="datetime-local" name="start[]" id="start">
<label for="end">To:</label>
<input type="datetime-local" name="end[]" id="end">
</div>
<input type="button" id="add-row" name="add-row" value="add period" />
<button type="submit">submit</button>
</form>
</div>
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
please I want to apply fadeToggle for each button but it does not work with this method ,I try to apply with this How to use javascript variables in jquery selectors but not successful
this is Code HTML
<div id="ajouter" class="dropdown">
<ul>
<li>
<button class="projetbutton">Projet</button>
<form class="projet" style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
<li>
<button class="famillebutton">Famille</button>
<form class="famille" style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
</ul>
</div>
and this is script apply for the buttons
<script>
var classElement = ["projet", "famille"];
var button = "button";
for (var i = 0; i < classElement.length; i++) {
var classbutton = classElement[i].concat(button);
$(document).ready(function () {
$('.classbutton').click(function () {
$(".classElement[i]").fadeToggle();
});
});
}
</script>
Please if there is another method to do that job.
You can take advantage of the relation ship between element and various DOM traversal methods available to target element and then perform desired operation.
Associate the click handler using a common class, here used classbutton with the elements, then used .next() to get the form element.
$(document).ready(function() {
$('.classbutton').click(function() {
$(this).next().fadeToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajouter" class="dropdown">
<ul>
<li>
<button type="button" class="classbutton">Projet</button>
<form style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
<li>
<button type="button" class="classbutton">Famille</button>
<form style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
</ul>
</div>
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