javascript not working on wordpress

Question

I know this has been asked before and someone will come and mark it as duplicate, but please trust me I have looked at a number of answers and none of them worked for me.

I have a simple form on my company's wordpress site. I need to add simple field validations like : Name cannot be blank, phone number should be 10 digits etc.

If the validations succeed, the user be redirected to another site along with all the form data.

I added javascript to run the validations and it works fine on my local machine when I launch it on my browser but when i copy-paste the raw html on wordpress and run it, it either jumps the validation and redirects the user to the 2nd url even though the fields are empty/incorrect OR shows the white screen of death!

I have tried using javascript using shortcodes on the post, I have tried looking for multiple blogs and they all seem to start from a fresh WP installation which in my case isn't true. They all also seem to edit the header or footer.php file to include the JS which enables it on all pages, this isn't okay with my company as they are concerned it may be a security risk.

Requirements : I need to validate the data on the form, I need to do it only on this page on my website. I can ssh into the remote WP machine (Linux) but I am not aware of where to place the files so if you can specify where to place the files in your solution then I can try that.

I am new to WP and Javascript/jQuery/PHP world so if you can explain me like you were explaining a cabbage that would be awesome!

Code I have currently that isn't working!

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>TestPage</title>
<script type="text/javascript">
function validateForm() {
    if (document.forms["submitForm"]["firstName"].value == "") {
        alert("First Name must be filled out");
        return false;
    } else {
        alert("First Name");
        return true; // Should redirect to url 
    }
}
</script>

</head>

<body>

<div style="background-color: #F9F9F9;  border: 1px solid grey; margin: 5%; padding: 5%;">

<form name="submitForm" action="<redirect_url here>" method="post">
.....
.....
<b>First Name : </b><input type="text" name="firstName"><br><br>

        <b>Middle Name : </b><input type="text" name="middleName" value=""><br><br>

        <b>Last Name : </b><input type="text" name="surName" value="SHARMA"><br><br>

        <b>Date Of Birth : </b><input type="text" name="dateOfBirth" value="20-Apr-1980"><br><br>
.....
.....
<button id="submit" type = "submit" onclick="return validateForm()"><img src=""/></input>

    </form>

</div>

</body>

</html>

Could you paste the codes you have right now?

dshukertjr
– dshukertjr

2018-02-07 05:32:56 +00:00
Commented Feb 7, 2018 at 5:32 — dshukertjr
– dshukertjr, Commented Feb 7, 2018 at 5:32

Shajibur Rahman · Accepted Answer · 2018-02-07 06:32:14Z

0

Few things you asked: 1. Add Javascript in specific page

You can do it easily , I hope you know how to enque script through function.php

function load_scripts() {
global $post;

if( is_page() || is_single() )
{
    switch($post->post_name) // post_name is the post slug which is more consistent for matching to here
    {
        case 'contact':
            wp_enqueue_script('home', get_template_directory_uri() . '/js/contact.js', array('jquery'), '', false);
            break;
        case 'about-page':
            wp_enqueue_script('about', get_template_directory_uri() . '/js/about-page.js', array('jquery'), '', true);
            break;
        case 'some-post':
            wp_enqueue_script('somepost', get_template_directory_uri() . '/js/somepost.js', array('jquery'), '1.6', true);
            break;
    }
} 
}
add_action('wp_enqueue_scripts', 'load_scripts');

Now by example of above code, you easily can inject yout js code where is required. It will only load based on your logic.

Validation

By googling little bit, you can find good solution for form validation. If possible why not you using jQuery. Can see details in this post [link]Trying to get multiple fields validated in Wordpress HTML form using Javascript

answered Feb 7, 2018 at 6:32

Shajibur Rahman

4663 silver badges12 bronze badges

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

3 Comments

LeoNeo Over a year ago

Okay let me try this. Where is the js folder present in the linux machine which contains the wordpress installation?

LeoNeo Over a year ago

I believe the HTML should not contain any javascript now? Do I need to add any form action attribute or any other reference to the javascript file at all in the html page? Will the javascript be able to pick up the names of the fields using something like document.forms["submitForm"]["firstName"].value ?

LeoNeo Over a year ago

I figured it out. I changed the header.php and went that route to inject js into my html page.

Collectives™ on Stack Overflow

javascript not working on wordpress

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related