WordPress plugin Insert Header and Footers not running script

Question

I created a form using Profile Builder.

Here is link to Form: Form Link

I installed WordPress plugin "Insert Header and Footer" and I tried to run jQuery script with just an alert and it was working.

But, it is not running with below code. The code shows in inspect element but it has no effect.

    <script>
$( "#username" ).attr("pattern", '^[0-9]{8}[A-Z]$').prop('required', true)
    </script>

I want to take selected number in form field. It's a simple script, why is the plugin not running it?

mikerojas · Accepted Answer · 2020-06-21 00:12:51Z

3

$ is not available to your script. You can use a plain javascript option like below:

<script>
  // create a ref to your dom element
  var username = document.querySelector("#username")
  
  // set pattern attribute
  username.setAttribute("pattern", '^[0-9]{8}[A-Z]$');

  // set as required
  username.required = true;
</script>

I tried form the console and this version works:

Alternatively you can swap the $ for jQuery like below:

<script>
  jQuery( "#username" ).attr("pattern", '^[0-9]{8}[A-Z]$').prop('required', true);
</script>

edited Jun 21, 2020 at 0:12

answered Jun 21, 2020 at 0:02

mikerojas

2,3481 gold badge6 silver badges7 bronze badges

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

2 Comments

mikerojas Over a year ago

Please try the plain js version. I just ran it in the console and it worked. You also have a couple console errors that could be conflicting.

Fayakon Over a year ago

how to check which version of JavaScript is working on that element through console?

Collectives™ on Stack Overflow

WordPress plugin Insert Header and Footers not running script

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related