CODEWITHSUNDEEP
javascript
madphp
madphp

Reputation: 1764

Add quote in javascript generated links

How do i fix this link in javascript.

<a href="javascript:clientGalleryLink(Business)">Link</a>

Its missing single quotes around 'Business'

Javascript:

html += "<option value='javascript:clientGalleryLink(" + titleArray[x] + ")'>" + titleArray[x] + "</option>";

Upvotes: 0

Views: 851

Answers (5)

yoda
yoda

Reputation: 10981

add slashes:

\"" + titleArray[x] + "\"

Upvotes: 0

bobince
bobince

Reputation: 536359

Escaping problems like this is why it's best to avoid creating JavaScript-in-HTML dynamically in strings. The javascript: pseudo-URL scheme should also never be used.

Instead, consider an ‘unobtrusive scripting’ approach: move the data out of an embedded JS string and into normal attributes, such as class or, if the link corresponds to a particular element on the page, the href itself:

<a class="gallerylink" href="#Business">Link</a>

for (var i= document.links.length; i-->0;) {
    if (document.links[i].className==='gallerylink') {
        document.links[i].onclick= function() {
            clientGalleryLink(this.hash.substring(1));
            return false;
        };
    }
}

The second example:

html += "<option value='javascript:clientGalleryLink(" + titleArray[x] + ")'>" + titleArray[x] + "</option>";

is just a mess. Aside from the lack of \' quoting around the titleArray value, and the lack of HTML-escaping or JS-string-literal-escaping on the titleArrays (so if you have '"<& characters in the title you've got problems).

Are you expecting the script to get executed when the option is chosen just because you've put it in the value? It won't.

Better to use the DOM objects than trying to mess around inserting JavaScript inside HTML inside JavaScript inside HTML. For example, if you're looking for a select box that calls clientGalleryLink every time the selected option is changed:

<div id="PlaceWhereYouWantToPutTheSelectBox"></div>

<script type="text/javascript">
    var s= document.createElement('select');
    for (var i= 0; i<titleArray.length; i++) {
        s.options[i]= new Option(titleArray[i], titleArray[i]);
    }
    s.onchange= function() {
        clientGalleryLink(this.options[this.selectedIndex].value);
    };
    document.getElementById('PlaceWhereYouWantToPutTheSelectBox').appendChild(s);
</script>

No ugly escaping necessary, no cross-site-scripting security holes.

Upvotes: 0

JamesEggers
JamesEggers

Reputation: 12935

Try this to escape the attribute quotes and thus giving you the single inner quotes like you show in your example.

html += "<option value=\"javascript:clientGalleryLink('" + titleArray[x] + "')\">" + titleArray[x] + "</option>";

Upvotes: 0

Tarik
Tarik

Reputation: 81711

<a href='javascript:clientGalleryLink("Business")'>Link</a>
html += "<option value='javascript:clientGalleryLink(\"" + titleArray[x] + "\")'>" + titleArray[x] + "</option>";

Could you please try this one out.

Thanks.

Upvotes: 1

Jonathan Fingland
Jonathan Fingland

Reputation: 57167

use \ to escape the quotes

html += "<option value='javascript:clientGalleryLink(\"" + titleArray[x] + "\")'>" + titleArray[x] + "</option>";

Upvotes: 2

Related Questions