Develop Reference

Jquery code doesnt work on html output from Javascript

I have this Jquery function to mask my textbox:
jQuery(function($){ //Mask textbox #hour with placeholder
$("#hour").mask("9:99",{placeholder:"0"});
$("#hourInTable").mask("9:99",{placeholder:"0"});
});
Works perfectly with this html code:
But when I try to do it in the textbox that has the ID hourInTable outputted by Jquery it doesnt mask anything:
jqTds[2].innerHTML = '<input type="text" name="hourInTable" id="hourInTable" value="00:00">';
This above code is called after a button press and the textbox hourInTable is placed somewhere on the page.
Placed this code direct into my html:
<input type="text" name="hourInTable" id="hourInTable" value="00:00">
And it worked, so its due to the html output in JS.
Thanks in advance.

Most likely it happens because when jQuery does the masking, the input is not yet present. Give the function a name and call it after you are sure that the innerHTML is placed.

try something like this
jqTds[2].innerHTML = '<input type="text" name="hourInTable" id="hourInTable" value="00:00">';
// call after text box is added
$("#hourInTable").mask("9:99",{placeholder:"0"});
because #hourInTable is not present on DOM ready so it doesn't apply mask on it
call masking function after your dynamically created input is added

Add the masking code in function. And call it on button click which adds dom <input type="text" name="hourInTable" id="hourInTable" value="00:00"> in page.

FORM looks empty according to DOM-inspector

I have an issue with an web app im working on. The input-fields in the form is added by jQuery. My form looks like this in the HTML-editor:
<form id="profile" method="post" action="Profile/UpdateProfile">
<tr><td><b>Namn:</b></td><td><parameter name="Name" class="transform">#ViewBag.Name</parameter></td></tr>
<tr><td><b>Address:</b></td><td><parameter name="Address" class="transform">#ViewBag.Address</parameter></td></tr>
<tr><td><b>Postaddress:</b></td><td><parameter name="ZIP" class="transform">#ViewBag.ZIP</parameter></td></tr>
<tr><td><b>Personnummer:</b></td><td><parameter name="Pnumber" class="transform">#ViewBag.Pnumber</parameter></td></tr>
</form>
But it appears like this in the DOM-inspector:
<form id="profile" method="post" action="Profile/UpdateProfile"></form>
<tbody><tr><td><b>Namn:</b></td><td><parameter name="Name" class="transform">Anton Gildebrand</parameter></td></tr>
<tr><td><b>Address:</b></td><td><parameter name="Address" class="transform"></parameter></td></tr>
<tr><td><b>Postaddress:</b></td><td><parameter name="ZIP" class="transform">0</parameter></td></tr>
<tr><td><b>Personnummer:</b></td><td><parameter name="Pnumber" class="transform"></parameter></td></tr>
</tbody>
It may look weird that i have no inputs, but when the user presses an edit-button, the "parameter"-tag transforms into textinputs using this javascript:
$('#' + id + ' .transform').each(function (index) {
var val = $(this).html();
$(this).html('');
var tag = $(this).parent().html();
var newTag = tag.replace('<parameter', '<input type="text" value="' + val + '"');
newTag = newTag.replace('</parameter', '</input');
$(this).parent().html(newTag);
});
As you can see the "parameter"-tags isn't wrapped by the form in the DOM-inspector, and nothing is posted (i debugged using Fiddler) to the server. How do i solve it?

Wrap the form around the entire table.
You can't put forms inside a table element but outside a table cell. The result you see if the browser trying to perform error recovery. It is usually a good idea to make use of a validator (although you need to run it on the markup you intend to generate if you are generating it using JS).
(Also, use css for layout and use label elements instead of bold elements).

How to create and remove an HTML hidden field using jQuery?

First of all here is my code so that you can test it to see what's wrong: JSFiddle
I want to create a new hidden field every time the user selects from the left <select> element and remove / destroy the hidden field when the user clicks the right <select> element.
I used the jQuery command $("<input type='hidden' value=selectedAddFootballPlayerId>"); but when I checked of Firebug I can't see any hidden field being created. For removal of the hidden field I really don't know.

For this you can use .append().
$("body").append("<input type='hidden' value=selectedAddFootballPlayerId>");
For removal, use .remove().
$("input[type='hidden']").remove();
Be careful when using my example, as it'll remove all form elements that are hidden. If you want more prescision, you can assign an id value to the hidden input and then call that as your selector in the second example.

To create -
var $ip = $('<input>').attr({
type: 'hidden',
id: 'yourid',
name: 'yourname',
value: 'yourvalue'
})
$(ip).appendTo('body');
Then to remove -
$ip.remove();

I think you are confused when defining the selector or where you want to display your new item. Try with this (I use text inputs):
http://jsfiddle.net/Lzw4e/6/

You have to append the field:
$("<input type='hidden' value=selectedAddFootballPlayerId>").appendTo('#someSelector');

Working version
http://jsfiddle.net/Lzw4e/7/
Changes
1
$("<input type='hidden' value=selectedAddFootballPlayerId>");
to
$('body').append("<input type='hidden' value=\""+selectedAddFootballPlayerId+"\">");
2
$('#listboxFootballPlayers').append(option);
to
$('#listboxFootballPlayers').append(option);
$('input[type="hidden"][value="'+selectedRemoveFootballPlayerId+'"]').remove();

You can try this:
<input type="hidden" name="image" id="input-image{{ image_row }}" />
inputt= "<input type="hidden" name="product_image' value="abcd">"
$("#input-image"+row).remove().append(inputt);

Copy sevaral text input values into a single textarea

Im working for a school project and Im stuck and I was not able to find a script snippet or an answer to my problem in google.
After uploading an image the script shows the thumbnail and the link to that image inside a text field.
<input type="text" id="imlink" name="imlink" onclick="s(this);" size="70" value="'.SURL.''.$imagesfolder.'/' . $bigboy . '">
My problem is that when I upload 10 images it takes too much time to copy each field, so what I want to do is to show the "value" of all those 10 text inputs into one single textarea.
<textarea>
my_image1.jpg
my_image2.jpg
my_image3.jpg
my_image4.jpg
my_image5.jpg
</textarea>
Is there any solution for my problem ?
thanks in advance !

The .value property can be used to extract the values for each <input /> field. These values can then be inserted into the <textarea />:
var values = "";
$("input").each(function(i) {
values += (i > 0 ? "\n" : "") + this.value;
});
$("textarea").val(values);
Demo.
(This can be wrapped in a function and attached as a "change event handler" on the <input /> elements.)

How can I create a dynamic form using jQuery

How can I create a dynamic form using jQuery. For example if I have to repeat a block of html for 3 times and show them one by one and also how can I fetch the value of this dynamic form value.
<div>
<div>Name: <input type="text" id="name"></div>
<div>Address: <input type="text" id="address"></div>
</div>

To insert that HTML into a form 3 times, you could simply perform it in a loop.
HTML:
<form id="myForm"></form>
jQuery:
$(function() {
var $form = $('#myForm'); // Grab a reference to the form
// Append your HTML, updating the ID attributes to keep HTML valid
for(var i = 1; i <= 3; i++) {
$form.append('<div><div>Name: <input type="text" id="name' + i + '"></div><div>Address: <input type="text" id="address' + i + '"></div></div>')
}
});
As far as fetching values, how you go about it would depend on your intent. jQuery can serialize the entire form, or you can select individual input values.
.append() - http://api.jquery.com/append/

This is a pretty broad question and feels a lot like 'do my work' as opposed to 'help me solve this problem.' That being said, a generic question begets an generic answer.
You can add new address rows by using the append() method and bind that to either the current row's blur - although that seems messy, or a set of +/- buttons that allow you to add and remove rows from your form. If you're processing the form with PHP on the server side, you can name the fields like this:
<input type='text' name='address[]' />
and php will create an array in $_POST['address'] containing all the values.