0

クリックすると、上記のフォームに特定の情報が入力されるテキストリンクを作成する方法を学びたいと思っています。

したがって、コンテキストでは、金額/国/プロジェクトのフィールドを含む寄付フォームがあります。その下には、「最も緊急のアピール」という見出しの下にいくつかのリンクがあります。これは、アフリカの住宅 - £100 のようなものかもしれません。

このリンクをクリックすると、フォームに情報が入力されるため、金額は 100 ポンド、国はアフリカ、プロジェクトは住宅です。フォームは送信されず、ユーザーが必要に応じて変更できるように入力されるだけです。

私はこれを検索しましたが、私を助ける適切な答えが見つかりません。誰でも手伝ってもらえますか?

basic-ness の場合、私のフォームは次のようになります。

<form target="paypal" id="general-donate" class="form-horizontal" action="https://www.paypal.com/cgi-bin/webscr" method="post" data-validate="parsley" >

<div class="control-group">
    <label for="amount" class="control-label">
        Donation Amount (&#163;)
    </label>
    <div class="controls">
        <input type="text" name="amount" data-min="5" min="5" value="10.00" required>
    </div>
</div>

<div class="control-group">
    <label for="os0" class="control-label">
        Country
    </label>
    <div class="controls">
        <input type="hidden" name="on0" value="Country">
        <select name="os0">
            <option value="Where Needed Most">Where Needed Most </option>
            <option value="Africa">Africa </option>
            <option value="Bangladesh">Bangladesh </option>
            <option value="Palestine/Gaza">Palestine/Gaza </option>
            <option value="Pakistan">Pakistan </option>
            <option value="UK">UK </option>
            <option value="Burma">Burma </option>
            <option value="Syria">Syria </option>
            <option value="Tunisia">Tunisia </option>
            <option value="Sri Lanka">Sri Lanka </option>
            <option value="Kashmir">Kashmir </option>
        </select>
    </div>
</div>

<div class="control-group">
    <label for="os1" class="control-label">
        Projects
    </label>
    <div class="controls">
        <input type="hidden" name="on1" value="Projects">
        <select name="os1">
            <option value="Where Needed Most">Where Needed Most </option>
            <option value="Food">Food </option>
            <option value="Water">Water </option>
            <option value="Medicine">Medicine </option>
            <option value="Water Wells">Water Wells </option>
            <option value="Hospitals">Hospitals </option>
            <option value="Disabled Assistance">Disabled Assistance </option>
            <option value="Eid Gift">Eid Gift </option>
            <option value="Housing">Housing </option>
        </select>
    </div>
</div>

<div class="form-actions">

<button type="submit" id="buynow" class="btn btn-danger">
    Donate via PayPal
</button>

</div>
</form>

私のリンクはその下の単なるテキストです。クリックすると、関連する情報がフォームに入力されます。フォームは基本的なもので、金額のテキスト入力と 2 つのドロップダウン オプションがあります。

4

3 に答える 3

2

「このリンクをクリックすると、フォームに情報が入力されるため、金額は 100 ポンド、国はアフリカ、プロジェクトは住宅です。フォームは送信されず、ユーザーが何かを変更できるように入力されるだけです。彼らは望むかもしれません。」

これはうまくいくはずです：

<a class="click-me" href="javascript:;">Click Me</a>

<script>
// <![CDATA[
(function ($) {
   $(function () {
      $('body').delegate('.click-me', 'click', function () {
         $('input[name="amount"]').val('100'); // Set amount to £100
         $('select[name="os0"]').val('Africa'); // Set country to Africa
         $('select[name="os1"]').val('Housing'); // Set needed most to Housing
      });
   });
})(jQuery);
// ]]>
</script>

ここに jsFiddle があります: http://jsfiddle.net/NzX8V/

これはより柔軟な方法です: (jsFiddle: http://jsfiddle.net/RLtVR/ )

<a class="click-me" rel="100,Africa,Housing" href="javascript:;">Click Me</a>

<script>
// <![CDATA[
(function ($) {
   $(function () {
      $('body').delegate('.click-me', 'click', function () {
         var rel = $(this).attr('rel').split(','),
         amount = rel[0], country = rel[1], needed = rel[2];
         $('input[name="amount"]').val(amount); // Set amount
         $('select[name="os0"]').val(country); // Set country
         $('select[name="os1"]').val(needed); // Set needed most
      });
   });
})(jQuery);
// ]]>
</script>

rel 属性の代わりに HTML5 の data-* 属性を使用すると、これを維持して読みやすくすることができますが、doctype について確信が持てなかったので、安全にプレイすることにしました。たとえば、それらをコンマで区切って分割する代わりに、属性 data-amount="100" data-country="Africa" data-needed="Housing" を使用して、それらを .attr( ) jQueryのメソッド。

于 2013-06-27T22:47:42.647 に答える
2

プログラムでフォームを設定するvalueには、関連する入力の属性を設定するだけです:

var amount = document.getElementsByName('amount')[0],
    os0 = document.getElementsByName('os0')[0],
    os1 = document.getElementsByName('os1')[0];

function setForm(amountValue, os0Value, os1Value) {
  amount.value = amountValue;
  os0.value = os0Value;
  os1.value = os1Value;
}

var link = document.getElementById('set-form');
link.onclick = function (e) {
  setForm(100, 'Africa', 'Housing');
};

あなたのhtmlで：

<a href="#" id='set-form'>click</a>
于 2013-06-27T22:45:14.250 に答える
2

わかりました、それはjqueryで行うことができます：

次の JavaScript 関数を作成します。

function fillFields(amount, country, project) {
  $('input[name="amount"]').val(amount);
  $('select[name="os0"]').val(country);
  $('select[name="os1"]').val(project);
}

次に、ボタンのhtmlは次のようになります

<button onclick="fillFields('100', 'Africa', 'housing')">Housing in Africa - £100</button>
于 2013-06-27T22:47:15.963 に答える