如何将信用卡号添加到另一个列表？

Question

我有一个要求提供信用卡信息的可折叠表单。当有人单击提交时，我希望将卡号移至另一个列表。我如何使用 Javascript 来做到这一点。这是我的html：

<div class= "addStuff">
    <div data-role="collapsible" data-inset="true"  >
       <h5> New credit card</h5>         
          <div data-role="fieldcontain">
            <input type="password" name="credit_card_number" id="credit_card_number" value="" placeholder="Credit Card Number">
            <input type="password" name="security_code" id="security_code" value="" placeholder="Security Code">
            <input type="date" name="expiration_date" id="expiration_date" value="" placeholder="Expiration Date">
            <input type="password" name="name" id="name" value="" placeholder="Name On Card">
            <input type="password" name="street_address" id="street_address" value="" placeholder="Street Address">
            <input type="text" name="city" id="city" value="" placeholder="City">
            <input type="number" name="zip_code" id="zip_code" value="" placeholder="Zip Code">
                <form action="accounts.html" method="post">
                <button type="submit" class="submit" name="submit" value="submit" data-theme="">Submit</button>
                </form>
          </div>
    </div>
</div>

这是我要添加到的列表：

<div class="accounts">
<h2>Existing Acounts </h2>

<ul data-role="listview" >
        <div id= "Credit Cards">
    <li><a href="AccountDetails.html">BofA Enhcanced Checking 3212</a></li>
    <li><a href="AccountDetails.html">BankAmericard Platinum Plus Visa 4567</a></li>
    <li><a href="AccountDetails.html">CITI Platinum 4331</a></li>
        </div>
</ul>



<ul data-role="listview" >
        <div id= "Accounts">
    <li><a href="AccountDetails.html">Bank of America Checking</a></li>
    <li><a href="AccountDetails.html">Bank of America Savings</a></li>
        </div>
</ul>

这是我的尝试：

$('document').ready(function() {
    $('.addStuff .submit').click(function(){
        $('#credit_card_number').addClass('.accounts' )
    });
});

Answer 1

将提交按钮更改为按钮：

<button type="button" class="submit" name="submit" value="submit">Submit</button>`

更新的 javascript 是：

$('document').ready(function() {
    $('.submit').click(function(){
        var creditcard = $('#credit_card_number').val();
        $("#CreditCards ul").append('<li><a href="AccountDetails.html">' + 
                creditcard + "</a></li>");

       // refresh view 
       $('#CreditCards ul').listview('refresh');

       // hide form 
       $('#ccdiv').trigger('collapse');
    }); 
 });​

下面是工作示例：http://jsfiddle.net/donramos/aA7T8/2/

Answer 2

你可以使用这样的东西：

$('document').ready(function() {
    $('#oldForm .submit').click(function(){
        var option = $("#oldSelect option:selected");
        $("#newSelect").append('<option value='+option.val()+'>'+option.html()+'</option>');
    });
});

Answer 3

有你的清单，例如：

<ul id="creditcards">
</ul>

点击按钮时通过 jquery 将 credit_card_number 输入的值追加到列表中：

$('document').ready(function() {
    $('.submit').click(function(){
        $("#creditcards").append("<li>"+$("#credit_card_number").val()+"</li>");
    });
});

小提琴：

http://jsfiddle.net/qC7BE/