jQuery change URL of form submit

Question

I want to change the URL the form is submitted to upon click as seen below. Below is what I have tried but it does not work.

<form action="" method="post" class="form-horizontal" id="contactsForm" enctype="multipart/form-data">
  <div class="widget-content">

    <div class="btn-group">
      <button data-toggle="dropdown" class="btn dropdown-toggle">  &nbsp;
        <span class="icon-folder-open icon-large"></span>
        Move To <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        {% for x,y in actionsForm.fields.move_to.choices %}
        <li><a class="move_to" id="{{ x }}" href="#">{{ y }}</a></li>
        {% endfor %}

<script>
    $(document).ready(function() {
        $(".move_to").on("click", function () {
            $('#contactsFrom').attr('action', "/test1");
            $("#contactsFrom").submit();
            e.preventDefault();
        });
    });
</script>

Answer 1

Try using this:

$(".move_to").on("click", function(e){
    e.preventDefault();
    $('#contactsForm').attr('action', "/test1").submit();
});

Moving the order in which you use .preventDefault() might fix your issue. You also didn't use function(e) so e.preventDefault(); wasn't working.

Here it is working: http://jsfiddle.net/TfTwe/1/ - first of all, click the 'Check action attribute.' link. You'll get an alert saying undefined. Then click 'Set action attribute.' and click 'Check action attribute.' again. You'll see that the form's action attribute has been correctly set to /test1.

Answer 2

Send the data from the form:

$("#change_section_type").live "change", ->
url = $(this).attr("data-url")
postData = $(this).parents("#contract_setting_form").serializeArray()
$.ajax
  type: "PUT"
  url: url
  dataType: "script"
  data: postData