0

My problem is somewhat the same as this post but the accepted answer on that did not work for me. I had also tried to use e.preventDefault() referencing from this post but I still faced the same problem.

My form comes from a php file which are populated from the result set of a query

<?php

require "conn.php";

$load_questions = $conn->query("Select * from sqlearn_questions");

$questions = '';

while($row = $load_questions->fetch_assoc()){
    $questions .= '
        <form class = "add-question-form" >
            <table class = "question_item">
                <tr>
                    <td colspan = "3">
                        <p id = "qitem_header">From: <input id = "qitem_header" type = "" name = "user_id" value = "' . $row["USER_ID"] . '"></p>
                    </td>
                </tr>
                <tr>
                    <td id = "td_inst"><input type = "" name = "instruction" value = "' . $row["INSTRUCTION"] . '"</td>
                    <td><input id = "qitem" type = "" name = "question" value = "' . $row["QUESTION"] . '"</td>
                    <td><input id = "qitem" type = "" name = "answer" value = "' . $row["ANSWER"] . '"</td>
                </tr>
                <tr>
                    <td></td><td></td>
                    <td id = "td_btn_holder"><button id = "#qitem_post">Post</button></td>
                </tr>
            </table>
        </form>';
}

echo $questions;

?>

Here's my js script

$("#qitem_post").click(function(e){

    e.preventDefault();

    var data = $(".add-question-form").serialize();

    $.post("add-question.php", data)
    .done(function(msg){ alert(msg); });

});

and here's my html content:

<html>


<title>SQLearn</title>

<link rel = "stylesheet" type = "text/css" href = "style/ui_layout.css" />
<script src = "javascript/jquery-3.2.0.js"></script>
<script src = "javascript/script.js"></script>


<div class = "container">

    <img id = "header_img" src = "images/sqlearn_header.png" width = "200" height = "100" />

    <div class = "login_layout">

        <input class = "login_inputs" id = "aid" type = "text" /><br />
        <input class = "login_inputs" id = "password" type = "password" /><br />
        <button id = "login_btn">Sign In</button>
        <p id = "login_response"></p>
    </div>

    <nav>

        <ul id = "nav_list">
            <li>Admin</li>
            <li>Questions</li>
            <li>Reviews</li>
            <li>Reports</li>
        </ul>

    </nav>

    <div class = "review_questions">
        <!-- The content of this div will be populated from javascript -->
    </div>

</div>

My theory is the problem is caused by my php file where I echoed the form. Hope someone could explain to me my error. Thanks !

Community
  • 1
  • 1
iamLinker
  • 68
  • 7
  • Are you repeating IDs in your page? The PHP seems irrelevant here as we need to see the rendered HTML. – j08691 Mar 20 '17 at 17:22
  • @j08691 No sir i do not, that's everything in my HTML – iamLinker Mar 20 '17 at 17:28
  • 1
    It certainly looks like you do. In your while loop you have elements with fixed IDs, so if your loop executes more than one time you are duplicating IDs. – j08691 Mar 20 '17 at 17:29
  • Ah, thank you sir for pointing that out to me, I completely overlooked that one. I'll edit my code and update you for the changes. Thanks – iamLinker Mar 20 '17 at 17:37

2 Answers2

0

Put a return false; at the end of your javascript function.

devsdmf
  • 411
  • 3
  • 15
0

It's because you are binding the button and the form is "free" to submit.

I recommend you to bind the form in this case, but adding this should resolve your problem:

$('.add-question-form').bind('submit', function() { return false; });

Or adding this attribute on your form:

<form class = "add-question-form" onsubmit="return false;">

UPDATE

I think your best approach would be bind the form, try to use this js code:

$(".add-question-form").bind('submit', function(e){

    e.preventDefault();

    var data = $(this).serialize();

    $.post("add-question.php", data)
    .done(function(msg){ alert(msg); });

});

and your button change to this: 

<button type="submit">Post</button>
rneves
  • 2,013
  • 26
  • 35