Copying one form's values to another form using JQuery

Posted by rsturim on Stack Overflow See other posts from Stack Overflow or by rsturim
Published on 2010-06-18T03:11:09Z Indexed on 2010/06/18 3:23 UTC
Read the original article Hit count: 320

Filed under:
|

I have a "shipping" form that I want to offer users the ability to copy their input values over to their "billing" form by simply checking a checkbox.

I've coded up a solution that works -- but, I'm sort of new to jQuery and wanted some criticism on how I went about achieving this. Is this well done -- any refactorings you'd recommend?

Any advice would be much appreciated!

The Script

<script type="text/javascript">
$(function() {
   $("#copy").click(function() {
  if($(this).is(":checked")){
    var $allShippingInputs = $(":input:not(input[type=submit])", "form#shipping");
    $allShippingInputs.each(function() {
      var billingInput = "#" + this.name.replace("ship", "bill");
      $(billingInput).val($(this).val());
    })
    //console.log("checked");
  } else {
    $(':input','#billing')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');
    //console.log("not checked")
  }
 });
});
</script>

The Form

<div>
  <form action="" method="get" name="shipping" id="shipping">
    <fieldset>
      <legend>Shipping</legend>
      <ul>
        <li>
          <label for="ship_first_name">First Name:</label>
          <input type="text" name="ship_first_name" id="ship_first_name" value="John" size="" />
        </li>
        <li>
          <label for="ship_last_name">Last Name:</label>
          <input type="text" name="ship_last_name" id="ship_last_name" value="Smith" size="" />
        </li>
        <li>
          <label for="ship_state">State:</label>
          <select name="ship_state" id="ship_state">
            <option value="RI">Rhode Island</option>
            <option value="VT" selected="selected">Vermont</option>
            <option value="CT">Connecticut</option>
          </select>
        </li>
        <li>
          <label for="ship_zip_code">Zip Code</label>
          <input type="text" name="ship_zip_code" id="ship_zip_code" value="05401" size="8" />
        </li>
        <li>
          <input type="submit" name="" />
        </li>
      </ul>
    </fieldset>
  </form>
</div>
<div>
  <form action="" method="get" name="billing" id="billing">
    <fieldset>
      <legend>Billing</legend>
      <ul>
        <li>
          <input type="checkbox" name="copy" id="copy" />
          <label for="copy">Same of my shipping</label>
        </li>
        <li>
          <label for="bill_first_name">First Name:</label>
          <input type="text" name="bill_first_name" id="bill_first_name" value="" size="" />
        </li>
        <li>
          <label for="bill_last_name">Last Name:</label>
          <input type="text" name="bill_last_name" id="bill_last_name" value="" size="" />
        </li>
        <li>
          <label for="bill_state">State:</label>
          <select name="bill_state" id="bill_state">
            <option>-- Choose State --</option>
            <option value="RI">Rhode Island</option>
            <option value="VT">Vermont</option>
            <option value="CT">Connecticut</option>
          </select>
        </li>
        <li>
          <label for="bill_zip_code">Zip Code</label>
          <input type="text" name="bill_zip_code" id="bill_zip_code" value="" size="8" />
        </li>
        <li>
          <input type="submit" name="" />
        </li>
      </ul>
    </fieldset>
  </form>
</div>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery