-2

重複の可能性：
[PHP / JavaScript]：引数付きのJavaScriptコードを介してPHPファイルを呼び出す

では、Javascriptを使用してHTMLフォームの入力値を検証しますが、PHPを使用してこれらの値をデータベースに書き込みます。Javascriptを介してフォームをPHPファイルに送信することは可能ですか？

これは私がJavascriptなしでそれをした方法です、あなたがPHPファイルに提出ボタンをクリックするときそれはフォームを送ることになっています。これは私の元のフォームです：

<form name="filler" method="post" action="display.php">
//form stuff
</form>

これが私が得た限りです。Javascriptでフォームを検証するときは何も起こらないはずのエラーは表示されませんが、何を入力してもすぐにPHPに送られます。それでも何が問題になっていますか？

<!DOCTYPE HTML>

<html>
<head>
<script type="text/javascript">
    function required1(n,s,u,e,d,p,cp,g)  
    {  
        if (n.value.length > 0 && s.value.length > 0 && u.value.length > 0 && e.value.length > 0 && d.value.length > 0 && p.value.length > 0 && cp.value.length > 0 && g.value.length > 0)  
                {  
            return true;
        {
        else   
        {  
            alert('You have not filled in all the fields');  
            return false;   
        }  
    }
    function required2(e)
    {
        if(e.indexOf('.') != -1 && e.indexOf('@') != -1)
        {
            return true;
        }
        else
        {
            alert('Not a valid email address');
            return false;
        }   
    }
    function required3(d)
    {
        if(/^\d{2}\/\d{2}\/\d{4}$/.test(d))
        {
            return true;
        }
        else
        {
            alert('Date is not in the right format (DD/MM/YYY)');
            return false;
        }
    }  
</script>
</head>
<body>
<form name="filler" method="post" action="display.php" onsubmit="return required1(document.filler.name,document.filler.surname,document.filler.username,document.filler.email,document.filler.dob,document.filler.password,document.filler.confirm_password,document.filler.gender) && required2(document.filler.email) && required3(document.filler.dob) ">
    <input name="name" placeholder="Name..."/>
    <input name="surname" placeholder="Surname..."/>
    <input name="username" placeholder="Username..."/>
    <input name="email" placeholder="Email address..."/>
    <input name="dob" placeholder="YYYY/MM/DD"/>
    <input name="password" placeholder="Password" type="password"/>
    <input name="confirm_password" placeholder="Password" type="password"/>
    <input name="gender" placeholder="Gender..."/>
    <input type="submit" value="Submit"/>
</form>
</body>
</html>
4

7 に答える 7

2

これにAJAXを使用する理由はありません。最もエレガントで簡単な方法は、HTMLフォームタグのonsubmitイベントを使用することです。

<form name="filler" method="post" action="display.php" onsubmit="return validateForm()">
    //form stuff
</form>

validateFormこれにより、フォームを送信する前にJS関数が呼び出されます。関数がをvalidateForm返す場合false、フォームは送信されません。それ以外の場合は、通常どおりPHPファイルに送信されます。

編集：

Javascriptは簡単に無効にできるため、PHPでもこの入力を検証していることを確認してください。

于 2012-08-13T17:13:07.503 に答える
1

他の回答で示唆されているように、フォームにイベントリスナーを追加し、「クライアント側」で（つまり、javascriptを使用して）検証できます。送信する前に、このjavascript関数が呼び出されます-フォームの送信を停止する機能があります（問題がある場合）。

また、前述のように、クライアント側の検証に依存しないことが重要です。ユーザーがJavaScriptを無効にするのは非常に簡単であり、そうすることには多くの正当な理由があります。「役に立たない」人だけがやったこととしてそれを却下しないでください。

しかし、私はここに提示された方法に同意しません。HTMLマークアップにあるjavscriptのように、「インラインjavascript」は一般的に悪い習慣と見なされます。いくつかの狭いケースでは、それがより適切かもしれません、通常あなたはjavascriptからイベントを添付する方が良いです

そうは言っても、これを行う方法の例を次に示します。

<form id="my_form" name="filler" method="post" action="display.php">
//form stuff
</form>

id..フォームにプロパティを追加したことに注意してください...

var validate_form = function (evnt) {
    var frm = evnt.target;
    var error = false;

    // validate here, if there is problem set error = true
    alert('validating fields');


    if (error != false) {
        evnt.preventDefault();  // stop the form from submitting
        // show an error message
        return;
    }        
};
window.onload = function () {
    var frm = document.getElementById('my_form');
    addEvent('submit', frm, validate_form);
};
// quickie cross-browser addEvent
var addEvent = function(event, target, method) {
    if (target.addEventListener) {
        target.addEventListener(event, method, false);
    } else if (target.attachEvent) {
        target.attachEvent("on" + event, method);
    }
}

なぜこれが良いのですか？

この方法には、インラインJavaScriptにいくつかの利点があります。何よりも、インラインJavaScriptでは、要素ごとに1つのイベントしか許可されません。後でフォームに他の機能を追加することにした場合はどうなりますか？関数を関数にハックする必要がvalidate_formある（悪い）か、とにかくこのメソッドに変更する必要があります（そもそもそれを行わないのは時間の無駄です）！

次に、後でjQueryのようなフレームワークを使用することにした場合（必要な場合のみ!!! ） 、このコードを更新するのは非常に高速です。を変更する可能性があり、関数window.onloadを削除することができaddEventます。

元の質問はどうですか？

あなたの最初の質問は、javascriptからPHP関数を呼び出すことでした。提案されたように、AJAXはこれを達成する方法です。「バニラ」の例（ライブラリは不要）を示し、jQueryなどの一般的なライブラリを使用したいくつかの例へのリンクも示します。

まず、バニラを覚えておいてください。これは非常に基本的なことですが、必要なのはそれだけかもしれません。

function ajax(url, callback) {
    var aj;
    if (window.XMLHttpRequest) {
        aj=new XMLHttpRequest();
    } else {
        // remove this else if you don't care about IE6 (I DON'T!)
        aj=new ActiveXObject("Microsoft.XMLHTTP");
    }
    aj.onreadystatechange=function() {
        if (aj.readyState==4 && aj.status==200) {
            callback(aj.responseText);
        }
    }
    aj.open("GET",url,true);
    aj.send();
    return aj;
}

ajax('http://myserver.org/myfile.php?value=1&anothervalue=2", callback_function);これを使用するには、 Inを呼び出しmyfile.phpます。投稿されたデータを操作して、応答を出力できます（すべてが正常である場合は「1」、それ以外の場合はエラーのリスト）。

ajaxリクエストにjQueryを使用するには：

$.ajax({
  url: "http://myserver.org/myfile.php",
  context: document.body
}).done(function(response) { 
    // do something with the response
});

ドキュメントを参照してください：http：//api.jquery.com/jQuery.ajax/

...またはmootools：

  var req = new Request({
    url: 'http://myserver.org/myfile.php',
    onSuccess: function(txt){
        // do something with the result
    },
  });

デモを見る：http：//mootools.net/demos/？ demo = Request

于 2012-08-13T17:49:04.023 に答える
0

そのままhtmlファイルに書き込んでください。

<?php
if ($ID = '') {
echo "<script language=javascript>alert('enter a valid username.')</script>";
}
?>
于 2012-08-13T17:38:25.327 に答える
0

たとえば、フォームの名前が「myform」の場合、送信呼び出しのJavaScriptコードは次のようになります。

document.forms["myform"].submit();
于 2012-08-13T17:10:13.087 に答える
0

あなたが欲しいのはAJAXです。

このBassistancejQuery検証プラグインは最初からのものになります。ここにいくつかのデモがあります。

于 2012-08-13T17:11:34.930 に答える
0

残りのHTMLが表示されない場合は、はい、JavaScriptの検証に関係なくフォームが送信される可能性があります。

これを回避する最も簡単な方法はonSubmit、フォームにハンドラーを追加することです。

<form name="filler" method="post" action="display.php" onSubmit="return my_validate_function();">

my_validate_function()これで、 falseが返された場合、フォームは送信されません。

于 2012-08-13T17:13:14.977 に答える
-1

JQueryなどを使用する必要があります。http://api.jquery.com/jQuery.ajax/とhttp://api.jquery.com/serialize/を見てください。

于 2012-08-13T17:13:20.283 に答える