Javascript function parameter into jQuery or HTML tags

Question

This is my original code to create an input field:

$('#dynamicForm').append('<li id="pdport"></li>');
$('#pdport').append("<label for='sport'>Destination port</label>")
$('<input>').attr({type: 'text', id: 'dport', name: 'dport'}).appendTo('#pdport');
$('#pdport').append("<span>Enter the destination port here (0-65535)</span>");

Instead of doing this code over and over I'm trying to create a function for it

function createInputfield(mainID, childID, labelFor, labelText, spanText){
    $(mainID).append('<li id=childID></li>');
    $(childID).append("<label for=labelFor>labelText</label>")
    $('<input>').attr({type: 'text', id: labelFor, name: labelFor}).appendTo(childID);
    $(childID).append("<span>spanText</span>");
}

and than calling to function with

createInputfield("#dynamicForm", "#psport", "sport", "Source port", "Enter the source port here (0-65535)");

this way I can create a lot of dynamic input fields without copy/pasting a lot of the same code.

The problem is that this doesn't work, I always get syntax errors, like you can't append on mainID and others. I tried a lot of different ways to accomplish this like with quotes, with single quotes, without.. But nothing seems to work.

rrk · Accepted Answer · 2016-02-17 18:21:05Z

2

You forgot to scape your variables and concatate they to the strings

function createInputfield(mainID, childID, labelFor, labelText, spanText){
    $(mainID).append('<li id='+childID.replace('#','')+'></li>');
    $(childID).append("<label for="+labelFor+">"+labelText+"</label>")
    $('<input>').attr({
        type: 'text', 
        id: labelFor, 
        name: labelFor
    }).appendTo(childID);
    $(childID).append("<span>"+ spanText +"</span>");
}

This might works

edited Feb 17, 2016 at 18:21

rrk

15.9k4 gold badges32 silver badges49 bronze badges

answered Feb 17, 2016 at 18:18

Marvin Medeiros

2425 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hopkins-matt · Accepted Answer · 2016-02-17 18:25:00Z

1

Marvin is close. He caught the lack of string concatenation. You also forgot that you are sending in string that begin with a # but are using those strings in place that can not accept a string that begins with a #.

Update: Looks like Marvin caught the usage of # as well. He opted to strip it. My solution adds the hash where needed, so you don't have to worry about passing the hash into the function.

JS:

function createInputfield(mainID, childID, labelFor, labelText, spanText){
    $('#'+ mainID).append('<li id=' + childID + '></li>');
    $('#'+ childID).append('<label for=' + labelFor + '>' + labelText + '</label>')
    $('<input>').attr({type: 'text', id: labelFor, name: labelFor}).appendTo('#'+ childID);
    $('#'+ childID).append('<span>' + spanText + '</span>');
}

createInputfield("dynamicForm", "psport", "sport", "Source port", "Enter the source port here (0-65535)");

Demo: https://jsfiddle.net/hopkins_matt/6xyjawgs/

edited Feb 17, 2016 at 18:25

answered Feb 17, 2016 at 18:21

hopkins-matt

2,8232 gold badges17 silver badges23 bronze badges

1 Comment

Marvin Medeiros Over a year ago

his sending the id selector in the string, i just removed the hash with .replace method

Álvaro Touzón · Accepted Answer · 2016-02-17 18:47:06Z

0

taking a momment, this is my code, expect like it, i concat object in array and then put all together

function createInputfield(mainID, childID, labelFor, labelText, spanText){


    var elms = [
        $('<label for=' + labelFor + ' />').text(labelText),
        $('<input />').attr({type: 'text', id: labelFor, name: labelFor}),
        $('<span />').text(spanText)
    ];
    $('<li id=' + childID + '></li>').append(elms).appendTo('#'+ mainID)

}

createInputfield("dynamicForm", "psport", "sport", "Source port", "Enter the source port here (0-65535)");

hope you like it

answered Feb 17, 2016 at 18:47

Álvaro Touzón

1,2301 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Javascript function parameter into jQuery or HTML tags

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related