Form inside of $.load not posting correctly

Question

Well here's what I got, basically a button is clicked and the following code is executed:

    Readthis = "MonsterRequest.php?id=<?php echo $_REQUEST['id']; ?>&Mon=";
    TestVar = TestVar.replace(/\s/g, "");
    Readthis = Readthis + htmlencode(TestVar);
    $('#CenterPiece').load(Readthis);

Everything seems to work as intended except for when passed to Monsterequest.php, the post isn't being passed onto it's self and the page basically reloads it's self as it was being passed onto the main parent...(I was unsure if it was but monsterrequest.php seems to work perfectly fine on it's own however when loaded it doesn't work as intended at all and I'm completely stumped. I basically want to post data without having the page reloaded.

Monsterrequest.php: http://pastebin.com/fiFjjBZg

score 7 · Accepted Answer · edited May 31 '13 at 23:20

Are you familiar with AJAX? Forgive me if you know this already, but in case you don't:

Ajax posts data to an external php file, which processes the data it receives, and sends back an answer. It looks like this:

FILE #1:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#Sel').change(function() {
                    var opt = $(this).val();
                    var someelse = 'Hello';
                    var more_stuff = 'Goodbye';
                    $.ajax({
                        type: "POST",
                        url: "receiving_file.php",
                        data: 'selected_opt=' + opt + '&something_else=' +someelse+'&more_stuff='+more_stuff,
                        success:function(data){
                            alert('This was sent back: ' + data);
                        }
                    });
                });
            });
        </script>
    </head>
<body>

<select id = "Sel">
    <option value ="Song1">default value</option>
    <option value ="Song2">Break on through</option>
    <option value ="Song3">Time</option>
    <option value ="Song4">Money</option>
    <option value="Song5">Saucerful of Secrets</option>
</select>

FILE #2: receiving_file.php

<?php
    $recd = $_POST['selected_opt'];
    echo 'You chose: ' . $recd;

I haven't tried this form of post but I assumed it would be the same as my paste bin..I'm trying to load an external pages form onto my main page but I'll give this a go real quick and post results — Ginzo Milani, Dec 05 '12 at 23:37
Yes, $.post is the same, but using the longer $.ajax format is helpful when you run into errors and need to break everything down and analyse step-by-step. — crashwap, Dec 05 '12 at 23:44
Okay after trying this out, this is actually the route I want to go, the page was successfully working correctly without the refreshes — Ginzo Milani, Dec 05 '12 at 23:51

score 0 · Answer 2 · answered Dec 05 '12 at 23:29

0

I basically want to post data without having the page reloaded

Use jQuery's $.post(...)

Cheers

answered Dec 05 '12 at 23:29

Madbreaks

19,094
7
58
72

if you read the monsterrequest, I AM using that and it's causing problems when loading that page onto another page – Ginzo Milani Dec 05 '12 at 23:29
Paste your *relevant* code here. Your question's code shows no mention of $.post, only using $.load. – Madbreaks Dec 05 '12 at 23:33

Form inside of $.load not posting correctly

2 Answers2

Linked