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

要以编程方式设置表单，您只需设置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 回答
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>

如果您使用 HTML5 中的 data-* 属性而不是 rel 属性，则可以使这更易于维护和阅读，但由于我不确定您的文档类型，所以我认为我会安全使用它。例如，您可以只使用属性 data-amount="100" data-country="Africa" data-needed="Housing" 并使用 .attr( ) jQuery 的方法。

于 2013-06-27T22:47:42.647 回答