What is preventing this code from appearing on a WordPress page?

My main issue is that this code appears as plain text on all the pages where I place it. The intention is for it to create two text boxes and two buttons

<div onmouseover="change_background(this, '#FCF6CF')" onmouseout="change_background(this,'#E8E8E8')" id="client_portal_content">
  Client Login
  <INPUT id=logintext size="15" onblur="if (this.value == '')
    this.value='Your client ID'" onfocus="this.value=''" value="Your client
    ID"></INPUT>
  <INPUT id=loginbutton onclick="if
    (document.getElementById('logintext').value != 'Your client ID')
    window.open('http://1010.cmmcloud.com/progress/progress.php?id=p-'+document.getElementById('logintext').value)" type=button value=Login></INPUT>

  <br><br> Affiliate Login
  <INPUT id=logintextaff size="15" onblur="if
    (this.value == '') this.value='Your affiliate ID'" onfocus="this.value=''" value="Your affiliate ID"></INPUT>
  <INPUT id=loginbuttonaff onclick="if
    (document.getElementById('logintextaff').value != 'Your affiliate ID')
    window.open('http://1010.cmmcloud.com/affportal/portal.php?id=a-'+document.getElementById('logintextaff').value)" type=button value=Login></INPUT>
</div>

htmlcsswordpressfunction

Answer №1

Your code contains errors, resulting in it displaying as plain text instead of running properly. To fix this issue, consider using placeholder text in your input fields and checking for empty inputs on form submission, rather than relying on the 'onblur' function.

Check out the example below:

function validateInput() {
  var input = document.getElementById("#myid");

  if (input == null || input == "") {
    alert("Please fill in the required field!");
  }
}
<input id="myid" type="text" placeholder="Enter ID Here" />

<button onclick="validateInput();">Submit</button>

I hope this clarifies things for you.

EDIT: In your script tag (note that capitalization is not necessary), there is a conditional check for 'logintext' value 

 onclick="if
(document.getElementById('logintext').value != 'Your client ID'

Please update it to

onclick="if
(document.getElementById('logintext').value != null)


<input id="logintext" size="15" placeholder ="Your Client ID"
value=" "></input>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

tips for arranging the body of a card deck

I have a card-deck setup that looks like this https://i.sstatic.net/vuzlX.png I am trying to arrange these boxes in such a way that the total width of the box equals the sum of the Amazon Cost width and the BOXI+ width: https://i.sstatic.net/3uNbe.png He ...

htmlcsstwitter-bootstrapbootstrap-4

Which architectural style is best to master for developing exceptional JavaScript software?

My familiarity with Model-View-Controller runs deep, having worked with it for years in server-side development using languages like PHP. Now, I find myself diving into JavaScript and embarking on a large project that utilizes SVG, Canvas, and other moder ...

javascripthtml

Changing the style.backgroundImage property overrides any image transition effects

I am currently working on creating a button for a player. You can check out the video (here) The button works, but in order to give it a "pressed" effect, I have to change its background-image on click. However, this action seems to override the transitio ...

javascripthtmlcsscss-animationscss-transitions

How can data in the form be obtained as an array in Node.js with Express?

I am looking to develop a form that will use a POST request to send data to a node.js server with Express. Is there a way for the form to be transmitted and received as an array on the server? ...

htmlnode.jsexpress

DOM API: utilizing the getBoundingClientRect method alongside the CSS style property "float:left"

When using the DOM-API method Element.getBoundingClientRect, it may not always return the actual bounds where content is rendered. This can be seen in the following examples: <html> <head> <style> #float { float: left; } & ...

htmlcssselenium-webdriverdom

Having trouble transferring a file using html and php?

Currently, I am attempting to transfer a file from one directory to another using PHP. However, I am encountering an issue where every time I select the file to upload and press submit, it redirects me to a page that saves my .php file instead of the inten ...

phphtmluploadmove

Why am I unable to choose an element by its Id?

My goal is to pass an ID as an argument to a function in the following manner: HTML <button type="button" class="like btn" onclick="like('<%=postid%>')"> <svg id ='<%=likei ...

javascripthtmlexpressdomejs

What could be causing my iframe to not adjust its size according to its content?

My attempt at resizing a cross-site iframe is not working as expected, despite following the guidance provided here. The iframe on my page seems to remain unaltered in size, and I can't figure out what mistake I might be making. The current location ...

javascripthtmlcssiframeresize

Why isn't my output being shown on the screen?

Why is the output (refresh value) not being displayed? function myFunction() { $a = document.getElementById("examplehtml").value; document.write("<big><bold>"); document.write($a); document.write("</bold></big>"); $b = ...

javascriptphpjqueryhtmlajax

How can the <dfn> tag be effectively utilized?

Even after studying the syntax and application of this tag on MDN, in a book, and various other sources, I am still struggling to see its practical significance. Maybe it's beneficial for search engine optimization? ...

htmlsemantic-markup

Creating a scoreboard layout with HTML and CSS

I am attempting to create a scoreboard in the following format: 0 - 0 Home - Away The issue I am facing is that if the length of the Home team's name is longer, it pushes the dash (-) further. I want the dash to be a ...

htmlcss

Comparing the Absolute anchor tag to the anchor tag with an absolute span

I have come across two methods for extending a link over a card, container, div, or any other element in order to make the entire area clickable. The first approach involves positioning the <a> tag as an absolute element. The second method keeps th ...

htmlcssaccessibility

Can you show me how to use vuejs to implement h2 tags?

Within the article, there are H2 tags that I want to use as a table of contents. However, despite attempting methods like Replace and substring, I haven't been able to isolate only the H2 tags from the content. The post content is structured in JSON f ...

javascripthtmlvue.js

Tips for aligning images and a slider perfectly in a single row

I am attempting to align 3 buttons in the center and a slider on the right side of the same line. However, I am facing an issue where when I center the buttons and float the slider to the right, the buttons lose their alignment in the middle. Here is how i ...

htmlcss

Could you provide guidance on how to toggle the visibility of a div using the click event of a button or link located on a different HTML page in Angular?

Is there a way to change the visibility of a div on a different page when a button or link is clicked? For example, I have a button on the "main.html" page that, when clicked, should display a hidden div on the "header.html" page. How can I achieve this? ...

htmlcssangularweb

Diagonal-left ending div in cascading style sheets

Looking to achieve a div with a diagonal side similar to the image in the link below: https://i.sstatic.net/u9grW.png I'm trying to figure out the best way to do this. One idea is to position 2 divs closely together and rotate one of them. Alternativ ...

htmlcss

"The CSS styling for the text input field is not being reflected in the designated

My contact form has multiple controls, but I'm having trouble changing the color of the name that is displayed in the control before a user starts typing their information. I tried using the color property, but this ended up changing the color of the ...

cssforms

Employ CSS Grid to properly position the crimson section within the confines of the scarlet border on Level 77 of Grid Attack

I spent hours struggling with level 77 of Coding Fantasy: Grid Attack. No matter what I tried, nothing seemed to work. There are no solutions provided in the game, and there's no way to skip the level. Can anyone help me with the solution please? ...

htmlcssflexboxgridcss-grid

The line break is being disregarded by jQuery's insertBefore function

In my simple HTML, I have a div with a limited width. Inside are several span tags styled with nowrap. Here is the CSS: .content { width: 50%; margin: 10px; padding: 10px; border: 1px solid black; } .adder { color: blue; cursor: po ...

javascriptjqueryhtmlcss

Struggles with z-index in pseudo elements

I'm facing an issue with positioning my pseudo element behind its parent element. I want the red box to appear in front of the blue box. #mobile-nav-icon { position: absolute; display: block; height: 92px; width: 93px; background-color: r ...

htmlcss