CODEWITHSUNDEEP
jquery
3gwebtrain
3gwebtrain

Reputation: 15293

appending the input attribute value differs from text value

On looping i am getting value from json, and place in to input checkbox both values and text, but i am getting wrong outupt, it is difference from text value from attribute values

my loop:

$.map(data["allLocales"], function(value, i){
    if(i % 5 === 0 ){
        col0 += "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"
    } else if(i % 5 === 1) {
        col1 += "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"
    } else if(i % 5 === 2) {
        col2 += "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"
    } else if(i % 5 === 3) {
        col3 += "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"
    } else if(i % 5 === 4) {
        col4 += "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"
    }
})

example of wrong htmls:

<label class="blue"><input value="Italian" type="checkbox">Italian</label>
<label class="blue"><input value="Italian" (italy)="" type="checkbox">Italian (Italy)</label>
<label class="blue"><input value="Italian" (switzerland)="" type="checkbox">Italian (Switzerland)</label>

what is wrong here..? I am looking exactly both the attribute and text value should be same

Upvotes: 0

Views: 60

Answers (1)

Adrian Wragg
Adrian Wragg

Reputation: 7401

You appear to not be quoting your results properly, which is especially important when dealing with spaces. For example,

    "<label><input value="+ value.name +" type='checkbox' />"+value.name+"</label>"

when fed with Italian (italy) is being rendered as:

    <label><input value=Italian (italy) type='checkbox' />Italian (italy)</label>

(italy) is then being treated as a blank attribute, as per the HTML5 specification, and given a value of "".

To fix this, add quote marks around where you output the value:

    "<label><input value='"+ value.name +"' type='checkbox' />"+value.name+"</label>"

should now render:

    <label><input value='Italian (italy)' type='checkbox' />Italian (italy)</label>

You may also want to consider escaping any ' characters that may occur in the value being output, however there's no evidence that they are part of your current dataset.

Upvotes: 2

Related Questions