Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post

    Ajax post, then display PHP echo message

    I want to insert a record into mysql through a form without leaving the page.. ajax! But I have tried every conceivable jquery ajax example I can find. I cant for the life of me make this work. I am so frustrated...I just do not get it. Please please help me! What am I doing wrong???

    My JS (yes jquery is running):
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	$("form#share").submit(function() {
    	// we want to store the values from the form input box, then send via ajax below
    	var memberid     = $('#memberid').attr('value');
    	var thismember     = $('#thismember').attr('value');
    		$.ajax({
    			type: "POST",
    			url: "functions/request.php",
    			data: "memberid="+ memberid +"&amp; thismember="+ thismember,
    			success: function(){
    				$('form#share').hide(function(){$('div.result').fadeIn();});
    				$(data).appendTo('#result');
    
    			}
    		});
    	return false;
    	});
    });
    </script>
    My form:
    Code:
    form id="share" method="post">
    Name:
    <input type="text" name="member" id="member" size="25" onchange="document.getElementById('memberid').value='';">
    <input type="hidden" name="memberid" id="memberid" size="25">
    
    <input type="hidden" name="thismember" value="<?php echo $_SESSION['SESS_MEMBER_ID'];?>">
    <input type="submit" value="Send Request">
    </form>
    <div class="result"></div>
    My PHP file has a couple different functions, checks weather the user exists, if not echo's an error message, or checks if a record already exists if it does echo's an error message, if nothing is wrong the record is inserted and it echos's a success message.... pretty standard stuff. I need the html page to display the echo from the php page on submit, because there are 3 things that could occur.

    I have tried for days. It cant be that hard, what am I missing?
    EDIT: I should note that when you submit, the form does indeed hide, but no echo is displayed at all. And the php does not run because there are no new records being inserted.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    In your jq you have
    Code:
    $(data).appendTo('#result');
    that is looking for an ID of result, but you have a class
    Code:
    <div class="result"></div>
    This is the success: function you need:
    Code:
    success: function(data){
    	$('form#share').hide(function(){$('div.result').fadeIn();});
    	$('.result').html(data);
    }
    In your
    Code:
    data: "memberid="+ memberid +"&amp;thismember
    the &amp; is wrong S/B simply &.

    In your body the form tag is missing the first <.
    This line
    Code:
    <input type="hidden" name="thismember" value="<?php echo $_SESSION['SESS_MEMBER_ID'];?>">
    This missing the id="thismember". And you need to start sessions if you use $_SESSION['SESS_MEMBER_ID'].

    Finished code:
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    	$("form#share").submit(function() {
    	// we want to store the values from the form input box, then send via ajax below
    	var memberid     = $('#member').attr('value');
    	var thismember     = $('#thismember').attr('value');
    		$.ajax({
    			type: "POST",
    			url: "functions/request.php",
    			data: "memberid="+ memberid +"&thismember="+ thismember,
    			success: function(data){
    				$('form#share').hide(function(){$('div.result').fadeIn();});
    				$('.result').html(data);
    			}
    		});
    	return false;
    	});
    
    });
    </script>
    
    </head>
    
    <body>
    <form id="share" method="post" action="">
    Name:
    <input type="text" name="member" id="member" size="25" onchange="document.getElementById('memberid').value='';">
    <input type="hidden" name="memberid" id="memberid" size="25">
    
    <input type="hidden" name="thismember" id="thismember" value="456">
    <input type="submit" value="Send Request">
    </form>
    <div class="result"></div>
    
    </body>
    </html>

  • Users who have thanked sunfighter for this post:

    rtown (04-15-2012)

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    In your jq you have
    Code:
    $(data).appendTo('#result');
    that is looking for an ID of result, but you have a class
    Code:
    <div class="result"></div>
    This is the success: function you need:
    Code:
    success: function(data){
    	$('form#share').hide(function(){$('div.result').fadeIn();});
    	$('.result').html(data);
    }
    In your
    Code:
    data: "memberid="+ memberid +"&amp;thismember
    the &amp; is wrong S/B simply &.

    In your body the form tag is missing the first <.
    This line
    Code:
    <input type="hidden" name="thismember" value="<?php echo $_SESSION['SESS_MEMBER_ID'];?>">
    This missing the id="thismember". And you need to start sessions if you use $_SESSION['SESS_MEMBER_ID'].

    Finished code:
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    	$("form#share").submit(function() {
    	// we want to store the values from the form input box, then send via ajax below
    	var memberid     = $('#member').attr('value');
    	var thismember     = $('#thismember').attr('value');
    		$.ajax({
    			type: "POST",
    			url: "functions/request.php",
    			data: "memberid="+ memberid +"&thismember="+ thismember,
    			success: function(data){
    				$('form#share').hide(function(){$('div.result').fadeIn();});
    				$('.result').html(data);
    			}
    		});
    	return false;
    	});
    
    });
    </script>
    
    </head>
    
    <body>
    <form id="share" method="post" action="">
    Name:
    <input type="text" name="member" id="member" size="25" onchange="document.getElementById('memberid').value='';">
    <input type="hidden" name="memberid" id="memberid" size="25">
    
    <input type="hidden" name="thismember" id="thismember" value="456">
    <input type="submit" value="Send Request">
    </form>
    <div class="result"></div>
    
    </body>
    </html>
    Wow! Thanks so much for fixing all my little errors. The form is now submitting data and the sql insert is running perfectly.

    The only issue that remains is that after the form is submitted, the form hides but the echo from the php is not showing in the result div (yes i changed it to div id )

    I dont know enough about this to troubleshoot it... any thoughts?
    Thanks very much for your help!

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    You should post the request.php file. I think that's where the problem is.

    If you place this as your first line of code in that file we'll see if the file does respond.
    Code:
    echo 'made it';die;

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    You should post the request.php file. I think that's where the problem is.

    If you place this as your first line of code in that file we'll see if the file does respond.
    Code:
    echo 'made it';die;
    Indeed this killed the page. The php did not run, and no echo was displayed.

    I have posted the php below.. thank you again!

    PHP Code:
    <?php 
    include("../includes/db.php");
    include(
    "../includes/clean.php");

    $sharewith clean($_POST["memberid"]); 
    $member clean($_POST["thismember"]); 

    // first check if the entered user exists at all
    $result mysql_query("SELECT member_id, login FROM members WHERE member_id='{$sharewith}'");
    if (
    mysql_num_rows($result) == 0) {
       echo 
    "User doesn't exist"
     } else {

        
    // if user exists, search for an existing share between these two members
        
    $resulta mysql_query("SELECT shares.gid, shares.member_id_1, shares.member_id_2, shares.share_status, members.member_id, members.firstname, members.lastname FROM shares, members WHERE members.member_id = shares.member_id_1 AND member_id_2 = '{$member}' AND member_id_1 = '{$sharewith}'  AND shares.share_status = '1' OR members.member_id = shares.member_id_2 AND member_id_1 = '{$member}' AND member_id_2 = '{$sharewith}'  AND shares.share_status = '1' ORDER BY members.firstname DESC");
        if (
    mysql_num_rows($resulta) == 1) {
            echo 
    "Share already exists!"
        } else {

                
    // no existing share was found, proceed to insert a share record
                
    while ($row mysql_fetch_array($result)) {
                
    $foundmember=$row{'member_id'};
      
                
    $sql="INSERT INTO shares (member_id_1, member_id_2, msg_request)
                VALUES
                ({$member},'$foundmember','1')"
    ;
                if (!
    mysql_query($sql,$dbhandle))
                {
                die(
    'Error: ' mysql_error());
                }
                echo 
    "A request has been sent.";
                }
      
        }

    }
    mysql_close($dbhandle);
    ?>

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Two things to try. Leave the echo 'made it';die; as the first line for both of these.
    First You remembered to put a header on the code I posted and call your jq?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="YOUR JQ PLACE.js" type="text/javascript"></script>
    Then comes the code. Leave it like that for the second thing.

    Second If that didn't work. Move the request.php file into the same directory as the script and remove the functions/ from
    Code:
    url: "functions/request.php",
    so it says
    Code:
    url: "request.php",

  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    Two things to try. Leave the echo 'made it';die; as the first line for both of these.
    First You remembered to put a header on the code I posted and call your jq?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="YOUR JQ PLACE.js" type="text/javascript"></script>
    Then comes the code. Leave it like that for the second thing.

    Second If that didn't work. Move the request.php file into the same directory as the script and remove the functions/ from
    Code:
    url: "functions/request.php",
    so it says
    Code:
    url: "request.php",
    The echo 'made it';die; makes no change to the php echo not displaying. The sql functions do not run when this line is present.

    I tried removing the "functions/" and placing that file in the same directory, no change. I also tried removing the dash for "requestshare.php", no change.

    I wouldnt think this would make a difference but I am not sure, but there is some other jquery stuff running on this page for an autocomplete text box (ajax). Could there be some conflict here?

    PHP Code:
    <script type="text/javascript">
    $().ready(function() {
        
        $("#member").autocomplete("functions/share-autocomplete.php?m=<?php echo $_SESSION['SESS_MEMBER_ID'];?>", {
            width: 260,
            matchContains: false,
            mustMatch: false,
            minChars: 2,
            //multiple: true,
            highlight: false,
            //multipleSeparator: ",",
            selectFirst: false
        });
        
        $("#member").result(function(event, data, formatted) {
            $("#memberid").val(data[1]);
        });
    });
    </script>

    <script type="text/javascript">
    $(document).ready(function() {
        $("form#share").submit(function() {
        // we want to store the values from the form input box, then send via ajax below
        var memberid     = $('#memberid').attr('value');
        var thismember     = $('#thismember').attr('value');
            $.ajax({
                type: "POST",
                url: "functions/request-share.php",
                data: "memberid="+ memberid +"&thismember="+ thismember,
                success: function(data){
                    $('form#share').hide(function(){$('div.result').fadeIn();});
                    $('.result').html(data);
                }
            });
        return false;
        });

    });
    </script>

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    I placed to new jquery into the original $(document).ready(function() and the made it message comes through. Don't know if the new jq works. Here's the code test it your self. The request.php is in the same dir and the first line is what I gave up.
    jquery script:
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    	$("form#share").submit(function() {
    	// we want to store the values from the form input box, then send via ajax below
    	var memberid     = $('#member').attr('value');
    	var thismember     = $('#thismember').attr('value');
    		$.ajax({
    			type: "POST",
    			url: "request.php",
    			data: "memberid="+ memberid +"&thismember="+ thismember,
    			success: function(data){
    				$('form#share').hide(function(){$('div.result').fadeIn();});
    				$('.result').html(data);
    			}
    		});
    	return false;
    	});
    
    $("#member").autocomplete("functions/share-autocomplete.php?m=<?php echo $_SESSION['SESS_MEMBER_ID'];?>", {
        width: 260,
        matchContains: false,
        mustMatch: false,
        minChars: 2,
        //multiple: true,
        highlight: false,
        //multipleSeparator: ",",
        selectFirst: false
    });
    
    $("#member").result(function(event, data, formatted) {
        $("#memberid").val(data[1]);
    });
    
    });
    </script>

  • #9
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    I placed to new jquery into the original $(document).ready(function() and the made it message comes through. Don't know if the new jq works. Here's the code test it your self. The request.php is in the same dir and the first line is what I gave up.
    jquery script:
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    	$("form#share").submit(function() {
    	// we want to store the values from the form input box, then send via ajax below
    	var memberid     = $('#member').attr('value');
    	var thismember     = $('#thismember').attr('value');
    		$.ajax({
    			type: "POST",
    			url: "request.php",
    			data: "memberid="+ memberid +"&thismember="+ thismember,
    			success: function(data){
    				$('form#share').hide(function(){$('div.result').fadeIn();});
    				$('.result').html(data);
    			}
    		});
    	return false;
    	});
    
    $("#member").autocomplete("functions/share-autocomplete.php?m=<?php echo $_SESSION['SESS_MEMBER_ID'];?>", {
        width: 260,
        matchContains: false,
        mustMatch: false,
        minChars: 2,
        //multiple: true,
        highlight: false,
        //multipleSeparator: ",",
        selectFirst: false
    });
    
    $("#member").result(function(event, data, formatted) {
        $("#memberid").val(data[1]);
    });
    
    });
    </script>
    Still no echo being displayed by in the result div... and on top of that with the above code the php file does not run the sql commands, no inserts or anything...

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    and on top of that with the above code the php file does not run the sql commands, no inserts or anything...
    Yes, Of course. The line I gave you kills the execution of your php script. It converts your script to just echo MADE IT back to the calling program and that is not happening for you , BUT it does work on my machine. So either the php file is not where you think it is or it is not named request.php or you don't have <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script> turned on

    I can't see you file names, I suggest you copy the name from the program code and then rename the php file using paste. These work on my side so the problem has to be on your side.

  • #11
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    Yes, Of course. The line I gave you kills the execution of your php script. It converts your script to just echo MADE IT back to the calling program and that is not happening for you , BUT it does work on my machine. So either the php file is not where you think it is or it is not named request.php or you don't have <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script> turned on

    I can't see you file names, I suggest you copy the name from the program code and then rename the php file using paste. These work on my side so the problem has to be on your side.

    Even without the "Echo MADE IT"... the script will not run with the combined javascript. I have confirmed the location of the jquery and yes it is called properly I know this because the jquery autocomplete works fine. Second, I have tried every configuration of php file name I can think of, same directory, different directory, dash, no dash... I am lost.

    I can get the php to run, the form hides fine, but the echo on the php is still not displayed... everything is working except for that so the jquery must be running fine and all files must be found fine.. just that one detail is not working.

    can you post your whole script that you have made work somehow?

  • #12
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    This is file request.php"
    Code:
    <?php
    echo 'made it';
    ?>
    This is the main HTML calling file:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Jquery</title>
    <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$("form#share").submit(function() {
    	// we want to store the values from the form input box, then send via ajax below
    	var memberid     = $('#member').attr('value');
    	var thismember     = $('#thismember').attr('value');
    		$.ajax({
    			type: "POST",
    			url: "request.php",
    			data: "memberid="+ memberid +"&thismember="+ thismember,
    			success: function(data){
    				$('form#share').hide(function(){$('div.result').fadeIn();});
    				$('.result').html(data);
    			}
    		});
    	return false;
    	});
    
    });
    </script>
    </head>
    
    <body>
    <form id="share" method="post" action="">
    Name:
    <input type="text" name="member" id="member" size="25" onchange="document.getElementById('memberid').value='';">
    <input type="hidden" name="memberid" id="memberid" size="25">
    
    <input type="hidden" name="thismember" id="thismember" value="456">
    <input type="submit" value="Send Request">
    </form>
    <div class="result"></div>
    
    </body>
    </html>
    
    My jquery is probably named different and in a different place

  • #13
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    This is file request.php"
    Code:
    <?php
    echo 'made it';
    ?>
    This is the main HTML calling file:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Jquery</title>
    <script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$("form#share").submit(function() {
    	// we want to store the values from the form input box, then send via ajax below
    	var memberid     = $('#member').attr('value');
    	var thismember     = $('#thismember').attr('value');
    		$.ajax({
    			type: "POST",
    			url: "request.php",
    			data: "memberid="+ memberid +"&thismember="+ thismember,
    			success: function(data){
    				$('form#share').hide(function(){$('div.result').fadeIn();});
    				$('.result').html(data);
    			}
    		});
    	return false;
    	});
    
    });
    </script>
    </head>
    
    <body>
    <form id="share" method="post" action="">
    Name:
    <input type="text" name="member" id="member" size="25" onchange="document.getElementById('memberid').value='';">
    <input type="hidden" name="memberid" id="memberid" size="25">
    
    <input type="hidden" name="thismember" id="thismember" value="456">
    <input type="submit" value="Send Request">
    </form>
    <div class="result"></div>
    
    </body>
    </html>
    
    My jquery is probably named different and in a different place

    Well, I confirm your code does indeed work. But when brought into my page, it doesnt work. I get the same result. When I combine the javascripts as you did, the PHP does not run. When they are separate, the php does run.

    No matter what though, the echo is never displayed.

    Totally frustrated and lost... I guess ill have to send the user to a whole new page to indicate what happened with their request...

  • #14
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    What does
    But when brought into my page, it doesnt work.
    mean?
    What page? Are there things your not telling us? Do you have code that you have not told us about?

    Also notice that I changed
    Code:
    <input type="hidden" name="thismember" id="thismember" value="456">
    Since it is not used to check ajax I subed '456' for
    Code:
    <input type="hidden" name="thismember" value="<?php echo $_SESSION['SESS_MEMBER_ID'];?>">
    Last edited by sunfighter; 04-19-2012 at 02:12 PM.

  • #15
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    What does mean?
    What page? Are there things your not telling us? Do you have code that you have not told us about?

    Also notice that I changed
    Code:
    <input type="hidden" name="thismember" id="thismember" value="456">
    Since it is not used to check ajax I subed '456' for
    Code:
    <input type="hidden" name="thismember" value="<?php echo $_SESSION['SESS_MEMBER_ID'];?>">
    I got it working... this was the problem:
    You had originally told me to give the result div an ID instead of a class. I had done so.

    Then in your working example, you actually had a div CLASS, which worked.

    After comparing every little detail of our two scripts trying to figure out why yours worked and mine didnt, this was why...

    Div ID: doesnt work
    Div CLASS: works great.

    So there must have been some other problem corrected along the way.. so for whatever that was, I thank you! Haha.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •