Submit and Show Data using jQuery - issue

Question

I'm trying to submit form data without refreshing the page using jQuery. I've added all the following code in correct places but the page refreshes and nothing happened, neither it echo's the success data nor it inserts any data into sql db. Here is what I'm trying to do;

HTML:

        $profile_comments = '
        <form action="#" method="post">
            <table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="sideboxes_tborder">
                <tr>
                    <td class="sideboxes_thead">Post Comments</td>
                </tr>
                <tr>
                    <td class="sideboxes_trow">
                        <input type="text" class="textbox_comment" name="message" id="pc_message" tabindex="1" autocomplete="off" />
                    </td>
                </tr>
                <tr>
                    <td class="sideboxes_trow" align="left">
                        <input type="hidden" name="uid" value="'.$memprofile['uid'].'" />
                        <input type="hidden" name="from_uid" value="'.$mybb->user['uid'].'" />
                        <input type="submit" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">
                    </td>
                </tr>
                <tr>
                    <td class="sideboxes_trow"><div id="show_profile_comments" style="overflow: auto; max-height: 313px;"></div></td>
                </tr>
            </table>
        </form>';

jQuery:

jQuery.noConflict();

jQuery(document).ready(function($)
{
    $("#comment_submit").click(function()
    {

            var message = $( "#pc_message" ).val(),

            if (message == '')
            {
                alert( "Message is missing!!" );
                return;
            }

            $.ajax(
            {
                type : "post",
                dataType: "html",
                url : "pro_profile.php?action=do_comment",
                data : "message=" + message,
                success : function(response)
                {
                    $('#show_profile_comments').html(response);
                }
                document.getElementById('pc_message').value = '';
                document.getElementById('pc_message').focus();

                if (response.error)
                {
                    alert(response.error);
                }
            });
    });
});

PHP:

if ($_POST['action'] == "do_comment")
{
    $uid = intval($mybb->input['uid']);
    $insert_array = array(
        "uid" => $uid,
        "from_uid" => intval($mybb->input['from_uid']),
        "approved" => '1',
        "message" => $db->escape_string($mybb->input['message']),
        "dateline" => TIME_NOW
    );
    $db->insert_query("pp_comments", $insert_array);

    $query = $db->simple_select("pp_comments", "*", "uid='{$uid}'");
    $c = $db->fetch_array($query);

    echo $c['message'];
}

Please help!

in your jQuery part, did you get value into message variable and if its empty did it show alert message? — m-t
– m-t, Commented Oct 26, 2013 at 12:20
No it doesn't alerting if the message input box is empty either :s — user2854563
– user2854563, Commented Oct 26, 2013 at 12:23
Give your form an id="msgSubmit" and in your jquery replace var message = $( "#pc_message" ).val(), if (message == '') { alert( "Message is missing!!" ); return; } with var datastring = $("#msgSubmit").serialize(); and then alert this datastring. and let me know you are getting msg or not? because most of this happens with me if i use $ multiple time nothing happens. — m-t
– m-t, Commented Oct 26, 2013 at 12:29

Community · Accepted Answer · 2020-06-20 09:12:55Z

if this should be on success

document.getElementById('pc_message').value = '';

document.getElementById('pc_message').focus();

change your JS code to this

jQuery.noConflict();

jQuery(document).ready(function($)
{
    $("#comment_submit").on('click', function()
    {

            var message = $( "#pc_message" ).val(),

            if (message == '')
            {
                alert( "Message is missing!!" );
                return;
            }

            $.ajax(
            {
                type : "post",
                dataType: "html",
                url : "pro_profile.php?action=do_comment",
                data : "message=" + message,
                success : function(response)
                {
                    $('#show_profile_comments').html(response);
                    document.getElementById('pc_message').value = '';
                document.getElementById('pc_message').focus();
                },
            error : function(response)
                {
                    alert(response.responseText);
                }
            });
            
            return false;
    });
});

Manwal · Accepted Answer · 2013-10-26 11:57:05Z

0

Just because you are using click event on submit buttton

replace

<input type="submit" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">

with

<input type="button" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">

answered Oct 26, 2013 at 11:57

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

4 Comments

user2854563 Over a year ago

Its not a issue Deepak, I've tried your suggestion but it doesn't works.

user2854563 Over a year ago

No it doesn't alerting if the message input box is empty either :s

Manwal Over a year ago

ok remove form from you code <form> remove opening form and closing form you don't need it. then check its alerting or not

user2854563 Over a year ago

I've removed opening and closing form tags and it doesn't alerting either.

underscore · Accepted Answer · 2013-10-26 11:59:16Z

0

use .on

$("#buttonId").on('click',function(e){
    e.preventDefault();
  });

e.preventDefault()

Description: If this method is called, the default action of the event will not be triggered.

it's ok either button or submit

<input type="submit" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">

answered Oct 26, 2013 at 11:59

underscore

6,9277 gold badges44 silver badges82 bronze badges

Comments

Osama Jetawe · Accepted Answer · 2013-10-26 12:02:37Z

0

change your button from submit type to button type

<input type="button" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">

or prevent Default form submit

$("#yourFormName").submit(function(e){
    e.preventDefault();
  });

edited Oct 26, 2013 at 12:02

answered Oct 26, 2013 at 11:57

Osama Jetawe

2,7057 gold badges27 silver badges45 bronze badges

Comments

Jorge Y. C. Rodriguez · Accepted Answer · 2013-10-26 12:27:45Z

0

Just changed the type for the button

<input type="button" class="button" id="comment_submit" name="submit" value="Post Comment" tabindex="2">

or just make it as a button:

<button type="button" class="button" id="comment_submit" name="submit">Post Comment</button>

or in the <form> if it has an id:

jQuery(function(){
    jQuery("#yourform").submit(function(e) {       
      e.preventDefault();
    });
});

or in the form tag

<form type="post" onclick="return false">

edited Oct 26, 2013 at 12:27

answered Oct 26, 2013 at 12:00

Jorge Y. C. Rodriguez

3,4665 gold badges42 silver badges64 bronze badges

7 Comments

Jorge Y. C. Rodriguez Over a year ago

What doesnt work? that it is the way to stop a page from submit a form

user2854563 Over a year ago

I've tried both ways, by using input type="button" as well as <button ..> neither of them works. I've also tried with the edited jquery you suggested but unfortunately it doesn't work either.

Jorge Y. C. Rodriguez Over a year ago

can you post the rest of the html? because that it is a really odd behavior :S

user2854563 Over a year ago

I can't since this comment box here doesn't allow me to post more then 550 characters. Anyway the HTML is same as I posted in question above.

Jorge Y. C. Rodriguez Over a year ago

try onclick="return false" in the form tag

|

Collectives™ on Stack Overflow

Submit and Show Data using jQuery - issue

HTML:

jQuery:

PHP:

5 Answers 5

Comments

4 Comments

Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML:

jQuery:

PHP:

5 Answers 5

Comments

4 Comments

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related