Question

点击提交按钮时，我试图将文本值放入输入隐藏值

这是我到目前为止尝试过的，

$(document).ready(function(e) {
    $(this).click(function(e){
        var domain_price = $('.domain_price').text();
        $('#order_domain').val(domain_price);
    });
});

但是这会从所有.domain_price内容中添加文字。

HTML

这是显示hidden value的结果。我不想这样。

我只想将唯一的当前表单值放在隐藏值中。

<h2 style="color:green;">Domain Domain.org is available. <span class="domain_price">$9.95/year</span> <form action="" method="post" onsubmit="return false;">
                        <input type="hidden" value="$9.95/year$9.95/year" id="order_domain" name="order_domain">
                        <input type="submit" id="submit" value="Order Now">
                    </form></h2>


<h2 style="color:green;">Domain Domain.org is available. <span class="domain_price">$9.95/year</span> <form action="" method="post" onsubmit="return false;">
                        <input type="hidden" value="" id="order_domain" name="order_domain">
                        <input type="submit" id="submit" value="Order Now">
                    </form></h2>

任何想法如何做到这一点？

Answer 1

因此，您的HTML标记和Javascript代码都存在一些问题。

始终确保页面中的元素具有唯一ID。
如果要“分组”元素，请使用类。它使用jQuery选择器更容易选择它们（我提到了库，因为你已经在使用它了。）

HTML的快速解决方法：

<!-- I can't see why you would need more than 1 form 
     in this page. -->
<!-- You can put the other one back if it's required. -->
<form action="" method="post">
    <!-- You could move this inline style to a proper 
         CSS stylesheet. -->
    <h2 style="color:green;">
        Domain Domain.org is available.
        <!-- Using shared classes to common elements instead of 
             relying on an ID. -->
        <!-- Obviously you can set individual IDs if necessary. -->
        <span class="domain_price">$9.95/year</span>
        <input type="text" class="order_domain" />
        <input type="submit" value="Order Now" />
    </h2>
    <h2 style="color:green;">
        Domain Domain.org is available.
        <span class="domain_price">$9.95/year</span>
        <input type="text" class="order_domain" />
        <input type="submit" value="Order Now" />
    </h2>
</form>

现在，Javascript（jQuery）：

// Same as document ready, just shorter.
$(function() {
    // When any submit input is clicked.
    $('input[type="submit"]').on('click', function(e) {
        // As this is not a regular button being handled, the default
        // action would be to submit the form it's contained into.
        // We want to stop this so we can set the hidden inputs values.
        e.preventDefault();

        // Using .parents(selector) you can reach this element parent that
        // matches the selector condition.
        // The span you're looking for is within this parent, so we use
        // .children(selector).
        // .text() explains itself.
        var domain_price = $(this).parents('h2').children('.domain_price').text(); 

        // Now we're looking for the hidden input, which is right before the
        // submit input, so we can use .siblings(selector) to grab it.
        // .val() explains itself.       
        $(this).siblings('.order_domain').val(domain_price);
    });
});

如何只将特定元素文本存储到输入隐藏值？

1 个答案: