2017-08-21 23 views
0

JavaScriptを使ってフォーム入力を行わずにPHPページに入力型要素を送信したい。私は$ .ajaxで試しましたが、方法はありません。私はそれが構文か論理エラーかどうかわかりません。誰かが2つではなく1つのPHPページを実行するように私に言った。PHPポップアップページにデータを送信

HTMLページ:これはPHPページで

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="../../js/jquery-3.2.0.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
     #prova{ 
      padding-right: 1%; 
      padding-top: 1%; 
     } 
    </style> 
    <script> 
function ajax_post(apri){ 
    var stile = "top=10, left=10, width=650, height=600, status=no, menubar=no, toolbar=no scrollbars=no"; 
    // Create our XMLHttpRequest object 
    var hr = new XMLHttpRequest(); 
    // Create some variables we need to send to our PHP file 
    var url = "sperem.php"; 
    var fn = document.getElementById("id_buyers").value; 
    alert(fn); 
    var vars = "postid="+fn; 
    alert(vars); 
    hr.open("POST", url, true); 
    // Set content type header information for sending url encoded variables in the request 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    // Access the onreadystatechange event for the XMLHttpRequest object 
    hr.onreadystatechange = function() { 
     if(hr.readyState == 4 && hr.status == 200) { 
      var return_data = hr.responseText; 
      document.getElementById("status").innerHTML = return_data; 
     } 
    } 
    // Send the data to PHP now... and wait for response to update the status div 
    hr.send(vars); // Actually execute the request 
    /*window.open(apri, "", stile);*/ 
    document.getElementById("status").innerHTML = "processing..."; 
} 
</script> 

</head> 
<body> 
    <div class="container"> 
     <center><h1>Add Orders:</h1></center> 
     <form class="form-inline" name="ordine"> 
      <div class="form-group" id="prova"> 
       <label for="Buyers">ID_Buyers:</label> 
       <input type="text" class="form-control" placeholder="Enter IDBUYERS" id="id_buyers"> 
      </div> 

      <div class="form-group" id="prova"> 
       <input type="submit" id="bottone" value="show" onClick="ajax_post('sperem.php')"/> 
      </div> 

     </form> 
     <br><div id="status"></div> 

    </div> 
</body> 
</html> 

(があるの.php):

<?php 
    $dato = $_POST['postid']; 
    echo($dato); 
?> 
+0

あなたのコンソールは何を言っていますか?ネットワーク・タブも確認してください – Akintunde007

+0

ボタンでタイプをボタンに変更してください – Akintunde007

+0

別のコメントに記載されているようにネットワーク・タブを確認し、Ajaxリクエストのステータスと応答を教えてください。 (あなたが 'sperem.php'でエコーするものは応答にあり、新しいページをロードしません) – Kaddath

答えて

1

変更この

input type="submit" 

からの

input type="button" 

テキストボックスで指定したデータを取得できます。

ここで問題となるのは、ブラウザで実行するとフォームが送信されます。あたかもajaxを実行する場合は、送信/再読み込みを行わずにページを実行する必要があります。

お手伝いします。

+0

いいえ、私はまだPHPのデータを取得することはできません..... –

+0

あなたは何かエラーやコンソールで見ることができるメッセージを持っていませんでしたか?私はコード全体をコピーし、ちょうどそれが私のために働いているボタンを変更しました – shaan

+0

あなたのPHPファイルに次の行を書いてください:echo "

";print_r($_REQUEST);echo "
";この行の下に警告メッセージを表示します。 'var return_data = hr.responseText;'アラート(return_data);あなたが得るものを参照してください – shaan

関連する問題