Submit URL via AJAX / PHP set variable without refreshing page, load variable

Question

I'm having an issue with some script to perform a function via AJAX without refreshing my page. I have a field for a user to enter an external URL, and when they click submit it pops up a modal window, with some information generated through a separate PHP page (images.php currently). I have the script working when the form is actually submitted, the page reloads, and images.php is able to see index.php?url=whatever, but I'm trying to update the page without having to refresh. Do I need to re-render the DIV after defining the variable? I think this may be where I'm having problems.

JS

<script type="text/javascript">
$(function() {
$("#newNote").submit(function() {

var url = "images.php"; // the script where you handle the form input.
var noteUrl = $('#noteUrl).val();
$.ajax({
       type: "POST",
       url: url,
       data: {noteUrl: noteUrl},
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

return false; // avoid to execute the actual submit of the form.
});
});
</script>

HTML

<form id="newNote">
<input type="text" class="form-control" id="noteUrl">
<input type="button" class="btn btn-default" id="addNote" data-toggle="modal" data-target="#noteModal" value="Add Note"/>
</form>

PHP (aside from form being submitted to this, this is also included in the modal, which opens, but returns NULL on var_dump($postUrl))

$postUrl = $_REQUEST['noteUrl'];
echo $postUrl;

I could definitely be missing something glaring here, but honestly I've tried every combination of AJAX example I could find on here. Am I missing a huge step about having PHP get the variable? Do I need to refresh a DIV somewhere?

Please help.

Change var noteUrl = $('#noteUrl).val(); to var noteUrl = $('#noteUrl').val(); - missing quote — lshettyl
– lshettyl, Commented Mar 19, 2014 at 12:07

dcclassics · Accepted Answer · 2014-03-19 15:10:16Z

2

Here is a bit neater version of the same code, with the missing quote corrected.

$(function() {
    $("#newNote").submit(function() {
        $('#notePreview').empty();
        var url = "images.php"; // the script where you handle the form input.
        var noteUrl = $(this).find('#noteUrl').val();

        var request = $.ajax({
           type: "POST",
           url: url,
           data: {noteUrl: noteUrl}
        });

        request.done(function(data) {
           $('#notePreview').append(data);
        });

        return false; // avoid to execute the actual submit of the form.
    });
});

edited Mar 19, 2014 at 15:10

dcclassics

8961 gold badge12 silver badges39 bronze badges

answered Mar 19, 2014 at 12:13

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dcclassics Over a year ago

This is great! Just what I needed. I added a couple things for the final product, in case anyone sees this thread as an answer for their question. Thanks, @LShetty.

lshettyl Over a year ago

@KevinO'Brien, glad I coould help :)

Curtis W · Accepted Answer · 2014-03-19 02:36:38Z

0

Add the attribute name="noteUrl" to your input

<form id="newNote">
<input type="text" class="form-control" name="noteUrl" id="noteUrl">
<input type="button" class="btn btn-default" id="addNote" data-toggle="modal" data-target="#noteModal" value="Add Note"/>
</form>

You can also do var_dump($_REQUEST); to see what request variables are being sent.

answered Mar 19, 2014 at 2:36

Curtis W

5114 silver badges11 bronze badges

6 Comments

dcclassics Over a year ago

I added name="noteUrl", to no avail. When I var_dump($_REQUEST); I just get:

array(3) { ["__utma"]=> string(55) "218755011.1844378823.1395071644.1395071644.1395071644.1" ["__utmc"]=> string(9) "218755011" ["__utmz"]=> string(70) "218755011.1395071644.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)" }

Curtis W Over a year ago

What if you var_dump($_POST)? Also, use the developer tools tool (F12 key) from your webbrowser to see if the http requests are being sent. Example: i.imgur.com/y9WBQsx.png

dcclassics Over a year ago

I'm not seeing anything in the header information being sent. var_dump($_POST) shows an empty array.

Curtis W Over a year ago

jsfiddle.net/fgJP8 This code works fine client side, and sends the POST/REQUEST data to the url. Make sure you have name="noteUrl" case sensitive.

dcclassics Over a year ago

Is it possible to have the POST/REQUEST data then load on the same page? If I include ('images.php'); can I echo $noteUrl; on the same page, all without refreshing?

|

rram · Accepted Answer · 2014-03-19 02:37:55Z

0

You might have missed the noteUrl as name. Try giving the name as below and get it using the same name. In your case it is noteUrl

<form id="newNote">
<input type="text" class="form-control" name="noteUrl" id="noteUrl">
<input type="button" class="btn btn-default" id="addNote" data-toggle="modal" data-target="#noteModal" value="Add Note"/>
</form>

answered Mar 19, 2014 at 2:37

rram

2,0445 gold badges25 silver badges39 bronze badges

3 Comments

dcclassics Over a year ago

I added name="noteUrl" but it did not change anything.

rram Over a year ago

Are you going to use only one field or multiple field? are you planning to get only noteUrl? In this case just send this value alone in ajax, instead of serialize all fields

dcclassics Over a year ago

You're right, I've updated my post. I am still having no luck.

code-jaff · Accepted Answer · 2014-03-19 12:04:57Z

0

Shouldn't this

var noteUrl = $('#noteUrl).val();

be

var noteUrl = $('#noteUrl').val();
                        ^^^

answered Mar 19, 2014 at 12:04

code-jaff

9,3284 gold badges38 silver badges56 bronze badges

Collectives™ on Stack Overflow

Submit URL via AJAX / PHP set variable without refreshing page, load variable

4 Answers 4

2 Comments

6 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related