Question

我有一个非常基本的表单，我希望在同一页面上将信息传递给另一个表单而不使用php。这两种形式都出现但我无法弄清楚如何使用我的javascript从第一种形式到第二种形式的信息。这是我的代码。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Form</title>
    </head>

    <body>
        <form action"" method="get" onsubmit="submitForm();" name="submitForm">

            Company Name:<input type="text"name="companyName"><br><br>
            Owner: <input type="text" name="compOwner"><br><br>
            Address: <input type="text" name="address"><br><br>
            Phone Number:<input type="text" name="phoneNum"><br><br>
            Annual Sales($)<input type="text" name="annualSales"><br><br>
            Borrow Amount($)<input type="text" name="borrowAmount"><br><br>
            Payment Terms(Months)<input type="text" name="paymentTerms"><br><br>

            <input type="submit" value="Submit" onclick="submitForm();">
        </form>

        <form action"" method="get" name="secondForm">
            Name of Borrowing Company<input type="text"id="compName"><br><br>
            Annual Sales<input type="text"id="annSales"><br><br>
            Borrow Amount<input type="text"id="amountBorrowed"><br><br>
            Payment Terms<input type="text"id="payTerms"><br><br>

            Total Interest On Loan<input type="text"id="totalInterest"><br><br>
            Total Payment<input type="text"id="totalPay"><br><br>
            Total Profit <input type="text"enabled="false" id="totalProfit"><br><br>




        </form>
            <script>
            function submitForm()
            {
                compName = document.forms["submitForm"]["companyName"].value;
                annualSales = document.forms["submitForm"]["annualSales"].value;
                borrowAmount = document.forms["submitForm"]["borrowAmount"].value;
                months = document.forms["submitForm"]["paymentTerms"].value;
                totalInterest = borrowAmount * (months/12) * 0.03;
                totalPayment = borrowAmount + totalInterest;
                profit = totalPayment - borrowAmount;


                document.getElementById('compName').setAttribute(value, compName);
                document.getElementById('annSales').value = annualSales;
                document.getElementById('amountBorrowed').value = borrowAmount;
                document.getElementById('payTerms').value = months;
                document.getElementById('totalInterest').value = totalInterest;
                document.getElementById('totalPay').value = totalPayment;
                document.getElementById('totalProfit').value = profit;

            }
        </script>


    </body>
</html>

Answer 1

我明白了。实际上这个代码有几个问题。

首先，第一个表单元素的名称与函数名称冲突。这是因为当一个元素具有name属性时，它会在JS全局范围内创建一个新变量并重写您的函数，因为它具有相同的名称。您的表单名称属性必须是您的函数名称。

<form action"" method="get" onsubmit="submitForm();" name="submitF">

接下来，input type="submit"刷新您可能不想要的页面。您可以在表单后添加一个按钮元素。

</form>
<button onclick="submitForm()">Submit</button>

在JS中，submitF是一个带有表单元素的变量（感谢name属性），因此您可以在不使用document.forms的情况下更简单地编写它。

function submitForm() {
    compName = submitF["companyName"].value;
    annualSales = submitF["annualSales"].value;
    borrowAmount = submitF["borrowAmount"].value;
    months = submitF["paymentTerms"].value;
    (...)
}

此外，setAttribute(value, compName)无效。它没有。分配给value，而不是代码的其余部分。

我的整个工作代码如下所示：

<html>
    <head>
        <title>HTML Form</title>
        <script type="text/javascript">
            function submitForm() {
                compName = submitF["companyName"].value;
                annualSales = submitF["annualSales"].value;
                borrowAmount = submitF["borrowAmount"].value;
                months = submitF["paymentTerms"].value;
                totalInterest = borrowAmount * (months/12) * 0.03;
                totalPayment = borrowAmount + totalInterest;
                profit = totalPayment - borrowAmount;


                document.getElementById('compName').value = compName;
                document.getElementById('annSales').value = annualSales;
                document.getElementById('amountBorrowed').value = borrowAmount;
                document.getElementById('payTerms').value = months;
                document.getElementById('totalInterest').value = totalInterest;
                document.getElementById('totalPay').value = totalPayment;
                document.getElementById('totalProfit').value = profit;
            }

        </script>
    </head>

    <body>
        <form action"" method="get" onsubmit="submitForm();" name="submitF">

            Company Name:<input type="text"name="companyName"><br><br>
            Owner: <input type="text" name="compOwner"><br><br>
            Address: <input type="text" name="address"><br><br>
            Phone Number:<input type="text" name="phoneNum"><br><br>
            Annual Sales($)<input type="text" name="annualSales"><br><br>
            Borrow Amount($)<input type="text" name="borrowAmount"><br><br>
            Payment Terms(Months)<input type="text" name="paymentTerms"><br><br>


        </form>
        <button onclick="submitForm()">Submit</button>
        <form action"" method="get" name="secondForm">
            Name of Borrowing Company<input type="text"id="compName"><br><br>
            Annual Sales<input type="text"id="annSales"><br><br>
            Borrow Amount<input type="text"id="amountBorrowed"><br><br>
            Payment Terms<input type="text"id="payTerms"><br><br>

            Total Interest On Loan<input type="text"id="totalInterest"><br><br>
            Total Payment<input type="text"id="totalPay"><br><br>
            Total Profit <input type="text"enabled="false" id="totalProfit"><br><br>
        </form>
    </body>
</html>

那就是它。希望我帮忙。

编辑：另外，你应该总是把你的JS代码放在<head>中，除非你有充分的理由不这样做。

Answer 2

您可能想要更改document.getElementById('compName').setAttribute(value, compName); 至 document.getElementById('compName').value = compName;

此外，您应该将数字值从String转换为Integer 恩。 annualSales = parseInt(document.forms["submitForm"]["annualSales"].value)

除此之外，javascript似乎很好。

更新：

进一步调查。您的提交是在javascript运行之前发生的，这就是字段未填充的原因。我建议你把你的javascript放在一个事件监听器中提交。

document.forms['submitForm'].submit(function() {
    compName = document.forms["submitForm"]["companyName"].value;
    annualSales = document.forms["submitForm"]["annualSales"].value;
    borrowAmount = document.forms["submitForm"]["borrowAmount"].value;
    months = document.forms["submitForm"]["paymentTerms"].value;
    totalInterest = borrowAmount * (months/12) * 0.03;
    totalPayment = borrowAmount + totalInterest;
    profit = totalPayment - borrowAmount;

    document.getElementById('compName').setAttribute(value, compName);
    document.getElementById('annSales').value = annualSales;
    document.getElementById('amountBorrowed').value = borrowAmount;
    document.getElementById('payTerms').value = months;
    document.getElementById('totalInterest').value = totalInterest;
    document.getElementById('totalPay').value = totalPayment;
    document.getElementById('totalProfit').value = profit;
});

注意：执行提交时，您的页面会刷新，但您不会看到填充的值。

从表单传递信息到形成Javascript

2 个答案: