different name for dynamically generated text field in jquery - javascript

This is a jquery to generate dynamic input text field in html.
TO give different name to each text field, 'num ' is incremented .
I even try ".attr('name', 'device' + num);"... But its not working .
$(document).ready(function() {
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
var num=0;
num++;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
**var fName = $("<input type=\"text\" class=\"fieldname\" name=\"' + num + '\" />");**
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
});
if 3 new text fields are generated now,
how can i add the value in each text field onkeyup

You override the num on each click, and messed up the string notations.
Put the num declartion outside the callback:
var num=0;
$("#add").click(function() {
var intId = $("#buildyourform div").length + 1;
num++;
$('<input type="text" class="fieldname" name="' + num + '" />');
A tip of the day, in javascript you can use ' and " for strings notations, you them both and you won't need to escape the other notation.

There is a syntax error in your code, you mess with single and double quotes...
Should be something like this
var fName = $('<input type="text" class="fieldname" name="' + num + '" />');
OR:
var fName = $("<input type=\"text\" class=\"fieldname\" name=\"" + num + "\" />");

Related

Create button and click handler with JQuery

Currently I am displaying a table of values, where the last column provides an "Edit" and "Delete" option. For simplicity, when they edit a row, I am just clearing each column's innerHTML and placing input fields there instead. I need to also replace the Edit/Delete links with Save/Cancel, however I need to create these buttons with JS/JQuery, attach click handlers to them append them to the innerHTML.
While I have found similar examples, I am not quite clear on how to accomplish this and would appreciate any help.
function editRecord(line)
{
var zone = "<?= $data['zone']; ?>";
// Store the original field values
var valueName = document.getElementById("entryName" + line).innerHTML;
var valueTTL = document.getElementById("entryTTL" + line).innerHTML;
var valueAddress = document.getElementById("entryAddress" + line).innerHTML;
// Replace existing row value with input fields to make edits
document.getElementById("entryName" + line).innerHTML = "<input type='text' value='" + valueName + "'>";
document.getElementById("entryTTL" + line).innerHTML = "<input type='text' value='" + valueTTL + "'>";
document.getElementById("entryAddress" + line).innerHTML = "<input type='text' value='" + valueAddress + "'>";
// Create Save button with click handler
// Create Cancel button with click handler
// Append these to the element below (replacing the Edit/Delete)
document.getElementById("entryOptions" + line).innerHTML = "<input type='button' value='Save'> <input type='button' value='Cancel'>";
}
After further tinkering, I managed to figure it out. Here is the working code should it end up helping anyone else.
function editRecord(line)
{
var zone = "<?= $data['zone']; ?>";
// Store the original field values
var originalName = document.getElementById("entryName" + line).innerHTML;
var originalTTL = document.getElementById("entryTTL" + line).innerHTML;
var originalAddress = document.getElementById("entryAddress" + line).innerHTML;
// Replace existing row value with input fields to make edits
document.getElementById("entryName" + line).innerHTML = "<input type='text' value='" + originalName + "'>";
document.getElementById("entryTTL" + line).innerHTML = "<input type='text' value='" + originalTTL + "'>";
document.getElementById("entryAddress" + line).innerHTML = "<input type='text' value='" + originalAddress + "'>";
document.getElementById("entryOptions" + line).innerHTML = "";
var saveButton = $('<button/>', {
text: "Save",
id: 'btn_Save' + line,
click: function ()
{
// Save the changes
}
});
var cancelButton = $('<button/>', {
text: "Cancel",
id: 'btn_Cancel' + line,
click: function ()
{
document.getElementById("entryName" + line).innerHTML = originalName;
document.getElementById("entryTTL" + line).innerHTML = originalTTL;
document.getElementById("entryAddress" + line).innerHTML = originalAddress;
}
});
$("#entryOptions" + line).append(saveButton);
$("#entryOptions" + line).append(cancelButton);
}

Filter dynamically added file upload fields for specific file types

I am adding file upload fields using JavaScript.
I need to filter the files so that only PDF files can be uploaded.
Here is what I have so far :
function AddFileUpload() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
'" type="file" />' +
'<input id="Button' + counter + '" type="button" ' +
'value="Remove" onclick = "RemoveFileUpload(this)" />';
document.getElementById("FileUploadContainer").appendChild(div);
counter++;
}
function RemoveFileUpload(div) {
document.getElementById("FileUploadContainer").removeChild(div.parentNode);
}
WARNING: Doing this check with Javascript is very, VERY bad. It can be manipulated very easily, and it is definitely not recommended. At all. By anyone. Don't do it.
function AddFileUpload() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + counter + '" name = "file' + counter +
'" type="file" accept="application/pdf"/>' +
'<input id="Button' + counter + '" type="button" ' +
'value="Remove" onclick = "RemoveFileUpload(this)" />';
document.getElementById("FileUploadContainer").appendChild(div);
counter++;
}
function RemoveFileUpload(div) {
document.getElementById("FileUploadContainer").removeChild(div.parentNode);
}
To accept a certain type of file, look into MIME file types and the accept attribute. Example site: http://www.w3schools.com/tags/att_input_accept.asp

jquery val() coming up as blank after .each()

I'm iterating with
function editRow(a) {
$("td").each(function () {
alert($(this).val())
});
}
which iterates through
$("tbody").append(
"<tr id = '" + trId + "'>" +
"<td name = 'nameRow' id = 'name" + idCt + "' value = 'test' > <strong>" + name + "</strong> </td>" +
"<td name = 'maxRow' id = 'max" + idCt + "' value = '" + max + "'>" + max + "</td>" +
"<td name = 'setRow' id = 'sets" + idCt + "' value = '" + sets + "'>" + sets + "</td>" +
"<td name = 'repRow' id = 'reps" + idCt + "' value = '" + reps + "'>" + reps + "</td>" +
"<td name = 'restRow' id = 'rest" + idCt + "' value = '" + rest + "'>" + rest + "</td>" +
"<td id = 'link" + idCt + "'><a href='#' onclick='return deleteRow(" + trId + ");' >Remove</a>" +
" | <a href='#' onclick='return editRow(" + idCt + ");'>Edit</a></td>" +
"</tr>"
);
The alter($(this).val()) is coming up the correct amount of times, but it is always just blank (not undefined)).
I know it's not that readable, but does anyone see an error?
Thanks!
.val() is a method which is only defined for input elements. Normal HTML elements don't have a value. You should use .html() or .text() to get the content of those elements
function editRow(a) {
$("td").each(function () {
alert($(this).text())
});
}
You should define non-standard attributes (like value for <td>) using the data- prefix
<td data-value="whatever">...</td>
Then you can use jQuery's .data() method to access those attributes
var tdDataValue = $(this).data('value');
The problem is that "td" - elements haven't values. They have inner HMTL. If you want to get td's content, you need to use $(this).html()
function editRow(a) {
$("td").each(function () {
alert($(this).html())
});
}
The val method is usually reserved for input tags. For td you can do either:
$(this).text();
or
$(this).attr('value');
simply try something like this
function editRow(a) {
$("td").each(function () {
alert(this.innerText);// reading inner text
alert($(this).attr('value'));// reading value attribute
});
}

Show div and create elements any time a checkbox is checked

I'm trying to show div#options_holder and create some elements inside it by using this code:
var counter = 1;
$('#choices').on("change", ":checkbox", function(e) {
var theName = $(this).attr('name');
var theID = $(this).attr('id');
var isChecked = $(this).prop("checked");
var input, button, append = "";
$("#options_holder").show();
input = capitalize(theName) + '<input name="input_' + theName + '[]" id="' + theID + '" value="" placeholder="' + capitalize(theName) + '" />';
button = '<button type="button" class="add-size">Nuevo ' + capitalize(theName) + '</button>';
append = counter === 1 ? input += button : input;
$("#options_holder").append(append);
counter++;
console.log("You changed " + theName + ", with an id of " + theID + ", its checked property is: " + isChecked);
});
But it does not work since div#options_holder remains hidden and elements aren't created, is something wrong? It's supposed that those should happen any time I mark a checkbox, if I unmark in the other hand the process should be reverted meanind div#options_holder will be hidden and any element inside it should be destroyed, what's wrong?
Making sure that your selectors work and your IDs are correct are often easily overlooked. Glad we could help you find your typing mistake :-)
Working code fiddle: http://jsfiddle.net/pXJpr/
HTML:
<div id="choices">
<input type="checkbox" name="testName" id="testId" />
</div>
<div id="options_holder" style="display:none;">
</div>
JS:
var counter = 1;
$('#choices').on("change", ":checkbox", function(e) {
var theName = $(this).attr('name');
var theID = $(this).attr('id');
var isChecked = $(this).prop("checked");
var input, button, append = "";
$("#options_holder").show();
input = capitalize(theName) + '<input name="input_' + theName + '[]" id="' + theID + '" value="" placeholder="' + capitalize(theName) + '" />';
button = '<button type="button" class="add-size">Nuevo ' + capitalize(theName) + '</button>';
append = counter === 1 ? input += button : input;
$("#options_holder").append(append);
counter++;
console.log("You changed " + theName + ", with an id of " + theID + ", its checked property is: " + isChecked);
});
function capitalize(s) {
return s;
}

reload content not form for dropdowns

I am using a script to generate custom styled dropdowns out of my selects. Basically it creates a list out of the selects and hides the original select making it much easier to style than a <select> allows.
So the basic setup is like this
<div id="formdiv">
<form method="get" name="search" action="samepage">
inputs
</form>
content from form
I want the wrap section to be generated without refreshing the form part that way the dropdodwns dont keep disappearing and reappearing when the page loads.
here is my code for creating the dropdowns ( any performance tuning suggestions are welcome :) )
function createDropDown() {
var selects = $("select.createdrop");
var idCounter = 1;
selects.each(function() {
var dropID = "dropdown_" + idCounter;
var source = $(this);
var selected = source.find("option[selected]");
var options = $("option", source);
source.after('<dl id="' + dropID + '" class="dropdown"></dl>');
var imgtype = '<img src="images/transpx.gif" class="srcimg '+selected.text().toLowerCase()+'" />'
$("#" + dropID).append('<dt>'+imgtype + selected.text() + '<span class="value">' + selected.val() + '</span><img src="images/select-down-arrow.png" class="down-arrow" /></dt>');
$("#" + dropID).append('<dd><ul></ul></dd>');
options.each(function() {
$imgclasstxt = $(this).text().toLowerCase();
var srcimg = '<img src="images/transpx.gif" class="srcimg '+$imgclasstxt+'" width="10px"/>';
$("#" + dropID + " dd ul").append('<li>'+srcimg + $(this).text() + '<span class="value">' + $(this).val() + '</span></li>');
});
idCounter++;
});
}
and here is the code for selecting an option and submiting the form
$(".dropdown dd ul a").click(function() {
var dl = $(this).closest("dl");
var dropID = dl.attr("id");
var text = $(this).attr("id");
var source = dl.prev();
var typeicon = '<img src="images/transpx.gif" class="srcimg '+text.toLowerCase()+'" />'
$("#" + dropID + " dt a").html(typeicon+''+text+'<img src="images/select-down-arrow.png" class="down-arrow" />');
$("#" + dropID + " dd ul").hide();
var value = $(this).children("span.value").html();
source.val(value);
$(this).addClass('selected');
$('body').css('cursor','wait');
document.search.submit();
});
You're modifying the DOM a lot with this code. If it's slow, try dropping as many DOM changes as possible into a string first and then inserting it. You're also doing repeat selects in some places. Example:
$("#" + dropID).append('<dt>'+imgtype + selected.text() + '<span class="value">' + selected.val() + '</span><img src="images/select-down-arrow.png" class="down-arrow" /></dt>');
$("#" + dropID).append('<dd><ul></ul></dd>');
Could change to:
var html = '<dt>'+imgtype + selected.text() + '<span class="value">' + selected.val() + '</span><img src="images/select-down-arrow.png" class="down-arrow" /></dt><dd><ul></ul></dd>'
$("#" + dropID).append(html);

Categories