How can I open a URL inside a DIV tag using AJAX?

Question

I have the following php files. One that captures a user's text from a simple form, and the other echos this text. The files are shown below..

file1.php:

<form action="output.php" method="post">

Paste text document: <br><br>

<textarea name="doc" rows="5" cols="50" value="">
</textarea><br><br>

<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="Clear">

</form>
<br><br>


<div id="output_area">

</div>

</body>
</html>

output.php:

<html lang="en">
<head><title>Output</title></head>
<body>

<?php

$doc = $_POST['doc'];

echo $doc;

?>

</body>
</html>

I want the output to be displayed between the DIV tags, rather than to load and show the output on a new page. I want the text to be output in between the DIV tags on the same page. Maybe the best way is to use AJAX to display output.php within the DIV tags and output the text after the user has clicked on the "submit" button. How can I use AJAX to do this in the most basic way possible?

Possible duplicate: http://stackoverflow.com/questions/1218245/jquery-submit-form-and-then-show-results-in-an-existing-div Check that page for details. — Riten Vagadiya, Nov 18 '14 at 04:40

Ashique C M · Answer 1 · 2014-11-18T04:50:17.943

1

You can use JQuery ajax function:

JQuery:

$("form").on("submit", function(event){
    event.preventDefault();
    $.ajax({
      type: "POST",
      url: "output.php",
      data: { doc: $('#doc').val()}
   })
   .done(function( data) {
     $("#output_area").html(data);
   });
});

Change html:

<textarea name="doc" id="doc" rows="5" cols="50" value=""></textarea>

edited Nov 18 '14 at 04:50

answered Nov 18 '14 at 04:38

Ashique C M

733
4
8

score 0 · Answer 2 · answered Nov 18 '14 at 04:43

If you want your $_POST variable to be shown on the same page, then

1.change form's action to it. In your case action="file1.php" or leave it empty to reload the page on submit (not valid in HTML5)

2.insert echo part directly in your div

<div id="output_area">
<?php
  echo $_POST['doc'];
?>
</div>

not in another file

Jesper Kaae · Accepted Answer · 2014-11-19T00:54:06.097

0

You can use the function:

$(document).ready(function() {
  $( "#output_area" ).load( "output.php" );
});

But remeber! That the load function from jquery, loads everything on the page you are asking for, so dont use:

<html lang="en">
   <head><title>Output</title></head>
   <body>

</body>
</html>

Now the load(function), will put in the PHP you made in output.php

if you want to output the answer on a submit i would do it like:

First add:

<a href="#" name="submit" class="pressme">Show doc</a>

Then add jquery:

$(document).ready(function() {
    $('.pressme').on('click', function(){
        var yourdata = $(this).parent().find("textarea[name='doc']").val();
        $.ajax({
             type: "POST",
             url: "output.php",
             data: {doc: yourdata},
             success: function(data) {
                 $('#output_area').html(data);
             });
    });
});

I added a <a>, instead of using the <input type="submit"> because the submit, will post the form, thats not what you need, after what i understand, you need to preview the textarea in a div.

Hope it helps!

edited Nov 19 '14 at 00:54

answered Nov 18 '14 at 04:49

Jesper Kaae

118
1
9

this code looks great! I used the second part, because I want to output the text on a submit. So I used the "a href" tags rather than the submit button, exactly like you recommended. I copied the last code you have, then put it in between "script" tags. Then I added the code between the "head" tags. I get a syntax error: "missing ; before statement". I am not sure how to fix that. – modarwish Nov 18 '14 at 05:04
Hey modarwish. What jquery version are you running on your site? – Jesper Kaae Nov 19 '14 at 00:52
Hey again modarwish. My fault, the problem is that there are "));" after val()); just remove the one ")", and it will work. Sorry for this mistake. :-( – Jesper Kaae Nov 19 '14 at 00:53

score 0 · Answer 4 · edited Dec 29 '16 at 05:52

0

You need not use ajax for this. You can do this by using javascript. It will improve your performance of your code. Try This:

<script>
function show() {
document.getElementById("output_area").innerHTML=document.getElementById("doc").value;
return false;
}
</script>
<form action="#" method="post">
    <textarea name="doc" id="doc" rows="5" cols="50" value="">
    </textarea>
    <input type="submit" name="submit" value="submit" onclick="return show();">
    <input type="reset" name="reset" value="Clear">
</form>
<div id="output_area"></div>
</body>
</html>

edited Dec 29 '16 at 05:52

kiran kumar

1,402
17
34

answered Nov 18 '14 at 05:15

Sandip patil

123
2
14

Seems like a good idea. Is it possible to embed your code into the code I have above, and make all the necessary changes to make it work, so that I can simple copy the entire code? (I am new to javascript :/ ) – modarwish Nov 18 '14 at 05:19
Paste text document:

– Sandip patil Nov 18 '14 at 16:42
As mentioned above give id="doc" to textarea , add onclick="return show();" to submit button , set action="#" to form so that reset button also work and finally add above mentioned show function in – Sandip patil Nov 18 '14 at 16:50

How can I open a URL inside a DIV tag using AJAX?

4 Answers4