使用jQuery动态更新表单字段

Question

我正在构建一个从文本框中取整数的成本计算器，如果它在两个特定数字之内，则成本会传递到表单上的成本字段。我打算使用PHP，但很难得到ajax调用工作，这是我在jQuery中提出的：

$("#message_wordcount").change(function() {
        var p;
        var service = $("#message_service").val();
        var wc=parseInt($("#message_wordcount").val(), 10);

        if($(service=="Critique")
        {
            if (wc<="1200") {
                var p=2.5;                  
             } else if (wc>"1200" && wc<="2500")    {
                var p=5;
             } else if (wc>"2500" && wc<="4000")    {
                var p=10;
             } else if (wc>"4000" && wc<="6500")    {
                var p=15;
             } else if (wc>"6500" && wc<="8000")    {
                var p=20;
             } else if (wc>"8000" && wc<="12000")   {
                var p=25;
             } else if (wc>"12000" && wc<="16000")  {
                var p=30;
             } else if (wc>"16000" && wc<="20500")  {
                var p=35;
             } else if (wc>"20500" && wc<="22500")  {
                var p=40;
             } else if (wc>"22500" && wc<="25500")  {
                var p=45;
             } else if (wc>"25500" && wc<="27000")  {
                var p=50;
             } else if (wc>"27000" && wc<="29999")  {
                var p=55;
             } else if (wc>"29999" && wc<="33600")  {
                var p=60;
             } else if (wc>"33600" && wc<="36100")  {
                var p=65;
             } else if (wc>"36100" && wc<="38700")  {
                var p=70;
             } else if (wc>"38701" && wc<="40700")  {
                var p=75;
             } else if (wc>"40700" && wc<="42700")  {
                var p=80;
             } else if (wc>"42700" && wc<="45000")  {
                var p=85;
             } else if (wc>"45000" && wc<="48000")  {
                var p=90;
             } else if (wc>"48000" && wc<="49500")  {
                var p=95;
             } else if (wc>"49500" && wc<="52000")  {
                var p=100;
             } else if (wc>"52000" && wc<="54500")  {
                var p=105;
             } else if (wc>"54500" && wc<="57000")  {
                var p=110;
             } else if (wc>"57000" && wc<="59999")  {
                var p=115;
             } else if (wc>"59999" && wc<="63000")  {
                var p=120;
             } else if (wc>"63000" && wc<="68000")  {
                var p=125;
             } else if (wc>"68000" && wc<="72000")  {
                var p=130;
             } else if (wc>"72000" && wc<="76000")  {
                var p=135;
             } else if (wc>"76000" && wc<="79999")  {
                var p=140;
             } else if (wc>"79999" && wc<="85999")  {
                var p=145;
             } else if (wc>"85999" && wc<="92000")  {
                var p=150;
             } else if (wc>"92000" && wc<="99999")  {
                var p=155;
             }  else if (wc>"99999" && wc<="105000")    {
                var p=160;
             }  else if (wc>"105000" && wc<="110000")   {
                var p=170;
             }  else if (wc>"110000" && wc<="115000")   {
                var p=180;
             }  else if (wc>"115000" && wc<="120000")   {
                var p=190;
             }  else if (wc>"120000" && wc<="125000")   {
                var p=200;
             }  else if (wc>"125000" && wc<="130000")   {
                var p=210;
             }  else if (wc>"130000" && wc<="135000")   {
                var p=220;
             }  else if (wc>"135000" && wc<="139999")   {
                var p=230;
             }  else if (wc>"139999" && wc<="150000")   {
                var p=240;
             }  else if (wc>"150000" && wc<="159999")   {
                var p=245;
             }  else if (wc>"159999" && wc<="170000")   {
                var p=250;
             }  else if (wc>"170000" && wc<="180000")   {
                var p=260;
             }  else if (wc>"180000" && wc<="185000")   {
                var p=270;
             }  else if (wc>"185000" && wc<="192000")   {
                var p=280;
             }  else if (wc>"192000" && wc<="199999")   {
                var p=290;
             }  else if (wc>"199999" && wc<="250000")   {
                var p=300;
             }
             $("#message_cost").val(p);
        }
     });

这是我的标记：

<form action="<?php the_permalink(); ?>" method="post">
                <p><label for="name">Name: <span>*</span> <br><input type="text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p>
                <p><label for="message_email">Email: <span>*</span> <br><input type="text" name="message_email" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p>
                <p><label for="message_service">Service: <span>*</span><br><select name="message_service"><option value="<?php echo esc_attr($_POST['message_service']); ?>Critique">Critique</option>
                    <option value="<?php echo esc_attr($_POST['message_service']); ?>Standard Edit">Standard Edit</option>
                    <option value="<?php echo esc_attr($_POST['message_service']); ?>Comprehensive">Comprehensive</option>
                </select></label></p>
                <p><label for="message_wordcount">Word Count: <span>*</span> <br><input  id="message_wordcount" type="text" name="message_wordcount" value="<?php echo esc_attr($_POST['message_wordcount']); ?>"></label> &nbsp <a href="#" id="cC">Calculate Cost</a></p>
                <p><label for="message_cost">Total Cost: <br><input id="message_cost" type="text" name="message_cost" value="<?php echo esc_attr($_POST['message_cost']); ?>" readonly></label></p>
                <p><label for="message_text">Message: <span>*</span> <br><textarea type="text" name="message_text"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p>
                <p><label for="message_human">Human Verification: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p>
                <input type="hidden" name="submitted" value="1">
                <p><input type="submit"></p>
              </form>

然而，当wordcount框改变时似乎没有任何事情发生 - 我可以让函数在将它与表单集成之前返回价格。

感谢任何帮助，谢谢

Answer 1

检查下面的小提琴。希望这可以帮助你

获取字符串数 - DEMO HERE 要计算字数 - DEMO HERE

取代parseInt，获取字符串的长度而不是更改函数给出keyup函数。

JS在这里

$("#message_wordcount").keyup(function() {
    var p;
    var wc=$("#message_wordcount").val().length; 
    if (wc<="1200") {
        var p=2.5;                  
    } else if (wc>"1200" && wc<="2500")    {
        var p=5;
    } else if (wc>"2500" && wc<="4000")    {
        var p=10;
    } else if (wc>"4000" && wc<="6500")    {
        var p=15;
    } else if (wc>"6500" && wc<="8000")    {
        var p=20;
    } else if (wc>"8000" && wc<="12000")   {
        var p=25;
    } else if (wc>"12000" && wc<="16000")  {
        var p=30;
    } else if (wc>"16000" && wc<="20500")  {
        var p=35;
    } else if (wc>"20500" && wc<="22500")  {
        var p=40;
    } else if (wc>"22500" && wc<="25500")  {
        var p=45;
    } else if (wc>"25500" && wc<="27000")  {
        var p=50;
    } else if (wc>"27000" && wc<="29999")  {
        var p=55;
    } else if (wc>"29999" && wc<="33600")  {
        var p=60;
    } else if (wc>"33600" && wc<="36100")  {
        var p=65;
    } else if (wc>"36100" && wc<="38700")  {
        var p=70;
    } else if (wc>"38701" && wc<="40700")  {
        var p=75;
    } else if (wc>"40700" && wc<="42700")  {
        var p=80;
    } else if (wc>"42700" && wc<="45000")  {
        var p=85;
    } else if (wc>"45000" && wc<="48000")  {
        var p=90;
    } else if (wc>"48000" && wc<="49500")  {
        var p=95;
    } else if (wc>"49500" && wc<="52000")  {
        var p=100;
    } else if (wc>"52000" && wc<="54500")  {
        var p=105;
    } else if (wc>"54500" && wc<="57000")  {
        var p=110;
    } else if (wc>"57000" && wc<="59999")  {
        var p=115;
    } else if (wc>"59999" && wc<="63000")  {
        var p=120;
    } else if (wc>"63000" && wc<="68000")  {
        var p=125;
    } else if (wc>"68000" && wc<="72000")  {
        var p=130;
    } else if (wc>"72000" && wc<="76000")  {
        var p=135;
    } else if (wc>"76000" && wc<="79999")  {
        var p=140;
    } else if (wc>"79999" && wc<="85999")  {
        var p=145;
    } else if (wc>"85999" && wc<="92000")  {
        var p=150;
    } else if (wc>"92000" && wc<="99999")  {
        var p=155;
    }  else if (wc>"99999" && wc<="105000")    {
        var p=160;
    }  else if (wc>"105000" && wc<="110000")   {
        var p=170;
    }  else if (wc>"110000" && wc<="115000")   {
        var p=180;
    }  else if (wc>"115000" && wc<="120000")   {
        var p=190;
    }  else if (wc>"120000" && wc<="125000")   {
        var p=200;
    }  else if (wc>"125000" && wc<="130000")   {
        var p=210;
    }  else if (wc>"130000" && wc<="135000")   {
        var p=220;
    }  else if (wc>"135000" && wc<="139999")   {
        var p=230;
    }  else if (wc>"139999" && wc<="150000")   {
        var p=240;
    }  else if (wc>"150000" && wc<="159999")   {
        var p=245;
    }  else if (wc>"159999" && wc<="170000")   {
        var p=250;
    }  else if (wc>"170000" && wc<="180000")   {
        var p=260;
    }  else if (wc>"180000" && wc<="185000")   {
        var p=270;
    }  else if (wc>"185000" && wc<="192000")   {
        var p=280;
    }  else if (wc>"192000" && wc<="199999")   {
        var p=290;
    }  else if (wc>"199999" && wc<="250000")   {
        var p=300;
    }
    $("#message_cost").val(p);
});

HTML表单

<input  id="message_wordcount" type="text" name="message_wordcount" value="" />
<input id="message_cost" value="" />

Answer 2

仅当焦点离开输入字段时才会触发change事件。您可以使用类似keyup之类的内容来做出反应，同时焦点仍然在输入字段上。

正如@Liam指出的那样，您的代码中也存在语法错误。大多数现代浏览器都带有开发人员工具，可帮助您跟踪运行时错误。如果您使用Chrome，则可以按F12启动开发人员工具。单击“控制台”选项卡，然后刷新网页以查看运行时错误列表。