How to use inline JavaScript in WordPress

Question

I am trying to create a popup in WordPress. My popup opened but cancel and send buttons are not working.

This is my script and code :

Script

<script type="text/javascript" charset="utf-8">
    $(function() {
        function launch() {
             $('#sign_up').lightbox_me({centered: true, onLoad: function() { $('#sign_up').find('input:first').focus()}});
        }

        $('#try-1').click(function(e) {
            $("#sign_up").lightbox_me({centered: true, preventScroll: true, onLoad: function() {
                $("#sign_up").find("input:first").focus();
            }});

            e.preventDefault();
        });

        $('table tr:nth-child(even)').addClass('stripe');
    });
</script>

and this is my form

<a href="#" id="try-1" class="sprited"><div class="call"></div></a>
<div id="sign_up">
    <h3 id="see_id">Request a call Back</h3>
    <div id="sign_up_form">
        <form id="form1" name="form1" action="../mail.php" method="post" >
            <label><strong>Name :</strong> <input class="sprited"/></label>
            <label><strong>Mobile No :</strong> <input class="sprited"/></label>
            <div id="actions">
                <input type="button" name="cancel" value="Cancel" class="close form_button sprited" />
                <input type="button" name="send" value="Send" class="form_button sprited" />
            </div>
        </form>
    </div>
    <a id="close_x" class="close sprited" href="#">close</a>
</div>

Wordpress doesn't really support inline javascript. If you view the source of the page you'll see that it get's sanitized by wordpress. Just put the javascript into a .js file somewhere and include it. — rfoo
– rfoo, Commented Apr 8, 2014 at 6:03
I have already created request.js file an include it in to header.php file. but it is not working — Suresh Kumar
– Suresh Kumar, Commented Apr 8, 2014 at 6:08

Pieter Goosen · Accepted Answer · 2014-04-08 07:31:32Z

2

Don't use inline javascript. As suggested by rosscower, add your javascript in a js file. You now need to enqueue it properly. Don't just dump it in the header. You will also need to think about conditional statements here to load your jquery file, if you only need to load it on a certain page you need to load it conditionally, otherwise this will load on all pages.

Example, you called your js file myjs.jsand you add it in a folder called js and want to load it only on the homepage, you'll do something like this

function register_my_js() {
if(is_home()) {
 wp_enqueue_script( 'my-script',   get_template_directory_uri() . '/js/myjs.js',    array(), '', true );
 }
}

 add_action( 'wp_enqueue_scripts', 'register_my_js' );

answered Apr 8, 2014 at 7:31

Pieter Goosen

9,9615 gold badges37 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

How to use inline JavaScript in WordPress

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related