0

I am very confused as to how to write the code in javascript/jquery to allow for the proper submission of my form. I currently have a function to handle an on-click event, which loads the proper form. However, the form fails to submit successfully. I am using the .submit() function, but I think I am missing something here. I believe the URL I would have to place in that function would be the one being dynamically loaded in the onclick function. Is there a reasonable way to transfer this information? Or am I mistaken? I have already confirmed that the correct URL is loaded and that the form behaves as intended if the URL is accessed manually. This issue seems to be unique to loading the URL

from select_my_book.html (the url to be loaded)

   <form action="" method="POST" id="submitForm">
        {% csrf_token %}
        <!-- Code to render form elements -->
        <input type="submit" value = "Buy" id="submit">
    </form>

from get_my_book.html (the current url with the tabs/jumbotron)

{% for course in userprofile.courses.all%}
    <div class="minicoursenav">
      <a class='course_link' data='{{ course.pk }}' href='#' type="submit">
          {{ course.name }}
      </a>
    </div>
{% endfor %} 

from activate.js

function selectConditionURL(criterion, condition){
    var url = "/books/select_my_book/"
    return(url+ condition + "/" + criterion + "/")

}

function selectCourseURL(criterion){
    var url = "/books/select_my_book/best_price/";
    return (url + criterion + "/"); 
}

$('.course_link').click(function(e) {
    e.preventDefault();
    var course_pk = $(this).attr('data');
    /*alert( course_pk );*/
    var url = selectCourseURL(course_pk);
    /*alert( url );*/
    $("#best_price").load(url);
    $("#very_good").load(selectConditionURL(course_pk, "very_good_condition"));
    $("#good").load(selectConditionURL(course_pk, "good_condition"));
    $("#fine").load(selectConditionURL(course_pk, "fine_condition"));
    return false;
})

$(document).ready(function() {
    $("#submitForm").submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            /* NOT SURE WHAT SHOULD GO HERE */
            success: function(response) {
                console.log(response)
            }
        });
        return false; 
    })
})
4
  • try: <form action=""> Aug 9, 2014 at 0:52
  • Aron, yes definitely! It should be empty. I had changed that field when experimenting. Unfortunately, I still get the same problem even with it removed...
    – Neal
    Aug 9, 2014 at 1:00
  • Without setting the 'url' property of the ajax settings object, you will be POSTing to the current page. You also are not setting a 'data' property, which you will need if you want to send form data to the server.
    – 76484
    Aug 9, 2014 at 2:44
  • You can just do data: $(this).serialize() to send the data across.
    – karthikr
    Aug 9, 2014 at 2:47

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.