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
– zeflex, Commented Jan 5, 2014 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
– Quentin, Commented Jan 5, 2014 at 16:57
@Quentin I'm not agree about your answer but anyways, it's not the question here :) — zeflex
– zeflex, Commented Jan 5, 2014 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
– user3162878, Commented Jan 5, 2014 at 17:09
You should read up on cross-site scripting because that code is vulnerable to such attacks. — DanMan
– DanMan, Commented Jan 5, 2014 at 17:27

Quentin · Accepted Answer · 2014-01-05 16:55:37Z

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 5, 2014 at 16:55

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

5 Comments

user3162878 Over a year ago

but it is still not going in "file2.php". i tested by placing alert("hi"). at least it should have shown alert.

Quentin Over a year ago

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 Over a year ago

See also, the last sentence of my answer above and this answer to another question

user3162878 Over a year ago

is that not response: "return xmlHttp.responseText;" ? in line before script ends? any suggestion.

Quentin Over a year ago

Since Ajax is asynchronous, no, it isn't, and, even if it was, you are just returning a value. You don't try to do anything with that value.

Jérôme Teisseire · Accepted Answer · 2014-01-05 17:24:01Z

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 5, 2014 at 17:24

answered Jan 5, 2014 at 17:09

Jérôme Teisseire

1,5461 gold badge16 silver badges26 bronze badges

6 Comments

Jérôme Teisseire Over a year ago

yes if you want, but your second file name is really : "file2.php" ?

user3162878 Over a year ago

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. uploadmb.com/dw.php?id=1388943586

user3162878 Over a year ago

i have uploaded the file.

user3162878 Over a year ago

Sir u checked that file?

Jérôme Teisseire Over a year ago

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 <script="javascript"></script>.

|

user8675 · Accepted Answer · 2014-01-05 17:41:37Z

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 5, 2014 at 17:41

answered Jan 5, 2014 at 17:10

user8675

6867 silver badges13 bronze badges

2 Comments

user3162878 Over a year ago

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??

user8675 Over a year ago

The purpose of jQuery is to make it much easier to use JavaScript on your website. Do you have tried my example?

Bipool · Accepted Answer · 2014-04-16 18:14:09Z

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, 2014 at 18:14

answered Jan 5, 2014 at 17:20

Bipool

7275 silver badges7 bronze badges

2 Comments

Quentin Over a year ago

escape is deprecated. The correct tool to use here is encodeURIComponent.

Bipool Over a year ago

yes escape is deprecated. encodedURIComponent should use. thanks M.

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

6 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

6 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related