Help with a HTML & java script code

I need help with html and javascript code.

I am building a landing page using a third-party builder, which gives out the page HTML. On the page, there is a form tool to collect leads, so whenever the submit button is clicked the leads data will be sent as a POST request to a particular trigger. This is the inbuilt functionality.

Now I wanted the user to land on a specific page after hitting the submit button I wanted two actions on the same submit button, that is, when someone clicks submit, the leads data to be sent to the POST request and the user to be sent to a different page URL. I researched a bit and found I could achieve this by adding a Java script inside the HTML. so I added that.

But now, if I try this inside an environment like the one in HTML Online Viewer websites, it is running fine. But when I click the submit button on the page directly opening it in the browser, it takes the user to the post request URL. The second action of taking them to another page is not working.

I believe someone here might be able to help me. It’s been days, I am stuck at this.

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:

Sure I will create a new one with the HTML code

I need help with html and javascript code.

I am building a landing page using a third-party builder, which gives out the page HTML. On the page, there is a form tool to collect leads, so whenever the submit button is clicked the leads data will be sent as a POST request to a particular trigger. This is the inbuilt functionality.

Now I wanted the user to land on a specific page after hitting the submit button I wanted two actions on the same submit button, that is, when someone clicks submit, the leads data to be sent to the POST request and the user to be sent to a different page URL. I researched a bit and found I could achieve this by adding a Java script inside the HTML. so I added that.

But now, if I try this inside an environment like the one in HTML Online Viewer websites, it is running fine. But when I click the submit button on the page directly opening it in the browser, it takes the user to the post request URL. The second action of taking them to another page is not working.

I believe someone here might be able to help me. It’s been days, I am stuck at this.

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge">

<title></title>

<meta name="description" content="">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css"> .u-row { display: flex; flex-wrap: nowrap; margin-left: 0; margin-right: 0; } .u-row .u-col { position: relative; width: 100%; padding-right: 0; padding-left: 0; } .u-row .u-col.u-col-100 { flex: 0 0 100%; max-width: 100%; } u/media (max-width: 767px) { .u-row:not(.no-stack) { flex-wrap: wrap; } .u-row:not(.no-stack) .u-col { flex: 0 0 100% !important; max-width: 100% !important; } } body,html{padding:0;margin:0}html{box-sizing:border-box}\*,:after,:before{box-sizing:inherit}html{font-size:14px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}p{margin:0}form .error-field{-webkit-animation-name:shake;animation-name:shake;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}form .error-field input,form .error-field textarea{border-color:#a94442!important;color:#a94442!important}form .field-error{padding:5px 10px;font-size:14px;font-weight:700;position:absolute;top:-20px;right:10px}form .field-error:after{top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-top-color:#ebcccc;border-width:5px;margin-left:-5px}form .spinner{margin:0 auto;width:70px;text-align:center}form .spinner>div{width:12px;height:12px;background-color:hsla(0,0%,100%,.5);margin:0 2px;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}form .spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}form .spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@media (max-width:480px){.container{max-width:100%!important}}@media (min-width:481px) and (max-width:768px){.hide-tablet{display:none!important}}.container{width:100%;padding-right:0;padding-left:0;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}} a\[onclick\] { cursor: pointer; } body { font-family: arial,helvetica,sans-serif; font-size: 1rem; line-height: 1.5; color: #000000; background-color: #FFFFFF; } #u\_body a { color: #0000ee; text-decoration: underline; } #u\_body a:hover { color: #0000ee; text-decoration: underline; } #u\_content\_form\_1 button:hover { color: #FFF !important; background-color: #3AAEE0 !important; } #u\_content\_form\_1 input::placeholder { color: #000; opacity: 0.5; } #u\_content\_button\_1 a:hover { color: #FFFFFF !important; background-color: #3AAEE0 !important; } </style>

<script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var form = document.querySelector("form"); form.onsubmit = function (event) { event.preventDefault(); // Prevent the default form submission behavior var formData = new FormData(form); fetch(form.action, { method: "POST", body: formData }).then(function (response) { window.location.href = "https://www.inaziffy.com/thank-you-6"; // Redirect after POST }).catch(function (error) { console.error('Error during fetch:', error); }); }; }); </script>

</head>

<body>

<div id="u\_body" class="u\_body" style="min-height: 100vh;">

<div id="u\_row\_1" class="u\_row" style="padding: 0px;">

<div class="container" style="max-width: 1200px;margin: 0 auto;">

<div class="u-row">

<div id="u\_column\_1" class="u-col u-col-100 u\_column" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;">

<div style="width: 100%;padding:0px;">

<div id="u\_content\_image\_1" class="u\_content\_image" style="overflow-wrap: break-word;padding: 10px;">

<div style="position:relative;line-height:0px;text-align:left">

<img alt="" src="https://assets.unlayer.com/projects/141475/1713981650291-Screenshot%20(2).png" style="width: 100%;max-width: 72px;" title=""/>

</div>

</div>

<div id="u\_content\_heading\_1" class="u\_content\_heading" style="overflow-wrap: break-word;padding: 10px;">

<h1 style="margin: 0px; line-height: 140%; text-align: center; word-wrap: break-word; font-size: 35px; font-weight: 400;"><strong>Optin</strong></h1>

</div>

<div id="u\_content\_form\_1" class="u\_content\_form" style="overflow-wrap: break-word;padding: 10px;">

<div style="text-align:center"><form action="https://www.letslevelup.app/version-1yc5/api/1.1/wf/trigger1?funnel=1713981278629x302717787138949100\&amp;pageid=1713981537189x730694483438469100" method="POST" style="display:inline-block;width:55%;box-sizing:border-box" target="\_self"><div color="#000" class="sc-jEACwC wZTDr"><div style="padding-bottom:10px"><div style="text-align:left;color:#444;font-size:14px;padding:0px 0px 3px"></div><div style="position:relative"><input type="text" name="first\_name" placeholder="First Name" style="border-top-width:1px;border-top-style:solid;border-top-color:#CCC;border-left-width:1px;border-left-style:solid;border-left-color:#CCC;border-right-width:1px;border-right-style:solid;border-right-color:#CCC;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;border-radius:0px;padding:10px;color:#000;background-color:#FFF;font-size:12px;width:100%"/></div></div></div><div color="#000" class="sc-jEACwC wZTDr"><div style="padding-bottom:10px"><div style="text-align:left;color:#444;font-size:14px;padding:0px 0px 3px"></div><div style="position:relative"><input type="text" name="last\_name" placeholder="Last Name" style="border-top-width:1px;border-top-style:solid;border-top-color:#CCC;border-left-width:1px;border-left-style:solid;border-left-color:#CCC;border-right-width:1px;border-right-style:solid;border-right-color:#CCC;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;border-radius:0px;padding:10px;color:#000;background-color:#FFF;font-size:12px;width:100%"/></div></div></div><div color="#000" class="sc-jEACwC wZTDr"><div style="padding-bottom:10px"><div style="text-align:left;color:#444;font-size:14px;padding:0px 0px 3px"></div><div style="position:relative"><input type="email" name="email" placeholder="Email" style="border-top-width:1px;border-top-style:solid;border-top-color:#CCC;border-left-width:1px;border-left-style:solid;border-left-color:#CCC;border-right-width:1px;border-right-style:solid;border-right-color:#CCC;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;border-radius:0px;padding:10px;color:#000;background-color:#FFF;font-size:12px;width:100%"/></div></div></div><div style="text-align:center"><button type="submit" style="border:none;border-radius:4px;display:inline-block;text-align:center;overflow:hidden;cursor:pointer;text-decoration:none;padding:10px;margin:5px 0px 0px;font-size:14px;width:61%;color:#FFF;background-color:#3AAEE0">Submit</button></div></form></div>

</div>

<div id="u\_content\_button\_1" class="u\_content\_button" style="overflow-wrap: break-word;padding: 10px;">

<div style="text-align: center;">

<a href="https://www.inaziffy.com/thank-you-6" target="\_self" style="color:#FFFFFF;background-color:#3AAEE0;border-radius: 4px;line-height:120%;display:inline-block;text-decoration:none;text-align:center;padding:10px 20px;width:auto;max-width:100%;word-wrap:break-word;font-size: 14px;">

<span style="line-height: 16.8px;">Button Text</span>

</a>

</div>

</div>

<div id="u\_content\_image\_2" class="u\_content\_image" style="overflow-wrap: break-word;padding: 10px;">

<div style="position:relative;line-height:0px;text-align:center">

<img alt="" src="https://assets.unlayer.com/projects/141475/1713981786503-788125" style="width: 100%;max-width: 512px;" title=""/>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

MY JS:

<script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { var form = document.querySelector("form"); form.onsubmit = function (event) { event.preventDefault(); // Prevent the default form submission behavior var formData = new FormData(form); fetch(form.action, { method: "POST", body: formData }).then(function (response) { window.location.href = "https://www.inaziffy.com/thank-you-6"; // Redirect after POST }).catch(function (error) { console.error('Error during fetch:', error); }); }; }); </script>

If you paste it like this on one line, there are single-line comments on the same line so anything after it will be treated as a comment. You should separate your code on multiple lines and use single-line comment only at the end of the line you want.

Here is how your script should look like:

<script type="text/javascript">
 document.addEventListener(
    'DOMContentLoaded',
    function () {
      var form = document.querySelector('form');
      form.onsubmit = function (event) {
        event.preventDefault();    // Prevent the default form submission behavior 
        var formData = new FormData(form);
        fetch(form.action, {
          method: 'POST',
          body: formData
        }).then(
          function (response) {
            window.location.href = 'https://www.inaziffy.com/thank-you-6';  // Redirect after POST 
          }
        ).catch(function (error) {
          console.error('Error during fetch:', error);
        });
      };
    }
 );
</script>

Otherwise, your code is working and doing what you are expecting.