Same code working differently on the same page

228
February 04, 2017, at 1:38 PM

I hope you're doing great.

I'm having a hard time figuring this out. I'm using the same code for an agree to terms box and submit button but with different button images and links. I just copied the code for them to work in the same way. The buttons are on the same page but take you to different checkout pages. The first code is working fine, it blocks the user to proceed if they don't check the agreement box but the second code even though it's the same code, it's not doing the job; it's letting people through without agreeing to the terms.

Below are both codes and you can see they're different because of their hyperlinks and button images.

This a great community. I'm a beginner, excuse me if it's an amateur question. I really hope you all can help me, I really appreciate it!

Thank you so much!

<html> 
<head> 
<script> 
 function disableSubmit() { 
  document.getElementById("submit").disabled = true; 
 } 
 
  function activateButton(element) { 
 
      if(element.checked) { 
        document.getElementById("submit").disabled = false; 
       } 
       else  { 
        document.getElementById("submit").disabled = true; 
      } 
 
  } 
</script> 
<center><button type="submit" id="submit" onclick="document.location.href='https://www.jvzoo.com/b/570‌​51/250513/13';"><img src="http://i.jvzoo.com/57051/250513/13" alt="Tube Cash Blueprint (2M)" border="0" alt="Submit"/></button></center> 
</head> 
<center><h6> Tube Cash Blueprint Agreement</h6></center> 
<body onload="disableSubmit()"> 
 
 <center><input type="checkbox" name="terms" id="terms" onchange="activateButton(this)"/>  Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a> </center> 
<br/><br/> 
 
</body> 
</html>
<html> 
<head> 
<script> 
 function disableSubmit() { 
  document.getElementById("submit").disabled = true; 
 } 
 
  function activateButton(element) { 
 
      if(element.checked) { 
        document.getElementById("submit").disabled = false; 
       } 
       else  { 
        document.getElementById("submit").disabled = true; 
      } 
 
  } 
</script> 
<center><button type="submit" id="submit" onclick="document.location.href='https://www.jvzoo.com/b/57051/250467/13';"><img src="http://i.jvzoo.com/57051/250467/13" alt="Tube Cash Blueprint" border="0" alt="Submit"/></button></center> 
</head> 
<center><h6> Tube Cash Blueprint Agreement</h6></center> 
<body onload="disableSubmit()"> 
 
 <center><input type="checkbox" name="terms" id="terms" onchange="activateButton(this)"/>  Check here to indicate that you have read and agreed to the terms of the <a target="_blank" href="https://johnmichaelmarketing.com/tbc-agreement/">Tube Cash Blueprint Costumer Agreement</a> </center> 
<br/><br/> 
 
</body> 
</html>

Answer 1

You have two html tag in one document. When i trace your code with my firefox inspector you second code are as an srcipt of the first one. What i saw and copy:

<br><br>
<script type="text/javascript">
    <html>
 <head>
 <script>
 function disableSubmit() {
 document.getElementById("submit").disabled = true;
 }
 function activateButton(element) {
  if(element.checked) {
    document.getElementById("submit").disabled = false;
   }
   else  {
    document.getElementById("submit").disabled = true;
  }
 }
</script>

If you want your code work remove <html><head><script> from the first of second code.

Answer 2

You cannot use the same id for 2 elements.

This id:

<button type="submit" id="submit" onclick="document.location.href='https://www.jvzoo.com/b/57051/250467/13';" disabled=""><img src="https://i.jvzoo.com/57051/250467/13" alt="Tube Cash Blueprint" border="0"></button>

is clashing with this:

<button type="submit" id="submit" onclick="document.location.href='https://www.jvzoo.com/b/570&zwnj;&#8203;51/250513/13';"><img src="https://i.jvzoo.com/57051/250513/13" alt="Tube Cash Blueprint (2M)" border="0"></button>

Just change the ids and it will work. Now you have to write a different function for each id, or use a name instead to be able to use them in both

Quick and dirty solution - copy functions, change id:

<script>
  function disableSubmit1() {
      document.getElementById("submit1").disabled = true;
  }
  function activateButton1(element) {
      if(element.checked) {
          document.getElementById("submit1").disabled = false;
      }
      else  {
          document.getElementById("submit1").disabled = true;
      }
  }
  function disableSubmit2() {
      document.getElementById("submit2").disabled = true;
  }
  function activateButton2(element) {
      if(element.checked) {
          document.getElementById("submit2").disabled = false;
      }
      else  {
          document.getElementById("submit2").disabled = true;
     }
  }
</script>
<!-- button 1 -->
<button type="submit" id="submit1" disabled="" onclick="alert('submission1')">B1</button>
<input type="checkbox" name="terms" id="terms1" onchange="activateButton1(this)" /> 

<!-- button 2 -->
<button type="submit" id="submit2" disabled="" onclick="alert('submission2')">B2</button>
<input type="checkbox" name="terms" id="terms2" onchange="activateButton2(this)" /> 
READ ALSO
Fix SVG element zoom function to be more like absolute scale not cumulative

Fix SVG element zoom function to be more like absolute scale not cumulative

I was checking out this nice snippet here: http://wwwpetercollingridge

297
How to add a real-time count-up timer in each row getting from my database

How to add a real-time count-up timer in each row getting from my database

I need to show hours, minutes, and seconds which the orders is loaded to my monitor page where i got from mysql db and using foreach loopi'm still new to javascript and i'm having problem on count-up timers which is executing same time from my first row result

323
img on error event for dynamic content?

img on error event for dynamic content?

I want to replace the srcs of all invalid images on my website

442