情報をフォームからフォームJavascriptに変換する

私は、PHPを使わずに同じページの別のフォームに情報を渡したいという非常に基本的なフォームを持っています。両方のフォームが表示されますが、私はどのように最初のフォームから2番目のjavascriptで情報を把握することはできません。ここに私のコードです。情報をフォームからフォーム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>

出典

2016-03-31 R.Rob

私はそれを理解しました。実際にこのコードにはいくつかの問題があります。

最初に、最初のフォーム要素の名前が関数の名前と衝突します。これは、要素にname属性がある場合、要素が同じ名前を持つため、JSグローバルスコープに新しい変数を作成して関数を書き換えるためです。フォーム名属性は、関数名とは別のものでなければなりません。

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

次に、input type="submit"はあなたがおそらくしたくないページを、更新されます。フォームの後ろにボタン要素を追加することができます。 JSで

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

、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>

を。私は助けてくれるといいですね。

EDIT：また、JSコードを<head>に入れてください。

出典

2016-03-31 19:27:09 BoltKey

これはトンを助けました。私は実際にそれがJSの機能を書き換えることに気づいていませんでした。アドバイスが本当に束を助けてくれてありがとう！ :) –

-1

あなたはdocument.getElementById('compName').setAttribute(value, compName); また、あなたは整数元に文字列から自分の数値を変換する必要がありdocument.getElementById('compName').value = compName;

にを変更したい場合があります。 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; 
});

注：送信時にページが更新され、値が入力されません。

出典

2016-03-31 18:42:27 Henry

ボタンのクリック機能とフォームの送信機能があると思いますいずれかのボタンを提出することはしないで、onclickを持っている、またはonclickを持っていないし、onsubmit ...を使用しないでください。 – Nikki9696

情報をフォームからフォームJavascriptに変換する

答えて

関連する問題