I'm trying to create a form that allows the user to edit it similar to the old style of Facebook profile editing. I can't figure out how to change all the elements in a section at the same time. I can edit one at a time, but not all of them.
HTML:
<div id="wrapper">
<section id="core">
<div class="profileinfo">
<div class="gear">
<label>Primary E-Mail:</label><br />
<span id="pemail" class="datainfo">myaddress#googlemail.com</span>
Edit Info
<a class="savebtn">Save</a>
</div>
<div class="gear">
<label>Full Name:</label><br />
<span id="first" class="datainfo">Johnny</span>
<span id="middle" class="datainfo">James</span>
<span id="last" class="datainfo">Appleseed</span>
Edit Info
<a class="savebtn">Save</a>
</div>
<div class="gear">
<label>Birthday:</label><br />
<span id="birthday" class="datainfo">August 21, 1989</span>
Edit Info
<a class="savebtn">Save</a>
</div>
<div class="gear">
<label>Address:</label><br />
<span id="address1" class="datainfo">123 Test Lane</span><br />
<span id="address2" class="datainfo">APT 104</span><br />
<span id="city" class="datainfo">Anywhere</span>
<span id="state" class="datainfo">FL</span>
<span id="zip" class="datainfo">55555</span>
Edit Info
<a class="savebtn">Save</a>
</div>
<div class="gear">
<label>Occupation:</label><br />
<span id="occupation" class="datainfo">Freelance Web Developer</span>
Edit Info
<a class="savebtn">Save</a>
</div>
</div>
</section>
</div>
Javascript:
$(document).ready(function(){
$(".editlink").on("click", function(e){
e.preventDefault();
var dataset = $(this).prev(".datainfo");
var savebtn = $(this).next(".savebtn");
var theid = dataset.attr("id");
var newid = theid+"-form";
var currval = dataset.text();
dataset.empty();
$('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">').appendTo(dataset);
$(this).css("display", "none");
savebtn.css("display", "block");
});
$(".savebtn").on("click", function(e){
e.preventDefault();
var elink = $(this).prev(".editlink");
var dataset = elink.prev(".datainfo");
var newid = dataset.attr("id");
var cinput = "#"+newid+"-form";
var einput = $(cinput);
var newval = einput.attr("value");
$(this).css("display", "none");
einput.remove();
dataset.html(newval);
elink.css("display", "block");
});
});
EDIT
Here is an image similar to what I want it to look like:
How do I build in the ability to edit each section? Here is a JSFiddle for you to look at.
It may not be the best approach but this will do what you want.
$(document).ready(function(){
$(".editlink").on("click", function(e){
e.preventDefault();
var datasets = $(this).prevAll(".datainfo");
var savebtn = $(this).next(".savebtn");
datasets.each(function(){
var theid = $(this).attr("id");
var newid = theid+"-form";
var currval = $(this).text();
$(this).html('<input type="text" name="'+newid+'" id="'+newid+'" value="'+currval+'" class="hlite">');
});
$(this).css("display", "none");
savebtn.css("display", "block");
});
$(".savebtn").on("click", function(e){
e.preventDefault();
var elink = $(this).prev(".editlink");
var datasets = $(this).prevAll(".datainfo");
datasets.each(function(){
var newid = $(this).attr("id");
var einput = $("#"+newid+"-form");
var newval = einput.val();
einput.remove();
$(this).html(newval);
});
$(this).css("display", "none");
elink.css("display", "block");
});
});
Related
I'm looking to clone addDriverContent (working fine) and increment the numbers for the name attribute on name="description" to name="description2", name="description3" on the clones
Also if anyone know how to also clone the add button so it works as it should on the clones would be extra points :) Some fiddles would be awesome :)
<div id="addDriverContent" style="display:none;">
<div class="content">
<div class="row">
<div class="col-md-12">
<label for="description" class="form-label font-weight-bold">Item Description:</label>
<input type="text" class="form-control" id="description" name="description" placeholder="Enter the items description"/>
</div>
</div>
</div>
</div>
<button type="button" class="add_field_button" id="clone_button">Add another item</button>
<div id="clone_wrapper"></div>
<script type="text/javascript">
$(function($) {
var max_fields = 4;
// origin selector would select all the first div ancestors.
var $content = $("#addDriverContent > .content");
var $clone_wrapper = $("#clone_wrapper") ;
var $add_button = $(".add_field_button"); //Add button ID
$add_button.click(function(e) {
e.preventDefault();
var counter = 0;
// jquery object is array liked object. Length mean how many elements is selected.
if ( $clone_wrapper.children(".content").length < max_fields )
$content.clone().appendTo($clone_wrapper);
});
$clone_wrapper.on("click",".remove_field", function(e){
e.preventDefault();
// this would be more specific.
$(this).parent(".content").remove();
})
});
</script>
As I have no idea what you intend to do with it, I will provide you with my dirty solution for it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addDriverContent" style="display:none;">
<div class="content">
<div class="row">
<div class="col-md-12">
<label for="description" class="form-label font-weight-bold">Item Description:</label>
<input type="text" class="description form-control" id="description" name="description" placeholder="Enter the items description"/>
<input type="text" class="fname form-control" id="fname" name="fname"/>
Remove<button type="button" class="add_field_button" id="clone_button">Add another item</button>
</div>
</div>
</div>
</div>
<button type="button" class="add_field_button" id="clone_button">Add another item</button>
<div id="clone_wrapper"></div>
<script type="text/javascript">
$(function($) {
var max_fields = 4;
// origin selector would select all the first div ancestors.
var $content = $("#addDriverContent > .content");
var $clone_wrapper = $("#clone_wrapper") ;
var $add_button = $(".add_field_button"); //Add button ID
$(".add_field_button").click(function() {
//e.preventDefault();
//var counter = 0;
// jquery object is array liked object. Length mean how many elements is selected.
if ( $clone_wrapper.children(".content").length < max_fields ) {
$content.clone().appendTo($clone_wrapper);
//$add_button.clone().appendTo($clone_wrapper);// mine
$(".description").each(function(index) {
$( this ).attr('name', 'description'+index)
});
$(".fname").each(function(index) {
$( this ).attr('name', 'fname'+index)
});
}
});
$(document).on('click', "#clone_wrapper .add_field_button", function () {
$('#addDriverContent + .add_field_button').trigger('click');
})
$(document).on('click', ".remove_field", function () {
//e.preventDefault();
// this would be more specific.
$(this).closest(".content").remove();
});
});
</script>
How do I make my to do list able edit input through the edit button using jquery? It is a to do list and i want users to be able to edit the input
Thanks in advance
<header data-role="header">
<h1>To Do List</h1>
Home
</header>
<div role="main" class="todo- container">
<div class="input">
<input type="text" class="note" placeholder="Input new note..">
<button id="addButton">Add</button>
</div>
<ul class="todo-list">
<li>
<div class="button-center">
</div>
</li>
</ul>
<script>
$(document).ready(function() {
$('#addButton').click(function() {
var task = $(".note").val();
$(".todo-list").append(`<li> <span>Task: ${task}</span><div class="button-center"><button class="deleteButton">Delete</button><button class="editButtton">Edit</button> </div></li>`);
$(".note").val("");
});
$(document).on('click', '.deleteButton', function() {
$(this).parent().parent().remove();
});
});
$('#editButton').click(function() {});
</script>
I have done something like this : example
user will be able to edit by double click at the text and an input field will showed up. user can click the edit button once he/she finished edit and the text will be updated.
JS
$('#addButton').click(function() {
var task = $(".note").val();
$(".todo-list").append(`<li>Task: <span class='task'>${task}</span><div
class="button-center"><button class="deleteButton">Delete</button><button
class="editButton">Edit</button> </div></li>`);
$(".note").val("");
});
$(document).on('click', '.deleteButton', function() {
$(this).parent().parent().remove();
});
$(document).on('dblclick', '.task', function() {
var task = $(this).text();
$(this).text('');
$(this).append(`<input type="text" value="${task}" />`);
});
$(document).on('click', '.editButton', function() {
var task = $(this).parents().siblings('span').children('input').val();
$(this).parents().siblings('span').remove('input');
$(this).parents().siblings('span').text(task);
});
I've modify your code and added the edit functionality. It's supposed to work as you will expect so I will not say much. Kindly try this
$(document).ready(function() {
var $note = $('.note');
var $taskId = $('.task-id');
$('#addButton').click(function() {
var task = $note.val().trim();
var id = $taskId.val();
if( task.trim() === '' ){
// do nothing
}else if( id !== '' ){ // edit
$(".todo-list").find('[data-id="'+id+'"] .task').text(task);
}else{ // add todo
id = new Date().getTime(); // you can make it more unique
$(".todo-list").append(`
<li data-id="${id}">
<span class="task">${task}</span>
<div class="button-center">
<button class="deleteButton">Delete</button>
<button class="editButton">Edit</button>
</div>
</li>
`);
}
$note.val('').focus();
$taskId.val('');
$(this).text('Add');
});
// delete and edit action
$(document).on('click', '.deleteButton', function() {
$(this).closest('li').remove();
}).on('click', '.editButton', function(){
let $li = $(this).closest('li');
$note.val( $li.find('.task').text() );
$taskId.val( $li.data('id') );
$('#addButton').text('Update');
});
// cancel update if .note text is cleared
$('.note').on('input', function(){
if( $(this).val() === '' ){
$taskId.val('').focus();
$('#addButton').text('Add');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input">
<input type="text" class="note" placeholder="Input new note..">
<input type="hidden" class="task-id">
<button id="addButton">Add</button>
</div>
<ul class="todo-list"></ul>
I want to create multiple images for an item. The problem I have is that when I click on the Add button, the input type = 'file' tag is created, but when I click on the created tag, it does not work and only the first option that was initially available works.
in Html
<button type="button" id="bAddImage"> Add </button>
<div class="m-t-15" id="row-file">
<div class="row-file-upload">
<div class="col-lg-6 col-md-6 m-t-10 row clearfix">
<button class="material-icons text-center bClear waves-effect bg-blue-grey">clear</button>
<div class="file-upload">
<div class="file-select">
<div class="file-select-name fileName">Choos File</div>
<div class="file-select-button">... Choose File</div>
<input type="file" class="chooseFile">
</div>
</div>
</div>
</div>
in Script
<script type="text/javascript">
$(document).ready(function () {
$('body').on('click',
'.bClear',
function (event) {
event.preventDefault();
var $el = $('.chooseFile');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
$('.chooseFile').trigger('change');
});
$('body').on('change', '.chooseFile', function () {
var filename = $(".chooseFile").val();
if (/^\s*$/.test(filename)) {
$(".file-upload").removeClass('active');
$(".fileName").text("فایل انتخاب نشده");
}
else {
$(".file-upload").addClass('active');
filename = filename.replace("C:\\fakepath\\", "");
if (filename.length > 30) {
filename = filename.substring(0, 30) + '...';
}
$(".fileName").text(filename);
}
});
$('body').on('click', '#bAddImage', function () {
$('#row-file').append($('.row-file-upload').html());
});
});
</script>
this is a simple Example for dynamically adding fileinput to HTML.
$(document).ready(function() {
var wrapper = $(".wrapper");
var add_button = $(".Add");
var uploadField = document.getElementById("file");
$(add_button).click(function(e) {
e.preventDefault();
$(wrapper).append('<div><input type="file" name="att"/>Remove</div>');})
$(wrapper).on("click", ".remove", function(e) {
e.preventDefault();
$(this).parent('div').remove();});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
+ Add
<div>
<input type="file" id="file" name="att">
</div>
</div>
I'm trying to add bullets to multiple textarea. This works fine when the textareas are not hidden, however I'd like to be able to add bullets to newly created textareas (click on the button "Add New". Ideally I'd like also newly created bullets to go to the next line rather than to be displayed side by side.
$(document).ready()
$('.add-bullet').click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022';
});
return false;
});
(function($) {
"use strict";
var itemTemplate = $('.workExperience-template').detach(),
editArea = $('.workExperience-area'),
itemNumber = 1;
$(document).on('click', '.workExperience-area .add', function(event) {
var item = itemTemplate.clone();
item.find('[name]').attr('name', function() {
return $(this).attr('name') + '_' + itemNumber;
});
++itemNumber;
item.prependTo(editArea);
});
$(document).on('click', '.workExperience-area .rem', function(event) {
editArea.children('.workExperience-template').last().remove();
});
$(document).on('click', '.workExperience-area .del', function(event) {
var target = $(event.target),
row = target.closest('.workExperience-template');
row.remove();
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea">
<div>Add bullet</div>
<textarea id="todolist" class="todolist" name="todolist" placeholder="Write something.." ></textarea>
</div>
<div class="hidden">
<div class="workExperience-template">
<div class="textarea">
<div>Add bullet</div>
<textarea id="list" class="list" name="tata" placeholder="Write something.." ></textarea>
</div>
</div>
</div>
<div class="workExperience-area">
<button type="button" class="add buttonBlueAddField">Add New</button>
</div>
You should attach click event on newly created anchors:
$(document).ready()
$('.add-bullet').click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022';
});
return false;
});
(function($) {
"use strict";
var itemTemplate = $('.workExperience-template').detach(),
editArea = $('.workExperience-area'),
itemNumber = 1;
$(document).on('click', '.workExperience-area .add', function(event) {
var item = itemTemplate.clone();
item.find('[name]').attr('name', function() {
return $(this).attr('name') + '_' + itemNumber;
});
++itemNumber;
item.find(".add-bullet").click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022\n';
});
return false;
});
$(".textarea").next().append(item);
});
$(document).on('click', '.workExperience-area .rem', function(event) {
editArea.children('.workExperience-template').last().remove();
});
$(document).on('click', '.workExperience-area .del', function(event) {
var target = $(event.target),
row = target.closest('.workExperience-template');
row.remove();
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea">
<div>Add bullet</div>
<textarea id="todolist" class="todolist" name="todolist" placeholder="Write something.." ></textarea>
</div>
<div class="hidden">
<div class="workExperience-template">
<div class="textarea">
<div>Add bullet</div>
<textarea id="list" class="list" name="tata" placeholder="Write something.." ></textarea>
</div>
</div>
</div>
<div class="workExperience-area">
<button type="button" class="add buttonBlueAddField">Add New</button>
</div>
I create code for add new input with custom style but i need to change id number and "for" Tag value OnClick.
I need to add id="input-2" and for="input-2"
and in on click i need to add new html with id="input-3" and for="input-3"
This Code:
var maxSocial = 10,
socialWrapper = $("#socialWrapper"),
addSocial = $("#add-social"),
socialX = 1;
$(addSocial).click(function (e) {
e.preventDefault();
if (socialX < maxSocial) {
socialX++;
$(socialWrapper).append('<div class="inputbox"><div class= "inputbox-content"><input id="input-1" type="text" required /><label for="input-1">Social Link</label><span class="underline"></span></div></div>');
}
});
$(socialWrapper).on("click", ".remove-social", function (e) {
e.preventDefault();
$(this).parent('div').remove(); socialX--;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="socialWrapper">
<div class="inputbox">
<div class="inputbox-content">
<input id="input-1" type="text" required />
<label for="input-1">Social Link</label>
<span class="underline"></span>
</div>
</div>
</div>
<div class="social-add">
<a href id="add-social"><i class="fas fa-plus"></i> Add Social</a>
</div>
You want to create the id based off of the common string "input-" and append socialX.
$(addSocial).click(function (e) {
e.preventDefault();
if (socialX < maxSocial) {
socialX++;
var thisId = "input-" + socialX;
$(socialWrapper).append('<div class="inputbox"><div class= "inputbox-content"><input id="' + thisId + '" type="text" required /><label for="' + thisId + '">Social Link</label><span class="underline"></span></div></div>');
}
});
Working JSFiddle: https://jsfiddle.net/jennifergoncalves/7rLjf5b8/6/