CODEWITHSUNDEEP
javascripthtml
Dev-MDW2
Dev-MDW2

Reputation: 113

Redirecting To URL Via Dynamically Created JavaScript Button

I am trying to create a very simple ordering form, that displays selected values, results, pricing, and confirmation to a user. I have everything I need except one thing. When A user clicks a button on the main page, I need to write some results and pricing to the screen, along with create two new buttons asking the user if they want to place an order or cancel. If they cancel, I need to write to the screen that the order was cancelled, and if the user confirms, I want to redirect to another page that contains delivery times, map, etc.

What I need is this: I need to know how to have my JS created button redirect to another page when the user clicks it.

Full current code for reference:

<script>

function main() {
    var pizzaSize = ""; var pizzaToppings = ""; var sizePrice = 0; var topPrice = 0; var delPrice = 0; var totalPrice = 0;
    var orderCustName = document.getElementById("custName").value;
    if (document.getElementById("sizeS").checked) {
        var pizzaSize = "Small"
        sizePrice = 8
    } else if (document.getElementById("sizeM").checked) {
        var pizzaSize = "Medium"
        sizePrice = 10
    } else if (document.getElementById("sizeL").checked) {
        var pizzaSize = "Large"
        sizePrice = 12
    } else if (document.getElementById("sizeXL").checked) {
        var pizzaSize = "Extra Large"
        sizePrice = 14
    }
    if (document.getElementById("topPep").checked) {
        pizzaToppings = pizzaToppings + "Pepperoni<br>";
        topPrice = topPrice + 1.5
    }
    if (document.getElementById("topSau").checked) {
        pizzaToppings = pizzaToppings + "Sausage<br>";
        topPrice = topPrice + 1.5
    }
    if (document.getElementById("topOlive").checked) {
        pizzaToppings = pizzaToppings + "Black Olives<br>";
        topPrice = topPrice + 1.5
    }
    if (document.getElementById("topMus").checked) {
        pizzaToppings = pizzaToppings + "Mushrooms<br>";
        topPrice = topPrice + 1.5
    }
    if (document.getElementById("topGP").checked) {
        pizzaToppings = pizzaToppings + "Green Peppers<br>";
        topPrice = topPrice + 1.5
    }
    var i = document.getElementById("optionPickDel");
    var orderType = i.options[i.selectedIndex].text;
    var ii = i.options[i.selectedIndex].value;

    if (ii == 1){
        delPrice = 0
    } else if (ii == 2){
        delPrice = 2
    }
    totalPrice = parseFloat(sizePrice + topPrice + delPrice).toFixed(2);

    document.write("Customer Name: " + orderCustName + "<br>");
    document.write("Pizza Size: " + pizzaSize + " ---------- Price: $" + parseFloat(sizePrice).toFixed(2) + "<br>");
    document.write("Toppings Selected ---------- Price: $" + parseFloat(topPrice).toFixed(2) + "<br>" + pizzaToppings + "<br>");
    document.write("Pick Up Or Delivery? ----- " + orderType + "<br><br>");
    document.write("Total Price Is: $" + totalPrice+ "<br><br>");
    document.write("Confirm Order<br>------------------<br>");
    var newBut1 = document.createElement("button");
    var newBut2 = document.createElement("button");
    newBut1.innerHTML = "OK";
    newBut2.innerHTML = "Cancel";
    newBut1.onclick = false
    document.body.appendChild(newBut1);
    document.body.appendChild(newBut2);
    if (newBut1.onclick = true) {
        window.location.href = "confirm.html"
    } 

}

The code I am focusing on:

    document.write("Customer Name: " + orderCustName + "<br>");
    document.write("Pizza Size: " + pizzaSize + " ---------- Price: $" + parseFloat(sizePrice).toFixed(2) + "<br>");
    document.write("Toppings Selected ---------- Price: $" + parseFloat(topPrice).toFixed(2) + "<br>" + pizzaToppings + "<br>");
    document.write("Pick Up Or Delivery? ----- " + orderType + "<br><br>");
    document.write("Total Price Is: $" + totalPrice+ "<br><br>");
    document.write("Confirm Order<br>------------------<br>");
    var newBut1 = document.createElement("button");
    var newBut2 = document.createElement("button");
    newBut1.innerHTML = "OK";
    newBut2.innerHTML = "Cancel";
    newBut1.onclick = false
    document.body.appendChild(newBut1);
    document.body.appendChild(newBut2);
    if (newBut1.onclick = true) {
        window.location.href = "confirm.html"
    }

All that happens currently is when I test this by clicking the submit button on the main page, I am automatically redirected to the new page without anything being written to the main page first.

Hopefully that makes sense.

Am I doing this wrong or am I missing something obvious?

Thank you.

Upvotes: 0

Views: 1266

Answers (2)

NandaSagar
NandaSagar

Reputation: 11

I wasted more than 2 hours and finally, this was working fine. here type variable is something that changes based on the user input current URL = http://localhost:8000

function foo(){
    window.location = 'con/'+type;
}

redirects you to http://localhost:8000/con/899

Upvotes: 0

Liam Sperry
Liam Sperry

Reputation: 318

To add the click event to the button, use addEventListener

I recommend replacing:

if (newBut1.onclick = true) {
        window.location.href = "confirm.html"
}

with:

newBut1.addEventListener("click", function(){
    window.location.href = "confirm.html";
});

Though if you already have a function you want to use as you mentioned in the comments, newPage(), use it like this

function newPage(){
    window.location.href = "confirm.html";
}

newBut1.addEventListener("click", newPage);

make sure not to use "()" when passing the function into addEventListener, the interpreter will think you want to fire the function instead of referencing it and cause your issue.

Upvotes: 1

Related Questions