CODEWITHSUNDEEP
javascriptjqueryhtmlinline-code
Saeed Neamati
Saeed Neamati

Reputation: 35852

How to use inline JavaScript in HTML?

Support that I have this hidden field:

<input type='hidden' id='handler' name='handler' value='5534882394' />

And imagine that I fetch an HTML fragment from server via jQuery AJAX.

<div id='result'>
    <span></span>
</div>

However, instead of writing something like this:

$(function(){
   $('#result span').text($('#handler').val());
});

I'd like to use something like:

<div id='result'>
    <span>javascript:$('#handler').val();</span>
</div>

However, I don't get the intended result. Can I use this approach with JavaScript?

Update: Everybody please, I know about $(document).ready();. So, don't provide better ways. I just wanted to know if it's possible to have inline JavaScript, or not, and if yeah, how?

Upvotes: 8

Views: 58798

Answers (6)

Arbel Groshaus
Arbel Groshaus

Reputation: 169

This answer is for educational purposes only. Don't actually do this.

This code will do the trick:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type='hidden' id='handler' name='handler' value='5534882394' />
<div id='result'>
    <img src='invalid' onerror="$(this).replaceWith($('<span>').text($('#handler').val()))"/>
</div>

In ES6:

<input type='hidden' id='handler' name='handler' value='5534882394' />
<div id='result'>
    <img src='invalid' onerror="
        let newElem = document.createElement('span');
        newElem.textContent = document.getElementById('handler').value;
        this.replaceWith(newElem);
    "/>
</div>

The way this works is that as soon as the img element is loaded, the browser tries to fetch src. Since src is an invalid value, onerror is immediately triggered which can do whatever you want — including replacing the entire element.

As previously said, a much more sensible solution is to just use a script tag.

<input type='hidden' id='handler' name='handler' value='5534882394' />
<div id='result'>
    <span></span>
    <script>
        document.querySelector('#result > span').textContent = document.getElementById('handler').value;
    </script>
</div>

Upvotes: -1

emboss
emboss

Reputation: 39650

Although the <script> tag works and would let you do what you are trying to do, I would really suggest rethinking your design there. This is not directly what you would call "unobtrusive Javascript".

Why do you prefer to mix HTML and JS? If it's for curiosity - OK, but if this is intended to turn into production code then you might want to separate the two as much as you can. You will be rewarded with a much better maintainability in the end.

Upvotes: 6

Michael Lorton
Michael Lorton

Reputation: 44436

A few years back, I had that exact problem: I was using AJAX to retrieve HTML and that HTML had embedded Javascript. I was never able to find a better solution than parsing the HTML manually to dig out the Javascript tags and calling eval on their contents. Hackish and unreliable, but it was the best I could find.

Upvotes: 2

ipr101
ipr101

Reputation: 24236

You could do -

<input type="text" id="handler" value="yes"/>
<div id='result'>
    <span>
       <script>document.write($('#handler').val());</script>
    </span>
</div>

and the page would run the Javascript when it hit the script tag. You'd have to make sure that '#handler' element was already loaded though or the script would fail.

In general it would be better to keep script tags such as this away from your mark-up.

Working demo - http://jsfiddle.net/ipr101/h6zXs/

Upvotes: 6

Guffa
Guffa

Reputation: 700810

No, you can't use that approach with Javascript. There is no such thing as inline Javascript.

What you see in a link like <a href="javascript:alert(1)"> is the javascript: pseudo-protocol, similar in use to the http: protocol. When you point the browser to such an URL, the browser runs the script.

If you want to run a script in the page, you need a script tag.

Upvotes: 14

Matt Ball
Matt Ball

Reputation: 360026

Have you forgotten about the <script> tag?

<div id="result"></div>
<script>$('#result').text($('#handler').val();</script>

Upvotes: 3

Related Questions