1

私は現在サイトで作業しており、CSS と HTML にはかなり精通していますが、Javascript と PhP にはまだ慣れていません。ユーザーが情報を入力できるフォームを作成しようとしています。一部の値が変更されると、合計 $ が変更されます。たとえば、1 ではなく 3 を選択すると、合計は 3 倍になります。次に、送信を押すと、ペイパルにリンクされ、支払いができるように合計がそこに表示されます。私はこれを理解するという挑戦を楽しんでいますが、これを行うための最良の方法を知りたかっただけです. HTML でインライン フレームを作成し、ONLOAD でフォームをページに配置する JavaScript 関数を呼び出し、さらにいくつかの JavaScript 関数を使用して、異なる値が入力されたときに合計が変化するようにする必要がありますか? 私はすべてのアイデアを受け入れます。

HTML

<BODY onLoad="javascript:showform()">
<IFRAME class="iframe" src="about:blank" id="formarea" name="formarea">
</IFRAME>

JavaScript

function showform() {
    var data = ""
       data +="<div style ='position: relative; margin-right: 50%; padding-left:120px; padding-right:60px;'>"
       data +="<form method='post' name='contact_form' action='contact-form-handler.php'>"
       data +="<fieldset>"
       data +="<legend>Your Details</legend>"
       data +="<ol>"
       data +="<li>"
       data +="<label for=name>Name</label>"
       data +="<input id=name name=name type=text placeholder='First and last name' required>"
       data +="</li>"
       data +="<br>"
       data +="<li>"
       data +="<label for=email>Email</label>"
       data +="<input id=email name=email type=email placeholder='example@domain.com' required>"
       data +="</li>"
       data +="<br>"
       data +="<li>"
       data +="<label for=phone>Phone Number</label>"
       data +="<input id=phone name=phone type=tel placeholder='555-555-5555' required>"
       data +="</li>"
       data +="<br>"
       data +="</ol>"
       data +="</fieldset>"
       data +="<fieldset>"
       data +="<legend>Logo Details</legend>"
       data +="<ol>"
       data +="<li>"
       data +="<label for=logo>Logo #</label>"
       data +="<select name=frontdesign>"
       data +="<option value='1'>1</option>"
       data +="<option value='2'>2</option>"
       data +="<option value='3'>3</option>"
       data +="<option value='4'>4</option>"
       data +="<option value='5'>5</option>"
       data +="<option value='6'>6</option>"
       data +="</select>"
       data +="</li>"
       data +="<br>"
       data +="<li>"
       data +="<label for=nameofT>Name of Tournament</label>"
       data +="<input id=nameofT name=nameofT type=text placeholder='Los Angeles Tournament 2013' required>"
       data +="</li>"
       data +="<br>"
       data +="<li>"
       data +="<label for=colors>Color(s)</label>"
       data +="<input id=colors name=colors type=text placeholder='Kelly Green, Navy Blue' required>"
       data +="</li>"
       data +="<br>"
       data +="</ol>"
       data +="</fieldset>"
       data +="<fieldset>"
       data +="<legend>Shirt Details</legend>"
       data +="<ol>"
       data +="<li>"
       data +="<label for=small>Small</label>"
       data +="<textarea id=small name=small rows=1 type=text placeholder='#' required></textarea>"
       data +="</li>"
       data +="<br>"
       data +="<li>"
       data +="<label for=medium>Medium</label>"
       data +="<textarea id=medium name=medium rows=1 type=text placeholder='#' required></textarea>"
       data +="</li>"
       data +="<br>"
       data +="<li>"
       data +="<label for=large>Large</label>"
       data +="<textarea id=large name=large rows=1 type=text placeholder='#' required></textarea>"
       data +="</li>"
       data +="<br>"
       data +="<li>"
       data +="<label for=xlarge>X-Large</label>"
       data +="<textarea id=xlarge name=xlarge rows=1 type=text placeholder='#' required></textarea>"
       data +="</li>"
       data +="<br>"
       data +="<li>"
       data +="<label for=xxlarge>XX-Large(If more then 3, add $1.50 per shirt)</label>"
       data +="<textarea id=xxlarge name=xxlarge rows=1 type=text placeholder='#' required></textarea>"
       data +="</li>"
       data +="<br>"
       data +="</ol>"
       data +="</fieldset>"
       data +="<fieldset>"
       data +="<legend>Add Ons</legend>"
       data +="<ol>"
       data +="<li>"
       data +="<label for=colorofshirt>Color of Shirt (If not White)</label>"
       data +="<input id=colorofshirt name=colorofshirt type=text placeholder='Kelly Green, Navy Blue' required >"
       data +="</li>"
       data +="<br>"
       data +="<li>"
       data +="<label for=printonback>Print on Back</label>"
       data +="<input id=printonback name=printonback type=text placeholder='2013 Champions' required>"
       data +="</li>"
       data +="<br>"
       data +="</ol>"
       data +="</fieldset>"     
       data +="<fieldset>"
       data +="<input type='submit' value='Submit'>"
       data +="</fieldset>"
       data +="</form>"
       data +="</div>"
       formarea.document.writeln(data)
    }// JavaScript Document

私は $total の部分を理解し始めていません。専門家の観点から、これを達成するための最良の方法は何でしょうか?

4

4 に答える 4

1

これは、JQuery を使用してこれを行う方法の簡単で汚い例であり、JSFiddleでもテストできます。

<script>
    $('#quantity').change(function(){
        calcTotal();
    });
    $('#price').change(function(){
        calcTotal();
    });

    function calcTotal(){
        var q = $('#quantity').val();
        var p = $('#price').val();
        $('#total').val(q * p);
    }
</script>

<div>
    <label for="price">Price</label>
    <input type="text" id="price" />
</div>
<div>
    <label for="quantity">Quantity</label>
    <input type="text" id="quantity" />
</div>
<div>
    <label for="total">Total</label>
    <input type="text" id="total" />   
</div>
于 2013-11-04T05:30:52.000 に答える
1

iframe は可能な限り避けるべきであり、Javascript を使用して HTML をそのように保存および挿入するべきではないため、現在のアプローチはお勧めしません。

フォームを HTML でレンダリングし、 と を使用.show()し.hide()てフォームを表示/非表示にします。

次に、イベントを監視して計算を行う JavaScript を記述.changeします。

例 (これは純粋な JavaScript ではなく jQuery です):

$(#number_field).on('change', function(){
  # calculate...
})
于 2013-11-04T05:21:40.050 に答える
0

そのような HTML タグを追加しないでください (全体のように)。タグを動的に、しかし小さな部分で追加するために使用します。

onchangeまたはoninputまたはonfocusまたはを使用してonsubmitフォーム要素を処理するのが最善の方法です。

例えば、

 <input type="text" name="txt" value="Hello" onchange="checkField(this.value)">
 <scrript>
 function checkField(val)
 {
   alert("The input value changed to: " + val);
  }
 </script>
于 2013-11-04T05:31:13.530 に答える