how to send parameter using GET or POST method to php page using javascript

Question

I'm trying somthing else that sends parameter form file.php (that has javascript written <script> .... </script>). I am trying to pass parameter to other file file2.php but I am failed to do so. (sorry for my bad english). here is the code that i am trying.

file.php

<html>
<head>
</head>
<body>
<script type="text/javascript">
function changeThis(){

var formInput = document.getElementById('theInput').value;
document.getElementById('newText').innerHTML = formInput;
var xmlHttp = null;

xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "event2.php?theInput"= + formInput, true );
xmlHttp.send();
return xmlHttp.responseText;    
}

 </script>

 <!--  <p>You wrote: <span id='newText'></span> </p> -->
     <textarea id="theInput" style="height:200px;">Write Here</textarea>
    <input type='button' onclick='changeThis()' value='See what you wrote'/>

    </body>
    </html>

file2.php

<?php
  $id = $_GET["theInput"];
  echo $id;
?>

Why are you not using jQuery? It really make life easier for everything in js... — zeflex, Jan 05 '14 at 16:54
jQuery really does very little to make life easier unless you are targeting older browsers which don't have modern APIs like `classList` and `querySelector`. — Quentin, Jan 05 '14 at 16:57
@Quentin I'm not agree about your answer but anyways, it's not the question here :) — zeflex, Jan 05 '14 at 16:59
actually m beginner and started to doing extra work. so that i should clear my concepts. i have also studied other post but again as beginner i found them hard. — user3162878, Jan 05 '14 at 17:09
You should read up on cross-site scripting because that code is vulnerable to such attacks. — DanMan, Jan 05 '14 at 17:27

score 0 · Answer 1 · answered Jan 05 '14 at 16:55

0

You've commented out <span id='newText'></span>, so document.getElementById('newText') will be undefined so trying to assign a value to document.getElementById('newText').innerHTML will throw an exception and your function will terminate at that point.

Either stop trying to modify an element you've removed, or put the element back.

Other that that, this will successfully send the data (although you really should URL Encode the user input you are stuffing into the query string). It just won't do anything with the response as you don't have a load or readystatechange event handler on the XHR object.

answered Jan 05 '14 at 16:55

Quentin

914,110
126
1,211
1,335

but it is still not going in "file2.php". i tested by placing alert("hi"). at least it should have shown alert. – user3162878 Jan 05 '14 at 17:05
You're misinterpreting the results. You are making an HTTP request with Ajax, the response is returned to JavaScript (and not automatically rendered as a webpage). You have to process the response yourself. – Quentin Jan 05 '14 at 17:08
See also, the last sentence of my answer above and [this answer to another question](http://stackoverflow.com/a/20928713/19068) – Quentin Jan 05 '14 at 17:09
is that not response: "return xmlHttp.responseText;" ? in line before script ends? any suggestion. – user3162878 Jan 05 '14 at 17:14
Since Ajax is asynchronous, [no, it isn't](http://stackoverflow.com/questions/1225667/how-to-return-ajax-response-text), and, even if it was, you are just returning a value. You don't try to do anything with that value. – Quentin Jan 05 '14 at 17:38

Jérôme Teisseire · Answer 2 · 2014-01-05T17:24:01.467

0

Your first scipt could work, just change :

xmlHttp.open( "GET", "file2.php?theInput=" + formInput, true );

Wrong :

xmlHttp.open( "GET", "event2.php?theInput"= + formInput, true );

Your php filename seems to be file2.php and not event2.php

You must have = between the ""

your old script corriged :

<html>
<head>
</head>
<body>

<script type="text/javascript">

function changeThis(){
 var formInput = document.getElementById('theInput').value;
 document.getElementById('newText').innerHTML = formInput;
 var xmlHttp = null;
 xmlHttp = new XMLHttpRequest();
 xmlHttp.open( "GET", "file2.php?theInput=" + formInput, true );
 xmlHttp.send();
 return xmlHttp.responseText;     
}

</script>

 <p>You wrote: <span id='newText'></span> </p> 
 <textarea id="theInput" style="height:200px;">Write Here</textarea>
<input type='button' onclick='changeThis()' value='See what you wrote'/>

</body>
</html>

edited Jan 05 '14 at 17:24

answered Jan 05 '14 at 17:09

Jérôme Teisseire

1,518
1
16
26

yes if you want, but your second file name is really : "file2.php" ? – Jérôme Teisseire Jan 05 '14 at 17:40
yes but i dont know what is going on. i for debug place alert but not going to display alert or echo. here is the link. http://www.uploadmb.com/dw.php?id=1388943586 – user3162878 Jan 05 '14 at 17:45
i have uploaded the file. – user3162878 Jan 05 '14 at 17:49
Sir u checked that file? – user3162878 Jan 05 '14 at 18:07
Yes, there is no mistake, i test them, they works perfectly...but for the alert, you can't write it on a php file whithout indicate ``. – Jérôme Teisseire Jan 05 '14 at 21:32
Write 'Hello' as example in 'Write Here' then click on the button, and the text will appear after 'You wrote:' – Jérôme Teisseire Jan 05 '14 at 21:43

user8675 · Answer 3 · 2014-01-05T17:41:37.050

0

file.php

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.min.js'></script>

<script type="text/javascript">
function changeThis(){
    $.ajax({
    type: "POST",
    url: "file2.php",
    data: {theInput:theInput},
    dataType: 'json',
    success:function(data){
        $('#newText').html(data.newText);
        }
    });
}
</script>

</head>
<body>

<span id='newText'></span>
<textarea id="theInput" style="height:200px;">Write Here</textarea>
<input type='button' onclick='changeThis()' value='See what you wrote'/>

</body>
</html>

file2.php

<?php
        $arr = array();
        $arr['newText'] = '';

        if(isset($_REQUEST['theInput']))
        {
            $arr['newText'] = $_REQUEST['theInput'];
        }

        die(json_encode($arr));
?>

edited Jan 05 '14 at 17:41

answered Jan 05 '14 at 17:10

user8675

657
6
13

thanks for writting but i dont know what is jquery is that for java??. i am much spending time for javascript. is related to javascript?? – user3162878 Jan 05 '14 at 17:28
The purpose of jQuery is to make it much easier to use JavaScript on your website. Do you have tried my example? – user8675 Jan 07 '14 at 01:13

Bipool · Answer 4 · 2014-04-16T18:14:09.857

0

First make sure event2.php and file2.php is same file. then try to use escape .

xmlHttp.open( "GET", "event2.php?theInput="= + encodedURIComponent(formInput), true)

edited Apr 16 '14 at 18:14

answered Jan 05 '14 at 17:20

Bipool

707
5
7

`escape` is deprecated. The correct tool to use here is `encodeURIComponent`. – Quentin Jan 05 '14 at 17:43
yes escape is deprecated. encodedURIComponent should use. thanks M. – Bipool Apr 16 '14 at 18:13

how to send parameter using GET or POST method to php page using javascript

4 Answers4