Question

我想学习如何创建一个文本链接，点击该链接时会填写我上面的表单上的某些信息。

所以在上下文中，我有一个捐赠表格，其中包含字段 - 金额/国家/项目。在它下面我有一些标题为“我们最紧急的呼吁”。这可能就像非洲的住房 - 100英镑。

点击此链接后，它会填写表格中的信息，因此金额为100英镑，国家为非洲，项目为住房。表格将不会提交，只需填写即可让用户更改他们想要的任何内容。

我已经四处寻找，但找不到合适的答案来帮助我。有人可以帮忙吗？

对于基本情况，我的表单可能如下所示：

<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个下拉选项。

Answer 1

要以编程方式设置表单，您只需设置相关输入的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>

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

Answer 3

“当点击此链接时，它会填写表格中的信息，因此金额为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>

如果你使用HTML5中的data- *属性而不是rel属性，你可以更容易维护和阅读，但由于我不确定你的doctype，我认为我会安全地玩它。例如，您可以只使用data-amount =“100”data-country =“Africa”data-needed =“Housing”，然后使用.attr引用它们，而不是将它们逗号分隔并拆分它们。）jQuery的方法。

文本链接填写表单字段

3 个答案: