将信息从表单传递到表单Javascript

Passing Info From form to form Javascript

本文关键字：表单 Javascript 信息      更新时间：2023-10-10

我有一个非常基本的表单，我想在不使用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>

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

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

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

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

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

在JS中，submitF是一个带有form元素的变量（由于有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>中，除非您有充分的理由不这样做。

您可能需要更改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;
});

注意：当您提交时，您的页面将刷新，并且您不会看到填充的值。

相关文章：