2017-01-14 18 views
1

私は入力フィールドを持つhtmlフォームを持っています。フォームからのデータはphpのajax関数を介して送信され、PHPはhtmlの結果を返します。 すべてのフィールドが満たされているわけではありませんが、phpが実行され、結果が返されます。 すべてのフィールドが入力されていれば、PHPの結果は得られません。必須フィールドに入力されていない場合、phpが実行されます

問題を解決するお手伝いができますか?事前に

おかげであなたは、AJAXを使用

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Test</title> 
<script type="text/javascript" src="ajax.js"></script> 
</head> 
<body> 
<div id="inputform"> 
    <form> 
     Name:<br> 
     <input type="text" id="firstname" required><br> 
     Surname:<br> 
     <input type="text" id="lastname" required ><br> 
     <input type="submit" value="submit" onclick='ajax()'> 
     <div id="ajaxDiv"></div> 
    </form> 
</div> 

javascriptの

function ajax() { 
var ajaxRequest; // The variable that makes Ajax possible! 

try { 
    // Opera 8.0+, Firefox, Safari 
    ajaxRequest = new XMLHttpRequest(); 
} catch (e) { 
    // Internet Explorer Browsers 
    try { 
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
     try { 
      ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e) { 
      // Something went wrong 
      alert("Your browser broke!"); 
      return false; 
     } 
    } 
} 
// Create a function that will receive data sent from the server 
ajaxRequest.onreadystatechange = function() { 
    if (ajaxRequest.readyState == 4) { 
     var answer = document.getElementById('ajaxDiv'); 
     answer.innerHTML = ajaxRequest.responseText; 
    } 
}; 

var firstname = document.getElementById('firstname').value; 
var lastname = document.getElementById('lastname').value; 


var queryString = "?firstname=" + firstname + "&lastname=" + lastname; 
ajaxRequest.open("GET", "test.php" + queryString, true); 
ajaxRequest.send(null);} 

PHP

<?php 
$firstname=$_GET['firstname']; 
$lastname=$_GET['lastname']; 
echo $firstname; 
?> 

答えて

0

フォームデータをサーバーに送信し、フォーム送信時にajax()メソッドを呼び出します。ボタンをクリックするとajax()と呼ばれ、フォームが自動的に送信されますので、<form>タグの必要はありません。

<form>を削除し、変更します。高速な答えを <input type="submit" value="submit" onclick='ajax()'>

+0

<input type="button" value="submit" onclick='ajax()'> に感謝を。

タグなしでtype = "submit"を指定すると、送信をクリックすると、フィールドが入力されていないという通知は表示されません。 –

+0

どのようにデータをサーバーに送信しますか?非同期または?非同期の場合は、ajaxを使用してフォームタグを削除する必要があります。そうでなければ、ajaxを削除し、フォームタグ 'method =" get "'を使用する必要があります。 – Vusal

関連する問題