Why when I add the same html code with javascript jquery I loose margin ?
Try this jsfiddle and you will understand me.
jQuery
function addphone() {
$( "#phonedetails" ).append( '<div >' +
'<label>phone :</label>' +
'<input type="text" /> ' +
'<input type="button" onclick="addphone()"/>' +
'</div>');
}
HTML
<div id="phonedetails">
<div>
<label>phone :</label>
<input type="text" />
<input type="button" onclick="addphone();"/>
</div>
</div>
It isn't a margin, it is a space (i.e. what you get when you press the space bar) between the label and the input. It is missing in the code generated from JS.
Change:
'<label>phone :</label>' +
To:
'<label>phone :</label> ' +
// ^ space here
You aren't losing margins, you're losing whitespace:
http://jsfiddle.net/3md9S/2/
$( "#phonedetails" ).append( '<div >' +
'<label>phone :</label> ' + // SINGLE SPACE ADDED HERE
'<input type="text" /> ' +
'<input type="button" onclick="addphone()"/>' +
'</div>');
That is just a white space in your html.
Also you don't have to write html again to append , you can clone it -
$( "#phonedetails" ).append($('#phonedetails div').eq(0).clone());
Demo --> http://jsfiddle.net/3md9S/7/
Related
I am doing a templating platform and I am using material design for the looks.
I just started coding the part where inputs are injected to the form. The thing is that I just started injecting text inputs and it looks as it should but the onclick css is not working! (The onclick css makes a blue line expand from the center of the text input, telling that the input is in focus)
This is how I am injecting the html:
document.getElementById("smallTextField").onclick = function () {
let div = document.getElementById("formContainer")
div.insertAdjacentHTML("afterbegin", '<div class="col-sm-3">\n' +
' <div class="form-group">\n' +
' <div class="form-line" id="test">\n' +
' <input type="text" class="form-control" placeholder="col-sm-3">\n' +
' </div>\n' +
' </div>\n' +
' </div>');}
I hope you can understand my problem :/
If you are able to use jQuery, one option you have is to utilize the $element.prepend() function after binding to the click event.
$('#smallTextField').on('click', function () {
let $div = $('#formContainer');
$div.prepend(
'<div class="col-sm-3">\n' +
' <div class="form-group">' +
' <div class="form-line" id="test">' +
' <input type="text" class="form-control" placeholder="col-sm-3" />' +
' </div>' +
' </div>' +
'</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="smallTextField" placeholder="smallTextField" />
<div id="formContainer"></div>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
This is my HTML form:
<form class="access_form" action="/elements/login.php" method="POST">
<div class="logo">
<img src="/img/brand/logo.png" alt="logo" class="brand">
</div>
<div class="form">
<div class="input_container">
<input type="text" placeholder="Username" name="username" required>
<input type="password" placeholder="Password" name="password" required>
<button type="submit" name="login" id="submit">Login</button>
<p id="alert"></p>
<h5 class="linked_text_forgot"><a class="linked_text_forgot" href="javascript:">Forgot your password?</a></h5>
</div>
<div class="small_container">
<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form('sign_up');">Sign up</a></h5>
</div>
</div>
</form>
This is my javascript:
// form switching function to login or signup form
function switch_form(type) {
if (type == "login") {
$( 'form.access_form' ).replaceWith(login);
} else if (type == "sign_up") {
$( 'form.access_form' ).replaceWith(sign_up);
}
return false;
}
$( document ).ready(function() {
$(".access_form").submit(function(event){
event.preventDefault();
});
});
// sign up form
var sign_up = '<form class="access_form" action="/elements/signup.php" method="POST">' +
'<div class="logo">' +
'<img src="/img/brand/logo.png" alt="logo" class="brand">' +
'</div>' +
'<div class="form">' +
'<div class="input_container">' +
'<input type="text" placeholder="Full name" name="fullname">' +
'<input type="text" placeholder="Email" name="email" id="user_email">' +
'<input type="text" placeholder="Username" name="username" id="user_uid">' +
'<input type="password" placeholder="Password" name="password" id="user_pswd">' +
'<button type="submit" name="sign_up" id="submit">Sign Up</button>' +
'<p class="alert"></p>' +
'</div>' +
'<div class="small_container">' +
'<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form("login");">Login</a></h5>' +
'</div>' +
'</div>' +
'</form>';
// login form
var login = '<form class="access_form" action="/elements/login.php" method="POST" id="login">' +
'<div class="logo">' +
'<img src="/img/brand/logo.png" alt="logo" class="brand">' +
'</div>' +
'<div class="form">' +
'<div class="input_container">' +
'<input type="text" placeholder="Username" name="username" required>' +
'<input type="password" placeholder="Password" name="password" required>' +
'<button type="submit" name="login">Login</button>' +
'<p class="alert"></p>' +
'<h5 class="linked_text_forgot"><a class="linked_text_forgot" href="javascript:">Forgot your password?</a></h5>' +
'</div>' +
'<div class="small_container">' +
'<h5 class="linked_text_signup">Click here to <a class="linked_text_signup" href="" onclick="return switch_form("sign_up");">Sign up</a></h5>' +
'</div>' +
'</div>' +
'</form>';
So from my previous question i've found out that preventdefault works on the normally loaded html elements when the page starts however if you look at the javascript im loading in a signup form without reloading the page using jquery. I think that's why the preventdefault is not working on the html elements that are loaded on the page.
any suggestions for how i could go about this?
Basically Jquery attaches event handlers to elements only once, when the page is first loaded. Any elements that are created dynamically (don't exist when the page first loads), will need to have the event handlers manually added to them or you can attach the event handler to an element higher in the DOM that existed from page load. In your example you can attach the event handler to the document, which exists the entire time, and tell it to look for submit events from .access_form elements.
The answer on this page explains it a little better.
Click event doesn't work on dynamically generated elements
$( document ).on('submit','.access_form', function(event){
event.preventDefault();
});
i have a conflict with jquery and can not find a correct solution, every time something breaks, i have a form that i add one input and one select at the time dynamically, by default the html form have on input and one select, and after adding new fields if is required.
The problem is that the fields are added dinamically with jquery and can be removed as well, but if you add a few new fields and remove just the last one the form will not be working anymore, can not be added new fields, but if you remove a field from the middle than it is fine is working.
I need to fix if you remove even the last element to be abble to add again new fields.
Please see the example below.
HTML
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<span class="multiple-field-container-add">
<span class="content-panel-flat-raw-double-sub">
<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">
<label>IBAN</label>
<input class="form-control" id="0-iban" name="0-iban" type="text" value="">
</span>
<span class="content-panel-flat-raw-double-sub-raw">
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<label>Currency</label>
<select class="select select2-hidden-accessible" id="0-currency" name="0-currency" tabindex="-1" aria-hidden="true"><option value="-">Select currency</option><option value="USD">USD</option><option value="EUR">EUR</option></select>
</span>
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<b><i class="icon-plus2"></i></b> Add new
</span>
</span>
</span>
</span>
</form>
Jquery
var next = 1;
$(".multiple-add-input").click(function(e){
e.preventDefault();
var addto = "#" + next + "-iban";
next = next + 1;
var newIn = '<span class="content-panel-flat-raw-double-sub">'+
'<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">'+
'<label>IBAN</label>'+
'<input class="form-control" id="' + (next) + '-iban" name="' + (next) + '-iban" type="text" value="">'+
'<div class="form-control-feedback">'+
'<i class="icon-font-size"></i>'+
'</div>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw">'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<label>Currency</label>'+
'<select name="' + (next) + '-currency" id="' + (next) + '-currency" class="select">'+
'<option value="EUR">EUR</option>'+
'<option value="USD">USD</option>'+
'</select>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<div class="btn bg-teal-400 btn-labeled btn-custom-width remove-me" onclick="_multiple_field_remove_('+ (next) +')"><b><i class="icon-cancel-square2"></i></b> Remove</div>'+
'</span>'+
'</span>'+
'</span>';
alert(next);
var newInput = $(newIn);
$(addto).parent().parent().after(newInput);
$('.select').select2();
_multiple_field_remove_ = function(id){
alert(id);
$('#'+ id +'-iban').parents('span.content-panel-flat-raw-double-sub').remove();
};
ionluchian
the reason cause the issue,it's the number next.
when you delete the last element, and you click add button next,
var addto = "#" + next + "-iban";
...
// can't find item 'addto',so it's not work
$(addto).parent().parent().after(newInput);
this code can't find the last items at all.
Please use above instead:
change: $(addto).parent().parent().after(newInput);
to : $('.multiple-field-container-add').append(newInput)
This is not the best looking end result, but its working
$(function(){
addElement();
});
function addElement(){
$(".multiple-add-input").on('click', function(e){
e.preventDefault();
$(this).off('click');
var next = parseInt($('.iban-input').last().attr('id'));
var addto = "#" + next + "-iban";
next++;
var newIn = '<span class="content-panel-flat-raw-double-sub">'+
'<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">'+
'<label>IBAN</label>'+
'<input class="form-control iban-input" id="' + (next) + '-iban" name="' + (next) + '-iban" type="text" value="">'+
'<div class="form-control-feedback">'+
'<i class="icon-font-size"></i>'+
'</div>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw">'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<label>Currency</label>'+
'<select name="' + (next) + '-currency" id="' + (next) + '-currency" class="select">'+
'<option value="EUR">EUR</option>'+
'<option value="USD">USD</option>'+
'</select>'+
'</span>'+
'<span class="content-panel-flat-raw-double-sub-raw-double-raw">'+
'<div class="btn bg-teal-400 btn-labeled btn-custom-width remove-me" id="remove-'+ (next) +'"><b><i class="icon-cancel-square2"></i></b> Remove</div>'+
'</span>'+
'</span>'+
'</span>';
// Add element
$(addto).parent().parent().after(newIn);
// Bind removing
$('.remove-me')
.off('click')
.on('click', function(){
removeElement($(this).attr('id'));
});
// Bind adding
addElement();
});
}
function removeElement(id){
$('#'+id).parent().parent().parent().remove();
}
.content-panel-flat-raw-double-sub{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
<span class="multiple-field-container-add">
<span class="content-panel-flat-raw-double-sub">
<span class="content-panel-flat-raw-double-sub-raw has-feedback has-feedback-left">
<label>IBAN</label>
<input class="form-control iban-input" id="0-iban" name="0-iban" type="text" value="">
</span>
<span class="content-panel-flat-raw-double-sub-raw">
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<label>Currency</label>
<select class="select select2-hidden-accessible" id="0-currency" name="0-currency" tabindex="-1" aria-hidden="true"><option value="-">Select currency</option><option value="USD">USD</option><option value="EUR">EUR</option></select>
</span>
<span class="content-panel-flat-raw-double-sub-raw-double-raw">
<b><i class="icon-plus2"></i></b> Add new
</span>
</span>
</span>
</span>
</form>
EDIT: Just so I asks questions better next time. I got a -1 what did I do wrong?
I'm adding quite a lot of html dynamically and want to be able to remove them also one by one.
Below the JQuery. I want to be able to remove the whole $("#row1' + (counter) + '") div including all divs in it by clicking the remove button under it.
Here's a fiddle: http://jsfiddle.net/FullContCoder/Sf9r5/1/
Thanks a lot in advance!
$(document).ready(function() {
var counter = 0;
$(".addButton").click(function() {
var test = $( '<div id="row1' + (counter) + '" class="row"><div class="col-md-2"><p><small>Placement Name:</small></p><input id="inputPlacement' + (counter) + '" type="text" class="form-control input-sm" name="placementName" placeholder="ex: Homepage">' +
'</div><div class="col-md-3"><p><small>URL:</small></p><input id="inputURL" type="url" class="form-control input-sm" name="url" placeholder="ex: http://www.allure.com"></div>' +
'<div class="col-md-2"><div class="row"><div class="col-md-12"><p><small>Select a Date and Time:</small></p></div></div><div class="row"><div class="col-md-12">' +
'<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"><input class="span2" size="16" type="text" value="12-02-2012" readonly=""><span class="add-on"><i class="icon-calendar"></i>' +
'</span></div></div></div><div class="row"><div class="input-append bootstrap-timepicker"><input id="timepicker1" type="text" class="input-small"><span class="add-on">' +
'<i class="glyphicon glyphicon-time"></i></span></div></div></div><div class="col-md-2"><p><small>Recurring:</small></p><select id="recurring" class="form-control input-sm">' +
'<option name="daily" value="daily">Daily</option><option name="weekly" value="weekly">Weekly</option><option name="month" value="month">Month</option></select></div>' +
'<div class="col-md-2"><p><small>Day of Week:</small></p><div class="row"><div class="col-md-6"><label class="checkbox-inline"><input id="mon" name="test" type="checkbox" value="1"> Mon</label>' +
'</div><div class="col-md-6"><label class="checkbox-inline"><input id="fri" name="test" type="checkbox" value="1"> Fri</label></div></div><div class="row"><div class="col-md-6">' +
'<label class="checkbox-inline"><input id="tue" name="test" type="checkbox" value="1"> Tue</label></div><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="sat" name="test" type="checkbox" value="1"> Sat</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="wen" name="test" type="checkbox" value="1"> Wed</label></div><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="sun" name="test" type="checkbox" value="1"> Sun</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="thu" name="test" type="checkbox" value="1"> Thu</label></div></div></div><div class="col-md-1"><p><small>Remove:</small></p>' +
'<button type="button" class="removeButton btn btn-default btn-sm"><span class="glyphicon glyphicon-minus-sign"></span></button></div></div>' )
$('.removeButton').click(function() {
$("#row1' + (counter) + '").remove();
});
counter++;
$("#row1").after(test);
});
});
You should use event delegation to add events to dynamically created elements. And use .closest() to get the first element that matches the selector. Try this:
$(document).on('click','.removeButton',function() {
$(this).closest("div.row").remove();
});
You need to move your remove button click handler outside of add button click handler.
DEMO
You can try it.
$(document).on('click', '.removeButton', function(){
$('#row1' + counter).remove();
});
1) You need to use event delegation here to bind click event to your button since it has been added dynamically to the DOM.
2) Use .closest() to remove the closest matching ancestor .row and remove redundant counter variable here:
3) You also need to move your click handler of remove button outside of the click handler of the add button.
Final code should look something like this:
$(document).ready(function () {
$(".addButton").click(function () {
var test = .....
$("#row1").after(test);
});
$('.removeButton').click(function () {
$(this).closest(".row").remove();
});
});
Updated Fiddle
I'm trying to create a simple form where people input in some values and on submit auto generates the code below the form. Which then they can copy to use.
i.e.
Input 1 width(px) - 200
Input 2 height(px) - 300
Input 3 content - Hello world
Submit button
[code to copy]
[div width="200px" height="300px"]Hello world[/div]
[/code to copy]
This can be done in real time, no need to submit.
Here: http://jsfiddle.net/NzFeb/
$("input").keyup(function() {
$("#result").text(
'<div width="' + $("#width").val() +
'px" height="' + $("#height").val() +
'px">' + $("#content").val() +
'</div>');
});
To simplify the code i used the library jQuery.
jQuery site
How to set up jQuery in your site
Try:
Width: <input id="width" type="text" /> <br/><br/>
Height: <input id="height" type="text" /> <br/><br/>
Content: <input id="content" type="text" /><br/><br/>
<button id="go">Go</button><br/><br/>
<textarea id="code" cols="30" rows="10" ></textarea>
document.getElementById("go").onclick = function() {
document.getElementById("code").innerHTML = "<div style='width:" + document.getElementById("width").value+ "; height:" + document.getElementById("height").value + ";'>" + document.getElementById("content").value + "</div>";
};
as seen here: http://jsfiddle.net/69q57/13/