节点js无法识别动态添加到表单的输入字段

时间:2017-11-25 04:17:34

标签: javascript node.js pug

我看到了类似的问题,但不知道如何将其应用于节点js。我创建了一个购物车,用户点击添加一个项目,并使用jquery将该项目添加到表单中。但是,在提交时,唯一的表单字段确认是totalCost,它未动态添加。

我的哈巴狗档案(相关部分):

h1#spendable 50000
table
    form#cartitems(method='POST' action='/store')
        tbody
            tr#buyit(style='border-bottom:0px solid white; height:50px; display:none;')
                td#purchCost <b> Total: </b>
                    input#costcost.minIn.nolineinput(name='totalCost' type='text' readonly)

            tr 
                td(colspan=2)
                    button(type='submit' style='width:100%; padding:5px 0px;') Buy

我的javascript文件如下所示:

function addToCart(butt){
var $spendable = $('#spendable');

var balance  = Number( $spendable.text() );
var itmCost  = Number($(butt).prev().prev().text());
var boughtItems = $('.firstline').length;
if(balance > itmCost && boughtItems < 4){
    var imgSrc   = $(butt).parent().prev().attr('src');
    var specific = $(butt).prev().val();
    var specificL= $(butt).prev().text();
    var itmName  = $(butt).prev().prev().prev().text();
    var itmType  = $(butt).parent().parent().parent().prop('id');
    var purchCost= Number( $('#purchCost .minIn').val() );

    //create a demo
    if (itmType == 'Treat' || itmType == 'Prize'){
        alert(itmType);
        $('#cartcontainer table tbody').prepend("<tr class='firstline'><td class='smtd' rowspan=2 ><img class='demo' src='" + imgSrc + "'></img></td><td><input type='text' class='nolineinput' name='itmName' value='" + specific +"|" + itmName + "' readonly></input></td><tr><td><div class='minidiv'><p>" + Number(itmCost) + "</p></div><div class='microdiv'><input id='chck' type = 'checkbox' name = 'itmKind' onclick='remove(this)'  checked></input></div></td></tr>")

        if(boughtItems ==0){
            $('#buyit').show()
        }
    }else{
        $('#cartcontainer table tbody').prepend("<tr class='firstline'><td class='smtd' rowspan=2 ><img class='demo' src='" + imgSrc + "'></img></td><td><input type='text' class='nolineinput' name='itmName' value='" + itmName +"| " + specificL + "' readonly></input></td><tr><td><div class='minidiv'><p>" + Number(itmCost) + "</p></div><div class='microdiv'><input class='chck' type = 'checkbox' name = 'itmKind' value='" + itmCost + "' onclick='remove(this)' checked></input></div></td></tr>");


        if(boughtItems ==0){
            $('#buyit').show()
        }
    }
    var total= purchCost + itmCost;
    $('#purchCost .minIn').val(total);
    $spendable.text( balance-itmCost);
}else if (boughtItems >= 4){
    alert("You've reached the max amount of item\n you can purchase. Buy more next week!")
}else {
    alert('Sorry you do not have enough\n points to purchase this item.')
}

}

另外我应该提到我使用正文解析器,i console.log( req.body) i唯一得到的回复是{totalCost:'1500'}但是我希望看到是:{itmName:'Caprisun', itmKind:'Cherry', totalCost:'1500'}

1 个答案:

答案 0 :(得分:0)

没关系解决了我自己。该表应该已在表单内创建。表,tbody,tr,td应该像所有人一样:

    form
         table
              tbody
                   tr
                     td Total
                     td
                        input(type='text' name='itemName')