pass string containing white spaces in javascript

Question

I have a div class like this and want to call setlocation function which will set the value of the state in the text box

<div class="overview over_widt">
    <ul>
        <li class="auto" title="All India"></li>
        {% for state_obj in state_list %}
            <li name="state" class="auto" title="{{state_obj.name}}"><a href="#{{state_obj.id}}" onclick=javascript:setlocation("{{state_obj.name}}")> {{ state_obj.name }}</a></li>
         {% endfor %}
    </ul>

my java script function

function setlocation(name){
    //alert(name);
    $('#id_autocomplete').val(name);
    document.getElementById('city_state').style.display="none"
}

and my textbox

<input type="text" class="text2" name="location" id="id_autocomplete" placeholder="Enter Location" onfocus="show_div();" onkeyup="div_autocomplete()"/>

The problem is I have some states which have "whitespaces" in them and passing those parameters is creating a problem . I tried passing the object also like

onclick=javascript:setlocation("{{state_obj}}")

but this also doesnt work.

"passing those parameters is creating a problem" and what is the problem exactly? — palaѕн
– palaѕн, Commented Nov 14, 2013 at 6:49
Use encodeURIComponent to encode the string and pass that to setlocation. — Pradeep shyam
– Pradeep shyam, Commented Nov 14, 2013 at 6:52
Note that the javascript: label is completely unnecessary there. — Felix Kling
– Felix Kling, Commented Nov 14, 2013 at 6:54

Felix Kling · Accepted Answer · 2013-11-14 07:00:56Z

4

You have to put the HTML attribute value in quotation marks:

onclick="setlocation('{{state_obj.name}}')"

Otherwise values with whitespace will mess up your HTML. If you don't use quotation marks, then only the characters up to the next whitespace are considered to be part of the value. So if the generated HTML was

onclick=setlocation("foo bar")

Then you would have an attribute onclick with value setlocation("foo and a boolean attribute bar") (though this would probably be invalid, I don't think attribute names can contain " or )).

But really, instead of using inline event handlers, you could use event delegation or any other way of binding event handlers.

edited Nov 14, 2013 at 7:00

answered Nov 14, 2013 at 6:52

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Comment

Felix Kling Over a year ago

If you explain the downvote, I can improve my answer. Without an explanation, there is little I can do. Thank you!

Collectives™ on Stack Overflow

pass string containing white spaces in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related