title: Dynamically Updating Form Field With jQuery
body: <p>I'm building a cost calculator that takes an integer from a text box, if it is within two certain figures a cost is then passed to a cost field on the form. I was going to use PHP but struggled getting an ajax call to work, here is what I've come up with so far in jQuery:</p>
  
  <pre><code>$("#message_wordcount").change(function() {
          var p;
          var service = $("#message_service").val();
          var wc=parseInt($("#message_wordcount").val(), 10);
  
          if($(service=="Critique")
          {
              if (wc&lt;="1200") {
                  var p=2.5;                  
               } else if (wc&gt;"1200" &amp;&amp; wc&lt;="2500")    {
                  var p=5;
               } else if (wc&gt;"2500" &amp;&amp; wc&lt;="4000")    {
                  var p=10;
               } else if (wc&gt;"4000" &amp;&amp; wc&lt;="6500")    {
                  var p=15;
               } else if (wc&gt;"6500" &amp;&amp; wc&lt;="8000")    {
                  var p=20;
               } else if (wc&gt;"8000" &amp;&amp; wc&lt;="12000")   {
                  var p=25;
               } else if (wc&gt;"12000" &amp;&amp; wc&lt;="16000")  {
                  var p=30;
               } else if (wc&gt;"16000" &amp;&amp; wc&lt;="20500")  {
                  var p=35;
               } else if (wc&gt;"20500" &amp;&amp; wc&lt;="22500")  {
                  var p=40;
               } else if (wc&gt;"22500" &amp;&amp; wc&lt;="25500")  {
                  var p=45;
               } else if (wc&gt;"25500" &amp;&amp; wc&lt;="27000")  {
                  var p=50;
               } else if (wc&gt;"27000" &amp;&amp; wc&lt;="29999")  {
                  var p=55;
               } else if (wc&gt;"29999" &amp;&amp; wc&lt;="33600")  {
                  var p=60;
               } else if (wc&gt;"33600" &amp;&amp; wc&lt;="36100")  {
                  var p=65;
               } else if (wc&gt;"36100" &amp;&amp; wc&lt;="38700")  {
                  var p=70;
               } else if (wc&gt;"38701" &amp;&amp; wc&lt;="40700")  {
                  var p=75;
               } else if (wc&gt;"40700" &amp;&amp; wc&lt;="42700")  {
                  var p=80;
               } else if (wc&gt;"42700" &amp;&amp; wc&lt;="45000")  {
                  var p=85;
               } else if (wc&gt;"45000" &amp;&amp; wc&lt;="48000")  {
                  var p=90;
               } else if (wc&gt;"48000" &amp;&amp; wc&lt;="49500")  {
                  var p=95;
               } else if (wc&gt;"49500" &amp;&amp; wc&lt;="52000")  {
                  var p=100;
               } else if (wc&gt;"52000" &amp;&amp; wc&lt;="54500")  {
                  var p=105;
               } else if (wc&gt;"54500" &amp;&amp; wc&lt;="57000")  {
                  var p=110;
               } else if (wc&gt;"57000" &amp;&amp; wc&lt;="59999")  {
                  var p=115;
               } else if (wc&gt;"59999" &amp;&amp; wc&lt;="63000")  {
                  var p=120;
               } else if (wc&gt;"63000" &amp;&amp; wc&lt;="68000")  {
                  var p=125;
               } else if (wc&gt;"68000" &amp;&amp; wc&lt;="72000")  {
                  var p=130;
               } else if (wc&gt;"72000" &amp;&amp; wc&lt;="76000")  {
                  var p=135;
               } else if (wc&gt;"76000" &amp;&amp; wc&lt;="79999")  {
                  var p=140;
               } else if (wc&gt;"79999" &amp;&amp; wc&lt;="85999")  {
                  var p=145;
               } else if (wc&gt;"85999" &amp;&amp; wc&lt;="92000")  {
                  var p=150;
               } else if (wc&gt;"92000" &amp;&amp; wc&lt;="99999")  {
                  var p=155;
               }  else if (wc&gt;"99999" &amp;&amp; wc&lt;="105000")    {
                  var p=160;
               }  else if (wc&gt;"105000" &amp;&amp; wc&lt;="110000")   {
                  var p=170;
               }  else if (wc&gt;"110000" &amp;&amp; wc&lt;="115000")   {
                  var p=180;
               }  else if (wc&gt;"115000" &amp;&amp; wc&lt;="120000")   {
                  var p=190;
               }  else if (wc&gt;"120000" &amp;&amp; wc&lt;="125000")   {
                  var p=200;
               }  else if (wc&gt;"125000" &amp;&amp; wc&lt;="130000")   {
                  var p=210;
               }  else if (wc&gt;"130000" &amp;&amp; wc&lt;="135000")   {
                  var p=220;
               }  else if (wc&gt;"135000" &amp;&amp; wc&lt;="139999")   {
                  var p=230;
               }  else if (wc&gt;"139999" &amp;&amp; wc&lt;="150000")   {
                  var p=240;
               }  else if (wc&gt;"150000" &amp;&amp; wc&lt;="159999")   {
                  var p=245;
               }  else if (wc&gt;"159999" &amp;&amp; wc&lt;="170000")   {
                  var p=250;
               }  else if (wc&gt;"170000" &amp;&amp; wc&lt;="180000")   {
                  var p=260;
               }  else if (wc&gt;"180000" &amp;&amp; wc&lt;="185000")   {
                  var p=270;
               }  else if (wc&gt;"185000" &amp;&amp; wc&lt;="192000")   {
                  var p=280;
               }  else if (wc&gt;"192000" &amp;&amp; wc&lt;="199999")   {
                  var p=290;
               }  else if (wc&gt;"199999" &amp;&amp; wc&lt;="250000")   {
                  var p=300;
               }
               $("#message_cost").val(p);
          }
       });
  </code></pre>
  
  <p>And here is my markup:</p>
  
  <pre><code>&lt;form action="&lt;?php the_permalink(); ?&gt;" method="post"&gt;
                  &lt;p&gt;&lt;label for="name"&gt;Name: &lt;span&gt;*&lt;/span&gt; &lt;br&gt;&lt;input type="text" name="message_name" value="&lt;?php echo esc_attr($_POST['message_name']); ?&gt;"&gt;&lt;/label&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label for="message_email"&gt;Email: &lt;span&gt;*&lt;/span&gt; &lt;br&gt;&lt;input type="text" name="message_email" value="&lt;?php echo esc_attr($_POST['message_email']); ?&gt;"&gt;&lt;/label&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label for="message_service"&gt;Service: &lt;span&gt;*&lt;/span&gt;&lt;br&gt;&lt;select name="message_service"&gt;&lt;option value="&lt;?php echo esc_attr($_POST['message_service']); ?&gt;Critique"&gt;Critique&lt;/option&gt;
                      &lt;option value="&lt;?php echo esc_attr($_POST['message_service']); ?&gt;Standard Edit"&gt;Standard Edit&lt;/option&gt;
                      &lt;option value="&lt;?php echo esc_attr($_POST['message_service']); ?&gt;Comprehensive"&gt;Comprehensive&lt;/option&gt;
                  &lt;/select&gt;&lt;/label&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label for="message_wordcount"&gt;Word Count: &lt;span&gt;*&lt;/span&gt; &lt;br&gt;&lt;input  id="message_wordcount" type="text" name="message_wordcount" value="&lt;?php echo esc_attr($_POST['message_wordcount']); ?&gt;"&gt;&lt;/label&gt; &amp;nbsp &lt;a href="#" id="cC"&gt;Calculate Cost&lt;/a&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label for="message_cost"&gt;Total Cost: &lt;br&gt;&lt;input id="message_cost" type="text" name="message_cost" value="&lt;?php echo esc_attr($_POST['message_cost']); ?&gt;" readonly&gt;&lt;/label&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label for="message_text"&gt;Message: &lt;span&gt;*&lt;/span&gt; &lt;br&gt;&lt;textarea type="text" name="message_text"&gt;&lt;?php echo esc_textarea($_POST['message_text']); ?&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label for="message_human"&gt;Human Verification: &lt;span&gt;*&lt;/span&gt; &lt;br&gt;&lt;input type="text" style="width: 60px;" name="message_human"&gt; + 3 = 5&lt;/label&gt;&lt;/p&gt;
                  &lt;input type="hidden" name="submitted" value="1"&gt;
                  &lt;p&gt;&lt;input type="submit"&gt;&lt;/p&gt;
                &lt;/form&gt;
  </code></pre>
  
  <p>However nothing seems to happen when the wordcount box is changed - I could get the function to return the price prior to integrating it with the form.</p>
  
  <p>Any help would be appreciated, thanks</p>