Assigning variable to input value

Question

In Jquery script, as you can see below. The elements for the detail are created dynamically inside a jquery's function. However when assigning the value from variable "startLocation" to the input "detail_startLocation[]", the value is not full assigned. It seems only the first word.

For example the value of "startLocation" is "Grand Hyatt" but only "Grand" is shown as the value of "detail_StartLocation[]". When alerting the variable, it returns the full value. Does any one know what's wrong ?

var startLocation = jQuery("#txtStartLocation").val();
    var endLocation = jQuery("#txtEndLocation").val();
    var date2 = jQuery.datepicker.formatDate("DD, MM d, yy", new Date(jQuery("#txtStartDate").val()));

    for(i=1; i<= n_day;i++){

        var detail = '<div>&nbsp;</div>'
                    +'<div><h4>Day-'+i+' : '+date2+'</h4></div>'
                    +'<div class="table">'
                        +'<div class="tr">'
                            +'<div class="td">&nbsp;</div>'
                            +'<div class="td">Start</div>'
                            +'<div class="td">End</div>'
                        +'</div>'
                        +'<div class="tr">'
                            +'<div class="td">Travel time</div>'
                            +'<div class="td"><input type="text" name="detail_startTime[]" value= '+startTime+' /></div>'
                            +'<div class="td"><input type="text" name="detail_endTime[]" value= '+endTime+' /></div>'
                        +'</div>'
                        +'<div class="tr">'
                            +'<div class="td">Location</div>'
                            +'<div class="td"><input type="text" size="100" name="detail_startLocation[]" value= '+startLocation+' /></div>'
                            +'<div class="td"><input type="text" name="detail_endLocation[]" value= '+endLocation+' /></div>'
                        +'</div>'
                    +'</div>';

        jQuery("#detail").append(detail);
        date2 = new Date(jQuery("#txtStartDate").val());
        date2.setDate(startDate.getDate() + i);
        date2 = jQuery.datepicker.formatDate("DD, MM d, yy", new Date(date2));
    }

Tobias · Accepted Answer · 2015-08-26 16:12:39Z

You are inserting the values without quotation marks (") around them. In HTML, every value which does not consist of word-only characters must be enclosed in quotes (e.g. value="Grand Hyatt" instead of value=Grand Hyatt).

It might be insufficient to just add the quotes. For many reasons, you should escape the values properly. As you are already using jQuery, I would suggest inserting the values into the DOM using the library's .val function. You could do it like this:

// Wrap HTML code in jQuery instance for later modifications
var detail = $('<div>&nbsp;</div>'
            +'<div><h4>Day-'+i+' : '+date2+'</h4></div>'
            +'<div class="table">'
                +'<div class="tr">'
                    +'<div class="td">&nbsp;</div>'
                    +'<div class="td">Start</div>'
                    +'<div class="td">End</div>'
                +'</div>'
                +'<div class="tr">'
                    +'<div class="td">Travel time</div>'
                    // Don't set the value but add a class attribute
                    +'<div class="td"><input type="text" name="detail_startTime[]" class="start-time" value="" /></div>'
                    // Don't set the value but add a class attribute
                    +'<div class="td"><input type="text" name="detail_endTime[]" class="end-time" value="" /></div>'
                +'</div>'
                +'<div class="tr">'
                    +'<div class="td">Location</div>'
                    // Don't set the value but add a class attribute
                    +'<div class="td"><input type="text" size="100" name="detail_startLocation[]" class="start-location" value="" /></div>'
                    // Don't set the value but add a class attribute
                    +'<div class="td"><input type="text" name="detail_endLocation[]" class="end-location" value="" /></div>'
                +'</div>'
            +'</div>');

// Update value attributes
detail.find('input.start-time').val(startTime);
detail.find('input.end-time').val(endTime);
detail.find('input.start-location').val(startLocation);
detail.find('input.end-location').val(endLocation);
// Append to "real" DOM
jQuery("#detail").append(detail);

First, we add some CSS classes to the input elements so we can select them later. The whole HTML code is wrapped in a jQuery instance which we can then modify accordingly.

That was a really stupid of me for missing the double quotes. I have modified my own codes according to your suggestion. Thank you very much. Will keep this in mind for better styling next time.

rybo111 · Accepted Answer · 2015-08-26 16:12:13Z

0

If you look at your generated HTML, you'll notice that the value is not in quotes.

For instance, this code:

value= '+startLocation+'

Should really look like this:

value="'+startLocation+'"

answered Aug 26, 2015 at 16:12

rybo111

12.6k4 gold badges64 silver badges74 bronze badges

6 Comments

Tobias Over a year ago

That's really bad style, never insert user inputs into HTML code without proper escaping.

rybo111 Over a year ago

@still_learning I'm answering the question. Escaping user input is another area completely.

Tobias Over a year ago

Basic security should never be "another area completely". Imagine a very young boy playing with a knife. If he came towards you and asked you how to sharpen it, would you just answer the question? (This is a rhetorical question, nevermind.) You don't have to agree with my opinion, but everybody reading your answer should be aware of the problem.

rybo111 Over a year ago

@still_learning How do you know startLocation is not already an escaped variable? This is irrelevant to the question.

Tobias Over a year ago

startLocation apparently isn't escaped as it is the raw value of a user input (var startLocation = jQuery("#txtStartLocation").val();). I would prefer the kid not to play with a knife, but you don't have to agree with my opinion. Let's stop arguing about this, both answers solve the problem.

|

Collectives™ on Stack Overflow

Assigning variable to input value

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related