0

So I am a newbie at JS and am trying to force this submit button to redirect to a specific page on our website. I have tested out the following code (below) which works on JSFiddle, but when I add the same JS to the live site it's not working.

Any help here is greatly appreciated!

<button id="btnSubmit" class="float-left submit-button" value="3">Home</button>
    
document.getElementById("btnSubmit").onclick = function() {window.location.href = "https://moralesgroup.net/";
};

https://jsfiddle.net/28p1ek0m/#&togetherjs=F3pwv9yV68

where i'm allowed to edit on the backend of the site

Andy Erk
  • 1
  • 2
  • the closing bracket didn't format correctly, which is why it's showing in between the js code and jsfiddle link – Andy Erk Nov 12 '20 at 17:12
  • But your JS Fiddle works perfectly, what's the problem? – Jeremy Thille Nov 12 '20 at 17:13
  • Also you can simply encapsulate your button in a link. Same result without JS. – Jeremy Thille Nov 12 '20 at 17:15
  • so i can't do that because i don't have access to edit the html on the buttons. i can only add in javascript code and with the jsfiddle working, i'm not sure where else to go – Andy Erk just now Edit Delete – Andy Erk Nov 12 '20 at 17:35
  • It's not the same code. On your screenshot here are weird double quotes around `btnSubmit`. These probably don't work in Javascript. Use regular double quotes. Doesn't your console complain about a syntax error or something?? – Jeremy Thille Nov 12 '20 at 18:24
  • correct. i didn't share the most recent screenshot of the jsfiddle in the box. my apologies there. i was trying to show that i can't edit html directly. – Andy Erk Nov 12 '20 at 18:31

4 Answers4

0

You can try something like

  <button>
        <a href="https://moralesgroup.net/" >Home</a>
  </button>

Check this example https://jsfiddle.net/y0mfqpd7/1/

Ahmed Ibrahim
  • 256
  • 1
  • 2
  • 12
  • so i can't do that because i don't have access to edit the html buttons. i can only add in javascript code and with the jsfiddle working, i'm not sure where else to go – Andy Erk Nov 12 '20 at 17:40
0

You may have to wait until the document is loaded before you can run this code. Kind of like here: Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

docReady(function() {
    document.getElementById("btnSubmit").onclick = function() {window.location.href = "https://moralesgroup.net/";
});

Also, make sure all of this is either in a <script> tag at the bottom of the page, or in a .js file loaded in the head.

Pawel Kowaluk
  • 113
  • 6
  • Thanks! I attempted this method with no luck. Seems like something wonky with the actual application. Thanks for your help! – Andy Erk Nov 16 '20 at 19:48
0

I would do like Ahmed Ibrahim said, except I would wrap the button in an anchor tag, otherwise the edges of the button are not clickable:

  <a href="https://moralesgroup.net/">
    <button>
      Home
    </button>
  </a>

However when I do this I get a small hyperlink underline to the right of the button for some reason, but this can be fixed with text-decoration: none in css:

a {
  text-decoration: none;
}
Omar Shishani
  • 379
  • 3
  • 8
  • so i can't do that because i don't have access to edit the html buttons. i can only add in javascript code and with the jsfiddle working, i'm not sure where else to go – Andy Erk Nov 12 '20 at 17:34
  • @AndyErk So Your code works in my live server, but only if the JavaScript is loaded _after_ the button is loaded.Maybe their JS that you have access to is loaded at the top of the page for some reason? (Seems odd to me). Try this: ```window.addEventListener('load', function () { document.getElementById("myButton").onclick = function() { location.href = "https://moralesgroup.net/thanks-employee/"; }; }) ``` This works despite placement of JS. Function now waits for window load completion to execute. I think same principle @PawelKowaluk mentioned – Omar Shishani Nov 12 '20 at 18:23
  • so i went and implemented your recommended code with no luck still. i appreciate your help! – Andy Erk Nov 12 '20 at 19:13
  • @AndyErk I'm sure you did this, but the id of the button in my code needs to be changed to the correct id of your button (```btnSubmit``` i believe) – Omar Shishani Nov 12 '20 at 19:18
  • welp, I own the fact that I completely whiffed on that. Let me make sure i change things correctly and report back. my bad for that – Andy Erk Nov 12 '20 at 20:03
  • so i tried your method a few different times with no luck still. I appreciate your help! – Andy Erk Nov 12 '20 at 21:58
0

You can directly go to the new window on click of a button by below code:

<button id="btnSubmit" class="float-left submit-button" value="3" href="https://moralesgroup.net/">Home</button>

Here, I have used the button tag, given the same id as yours, and used the same class to have the same styling as you wanted. href will directly redirect to the new link which has been provided in quotes.

Richa Bhuwania
  • 180
  • 10
  • so i can't do that because i don't have access to edit the html buttons. i can only add in javascript code and with the jsfiddle working, i'm not sure where else to go – Andy Erk Nov 12 '20 at 17:39