Recently I have been trying to change my code that took one HTML user input and used it in a javascript function. To do this I put the input into a query string and that worked fine. Then I tried to add another input. This is currently the form part of my code.

<form onsubmit="bazaartable()" >
    <div>
        <label>Please enter your tax rate here <i>(If not entered will use 1%)</i>:</label>
        <input type="text" id="taxRateForm" />
    </div>

    <div>
        <label><i>Enter unique amount here if needed</i>:</label>
        <input type="text" id="amountForm" />
    </div>
    
    <input type="submit" />
</form>

This is some of my javascript code including the function bazaartable.

<script>
    function takevalue1(){
        var taxRate = document.getElementById("taxRateForm").value;
        if (taxRate < 1){
                taxRate = 1
        }
        return taxRate
    }

    function takevalue2(){
        var amount = document.getElementById("amountForm").value;
        return amount
    }
    
    console.log(takevalue1())
    console.log(takevalue2())

    function bazaartable(){
    getbazaar = () => new Promise(a => getbazaar.data && !a(getbazaar.data) || fetch("https://api.hypixel.net/skyblock/bazaar").then(x => a(getbazaar.data = x.json())));
    document.getElementById("bazaar").innerHTML = arrayToTable([["Item Name", "Price x1 -0.1 Including Tax", "Price x64 -0.1 Including Tax", "x"   takevalue2()]], '<div >{{content}}</div>', '<div >{{content}}</div>');
    getbazaar().then(makeArray).then(x => arrayToTable(x, '<div >{{content}}</div>', '<div  title="{{content}}">{{content}}</div>')).then(x => document.getElementById("bazaar").innerHTML  = x);
    }

    var iLikeThese = ["ENCHANTED_SNOW_BLOCK", "ENCHANTED_POTATO", "ENCHANTED_CARROT", "ENCHANTED_CLAY_BALL", "ENCHANTED_DIAMOND", "ENCHANTED_REDSTONE_BLOCK", "PACKED_ICE", "ICE"];
    
    function makeArray(data) {
        var arr = [];
        for (var i in data.products) {
            if (!iLikeThese.includes(i)) continue;
            var price = null;
            try {
                price = data.products[i].buy_summary[0].pricePerUnit
                price = price -= .1
                priceAfterTax = (price - (takevalue1()/100 * price))
            } catch (e) {}
            arr.push([i.replace(/_/g, " ").toLowerCase(), priceAfterTax.toFixed(1), (priceAfterTax*64).toFixed(1), (priceAfterTax*takevalue2()).toFixed(1)]);
        }
        return arr.sort((a, b) => a[0] > b[0] ? 1 : -1);
    }

    function arrayToTable(arr, row, column) {
        var result = "",
            substr = "";
        for (var i = 0; i < arr.length; i  ) {
            substr = "";
            for (var j = 0; j < arr[i].length; j  ) {
                substr  = column.replace(/{{content}}/g, arr[i][j]);
            }
            result  = row.replace(/{{content}}/g, substr);
        }
        return result;
    }
</script>

I have tried making takevalue1&2 return numbers but that and that works. The only thing that I can think of is that clicking the button clears the inputs before the function can read the values. If anyone can help please reply!

CodePudding user response：

The only thing that I can think of is that clicking the button clears the inputs before the function can read the values

You should use Event.preventDefault to avoid this default behavior on submit.

Here's how you should use it:

1. Pass event when you call your submit function:

<form onsubmit="bazaartable(event)" >
...

2. In your submit function accept an argument, say e and call preventDefault on this argument:

function bazaartable(e) {
    e.preventDefault();
    ...

CodePudding user response：

inside your JavaScript code use Event.preventDefault()