How to retrieve and set values using javascript at destination when they are sent to post

Thank you very much for your help.

In order to get the value of ① when opening another site を from one site から, obtain the value from url on the opened site にて, and send the value to another site に, the following settings work.

Could you please let me know how to obtain and replace the value on site 2 if this is not a get transmission but a post transmission like method="post"?

In other words, could you tell me how to describe javascript in site 2 when using method="post" on site 1 below?

Site 1
<form name="reserve" method="get" action="http://xxxx.com/send.html">
<input type="hidden" name="id" value="{$product.id}"/>
<input type="submit" value="Send" class="sendButton">
</form>


Site 2
http://xxxx.com/send.html?id=7

<script type="text/javascript"> 
const url = new URL (location.href);
constid = url.searchParams.get("id");
</script>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('id').value=id;
  });
</script>

<form id="Form" method="post" action="xxxxxx">
<input name="id" id="id" type="hidden" value="/>
<input type="submit" value="Send" class="sendButton">
</form>

Note:

Site 1
php:
<?php
    $post_json_data=json_encode($_POST);
?>


<form name="reserve" method="post" action="http://xxxx.com/send.html">
<input type="hidden" name="id" value="{$product.id}"/>
<input type="hidden" name="cusotmer_id" value="{$smarty.get.cusotmer_id}"/>
<input type="submit" value="Send" class="sendButton">
</form>


Site 2
http://xxxx.com/send.html

<script type="text/javascript"> 
const post_data=<?phpecho$post_json_data;?>
</script>

＊＊＊
<h1><input type="text" disabled name="cusotmer_id" id="cusotmer_id" value="">/h1>;

<form id="Form" method="post" action="xxxxxx">
<input name="id" id="id" type="hidden" value="/>
<input name="customer_id" id="customer_id" type="hidden" value="/>
<input type="submit" value="Send" class="sendButton">
</form>

Based on the description you gave me, I've tried both json_encode and the other individual method, but I can't get and set both values.

Actually, there are multiple values, so I added the description that I tried with json_encode.How is post_data, which is the value obtained in javascript of site 2, set to their respective values on html?When I tried displaying cusotmer_id on *** on site 2, it says [object HTMLCollection].

javascript php html form

2022-09-30 20:12

2 Answers

There are several ways to pass server-side data from PHP to HTML-side Javascript, but
In general, you will often use json_encode.

<?php
    $post_json_data=json_encode($_POST);
?><html>
  <head>
  <head>
  <body>
    <script type="text/javascript"> 
        const post_data=<?phpecho$post_json_data;?>
    </script>
  <body>
<html>

However, if you can do enough detoxification with just one specific value, like in this case, I think you can hand it over directly.

<?php
    // Weak detoxification with the assumption that id must contain only int type as an example
    $id=(int)$_POST ["id"];
?><html>
  <head>
  <head>
  <body>
   <script type="text/javascript"> 
        constid=<?phpecho$id;?>
    </script>
  <body>
<html>

The following is a basic web server and client knowledge:
If you know, you can skip it.

The client requests to the server.
The server responds to the request.

PHP is the server-side language and HTML-side Javascript is the client-side language.
And POST is one of the client-side requests.

Therefore, the image is
(HTML + Javascript) → (PHP) → (HTML + Javascript) → (PHP) → (HTML + Javascript) → …
Repeat

Return data to the client and send data to the server.

2022-09-30 20:12

I simply sent 'data1=a1&data2=a2&data3=a3&data4=a4' in the post and wrote a sample to receive the results from the server in json.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log(xhr.response);
                var datas = xhr.response;
                console.log(' data1:'+datas.data1);
                console.log(' data2:'+datas.data2);
                console.log('data3:'+data.data3);
                console.log('data4:'+data.data4);

            } else{
                console.log("status="+xhr.status);
            }
        }
    };

    var senddata='data1=a1&data2=a2&data3=a3&data4=a4';

    xhr.open("POST", 'index.php');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.responseType="json";
    xhr.send(senddata);
</script>
</body>
</html>

index.php is

<?php

$data1 = $_POST ['data1'];
$data2 = $_POST ['data2'];
$data3 = $_POST ['data3'];
$data4 = $_POST ['data4'];

$arr_data=array('data1'=>$data1,'data2'=>$data2,'data3'=>$data3,'data4'=>$data4);

$json_str = json_encode($arr_data);

echo$json_str;

2022-09-30 20:12

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656