I have an input-text. If you type something, the text appears below (see code snippet).
Now, I need to do the same with a previous step: clicking a button (preferably a checkbox) to append/remove all. Here is my failed idea: DEMO (it appends the input text, but when you type, text won't apear below like it does on my code snippet).
I feel like the function to add text below does not work because there is a problem with selecting the appended element. How do I do this?
Any more simple idea to do this would be great
var name1 = document.getElementById('name');
name1.addEventListener('input', function() {
var result = document.querySelector('.X');
console.log(this.value );
result.innerHTML = this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>What is your name? </label><input type="text" id="name">
<p>Your name is: <span class="X"></span></p>
Put your first part of the snippet into appending logic while clicking the add button. As in your codes, the input box is appended to the document after its listener being attached.
if (!added) {
$content = $(NewContent).appendTo('.firstappend');
// attach listener after input box actually exists!
var name1 = document.getElementById('A');
name1.addEventListener('input', function() {
var result = document.querySelector('span.Y');
console.log(this.value );
result.innerHTML = this.value;
});
}
$(function() {
let NewContent = '<div class="added">' +
'<p>' +
'<label>What is your name? </label>' +
'<input type="text" id="A">' +
'</p>' +
'<p>Your name is: <span class="Y"></span></p>' +
'</div>';
$(".addremove").on('click', function() {
if ($(".added").length) {
$(".added").remove();
} else {
$(".firstappend").append(NewContent);
}
});
$(document).on('change keyup', '#A', function(event) {
$("span.Y").html($(event.currentTarget).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toadd">
<button type="button" class="addremove">Do you have a name?</button>
</div>
<div class="firstappend"></div>
as from the DEMO you included,
appended elements to document cannot be invoked explicitly, since you're using jQuery, you can do this
$(document).on('change keyup', '#A', function(event) {
$("span.Y").html($(event.currentTarget).val());
});
Related
I am trying to display the appropriate input for the correct icon displayed. I structured all of my elements as an object and created the key to match the id of the matching icon. I then created the element to the appropriate input to match.
My issue is, when I click on the icon, nothing outputs. I do not get any errors, my console.log is showing me the looped results.
Does anyone see what I am doing wrong? If you click on the blue Zillow icon, then the input with the placeholder "Zillow" should appear. The same thing with the Realtor one, except it be associated with the Realtor input/icon.
var reviewInputs = {
"zillow-review": '<input type="url" id="zillow-input" placeholder="Zillow">',
"realtor-review": '<input type="url" id="realtor-input" placeholder="Realtor">'
};
$('.review-icon-select').click(function() {
$('#review-site-edit-wrap').addClass('active');
var reviewIconClicked = $(this).attr('id');
$.each(reviewInputs, function(key, element) {
console.log('key: ' + key + '\n' + 'value: ' + element);
if (reviewIconClicked == reviewInputs) {
reviewInputs.forEach(function(site) {
$('#review-site-edit').append.reviewInputs[element];
});
}
});
//$(reviewIconClicked':contains("SomeText")').each(function () {
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="review-icon-select" id="zillow-review"><img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow"></li>
<li class="review-icon-select" id="realtor-review"><img src="https://s3.amazonaws.com/retain-static/www/realtor.com.png" alt="Realtor.com"></li>
<div id="review-site-edit"></div>
You just need to check if the id of the clicked element is a property of your object.
No loop needed.
var reviewInputs = {
"zillow-review": '<input type="url" id="zillow-input" placeholder="Zillow">',
"realtor-review": '<input type="url" id="realtor-input" placeholder="Realtor">'
};
$('.review-icon-select').click(function() {
//$('#review-site-edit-wrap').addClass('active'); // Maybe used...
var reviewIconClicked = $(this).attr('id');
if(reviewInputs.hasOwnProperty(reviewIconClicked)){
$('#review-site-edit').find("input[type='url']").remove();
$('#review-site-edit').append(reviewInputs[reviewIconClicked]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="review-icon-select" id="zillow-review"><img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow"></li>
<li class="review-icon-select" id="realtor-review"><img src="https://s3.amazonaws.com/retain-static/www/realtor.com.png" alt="Realtor.com"></li>
<div id="review-site-edit"></div>
Instead of using
if (reviewIconClicked == reviewInputs) {
try
reviewInputs['reviewIconClicked']
I am using dynamically added textbox (class name is myclass) and need to validate all textboxs. My code is here. This coding is working for only first textbox. If i add new text box, the code is not working. I don't know how to write the event binding in each(function())
$('.myclass').each(function() {
$(this).rules('add', {
required: true,
messages: {
required: "Required input"
}
});
});
HTML CODE
<div id="TextBoxesGroup">
<div id="Div1">
<input type='text' value ='' class='myclass' />
</div>
</div>
<input type="button" name="add" id="addButton" value="Add">
$(document).ready(function(){
var counter=2;
$("#addButton").click(function() {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + counter);
var texthtml = "";
texthtml += "<input type='text name='fieldname[]' class='myclass' value='' />";
newTextBoxDiv.after().html(texthtml);
newTextBoxDiv.appendTo("TextBoxesGroup");
});
The each function can only be applied to elements already existing in you DOM. Elements which are added later will not be affected. You need to apply rules() to them after they are created. Like this:
$("#addButton").click(function() {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Div' + counter);
...
$( newTextBoxDiv ).rules( ... );
});
Ps: to get more readable code, try to encapsulate your functionality into functions. Like
function addRulesToElement( element ) {
$( element ).rules( ... );
}
You can then call this function from your each() loop and the #addButton click-handler without repeating yourself.
I'm trying to write text from an input to a div on keyup with javascript and jquery by checking if the current value of the input is the same as the previous value of the input. This works fine except when you hold down the backspace key until all of the text is gone from the input. In this case it doesn't update the variables that I'm using for some reason. This happens in all browsers and only if all of the text is deleted, also only if the backspace key is used (instead of another key)
I'm pretty new at javascript so any tips are appreciated :)
javascript:
fsa = (function() {
var inputId = "";
var sigId = "";
function resetOnFocus() {
inputId = document.activeElement.id;
sigId = "sig-" + document.activeElement.id;
}
function getText() {
lastentry = $("#" + inputId).val();
}
function writeText() {
if ($("#" + inputId).val() != lastentry) {
document.getElementById(sigId).innerHTML = 'current entry :' + $("#" + inputId).val() + '</br>last entry: ' + lastentry;
}
}
return {
resetOnFocus: resetOnFocus,
getText: getText,
writeText: writeText
}
})();
//call the functions
//clear variables on focus
$('input').focus(function() {
fsa.resetOnFocus();
});
//get input value on key press
$('input').keydown(function() {
fsa.getText();
});
//prints input value on keyup if input value is new
$('input').keyup(function() {
fsa.writeText();
});
and html:
<input id="first-name" class="i1" />
<div id="sig-first-name" class="o1" /></div>
<input id="last-name" class="i2" />
<div id="sig-last-name" class="o2" /></div>
I'm looking for help to rename the name attributes of some fields created dynamically.
Now, my code assigns new values to the added fields (it increments according to the length of the div) but the problem appears when I delete a field, I don't know how to rename the remaining according to the number of fields deleted.
jQuery:
$(document).ready(function () {
$("#add").click(function () {
var intId = $("#reglas div").length;
var fieldWrapper = $('<div></div>', {
class: 'fieldwrapper',
id: 'field' + intId
});
var fPath = $('<input align="left" type="text" placeholder="Path" class="reglas_wrapper" id="path" name="field1_' + intId + '" required /> ');
var fTTL = $('<input type="text" class="reglas_wrapper" placeholder="TTL" id="ttl" name="field2_' + intId + '" required />');
var removeButton = $('<input align="right" type="button" id="del" class="remove" value="-" /> <br><br>');
removeButton.click(function () {
$(this).parent().remove();
});
fieldWrapper.append(fPath);
fieldWrapper.append(fTTL);
fieldWrapper.append(removeButton);
$("#reglas").append(fieldWrapper);
});
$("#cache").each(function () {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
});
$('#formsite').on('submit', function (e) {
//prevent the default submithandling
e.preventDefault();
//send the data of 'this' (the matched form) to yourURL
$.post('siteform.php', $(this).serialize());
});
HERE'S MY FULL CODE: http://jsfiddle.net/34rYv/131/
You will want an incrementor. Check out this updated fiddle.
Here is the beginning of the code:
$(document).ready(function() {
var myIncr = 0;
$("#add").click(function() {
myIncr++;
var intId = myIncr;
You can add a class or id to each input field, and then depending on that class or id add the name as
<input type="text" class="something" />
Use this jQuery:
var classval = $('input[type=text]').attr('class'); // get class..
// now add the name as
$(this).attr('name', classval);
You can have as many inputs, they will be added the name depending on their class or id!
So even if the input fields are deleted, you will still have the class attributes in the control!
I have one question. Is possible delete <span> element added with javascript append?
When i try remove added span then nothing happens.
Like this:
<script type="text/javascript">
$(document).ready(function(){
$('#SelectBoxData span').click(function(){
var StatusID = this.id;
var StatusIDSplit = StatusID.split("_");
var StatusText = $('#SelectBoxData #' + StatusID).text();
$("#SelectBox").append('<span id=' + StatusID + '>' + StatusText + '</span>');
$("#SelectBoxData #" + StatusID).remove();
InputValue = $("#StatusID").val();
if(InputValue == ""){
$("#StatusID").val(StatusIDSplit[1]);
}
else{
$("#StatusID").val($("#StatusID").val() + ',' + StatusIDSplit[1]);
}
});
$('#SelectBox span').click(function(){
var StatusID = this.id;
$("#SelectBox #" + StatusID).remove();
});
});
</script>
<div id="SelectBoxBG">
<div id="SelectBox"><div class="SelectBoxBtn"></div></div>
<div id="SelectBoxData">
<span id="StatusData_1">Admin</span>
<span id="StatusData_2">Editor</span>
<span id="StatusData_4">Test 1</span>
<span id="StatusData_6">Test 2</span>
</div>
<input type="hidden" id="StatusID" />
</div>
Please help me.
Thanks.
Yes, you can delete them. However, you can't add click event handlers to them before they exist. This code:
$('#SelectBox span').click(function(){
var StatusID = this.id;
$("#SelectBox #" + StatusID).remove();
});
will only add a click event handler to <span> elements inside of #SelectBox at the time the code is run (so, based on your provided HTML, zero elements). If you want the event handler to react to dynamically added elements then you need to use a technique called event delegation, using the .on() function:
$('#SelectBox').on('click', 'span', function() {
$(this).remove(); // equivalent to the code you had before
});