2

私はいくつかのJavaScriptを練習しているだけで、以前はJQueryをよく使用していました! 私は生の JavaScript を使った経験がほとんどないので、JQuery と同じように学びたいと思っています。シンプルなフォームとそれを送信するための JavaScript 関数があり、関数を使用してフォーム内の各入力の名前と値を取得したいのですが、うまくいかないようです誰かが私を助けてくれますか?

<!DOCTYPE html>
<html>
<head>
    <title>Foreach Practice</title>
    <script type="text/javascript">
        function Get() {
            var Form = document.getElementById('Form');
            for(I = 0; I < Form.length; I++) {
                var Value = this.attribute('name').value;
                alert(Value);
            }
        }
    </script>
</head>
<body>
<form id="Form" onsubmit="return false;">
    <input type="text" name="User" placeholder="Username" />
    <input type="password" name="User" placeholder="Password" />
    <input type="submit" name="Submit" onclick="javascript:Get();" />
</form>
</body>
</html>
4

3 に答える 3

6

この質問は、おそらくコード レビューに適していますが、何でも構いません。

> function Get() {

大文字で始まる変数名は、慣例により、コンストラクター用に予約されています。また、名前は関数が何をするかを示す必要があります。一般的な「get」関数はあまりヒントを与えません。より適切な名前はgetFormValuesかもしれません。

>     var Form = document.getElementById('Form');

メソッドを呼び出す代わりに使用できるdocument.formsコレクションがあります。

    var form = document.forms('Form');

>     for(I = 0; I < Form.length; I++) {

常に適切なスコープで変数を宣言する必要があります (ECMAScript にはグローバル、関数、および eval スコープしかなく、ブロック スコープがないことに注意してください)、特にカウンターです。また、フォームの長さ属性は、フォーム内のコントロールの数です。これはライブ コレクションであるため、必要のないときに毎回長さを取得すると、パフォーマンスが低下する可能性があるため、値をキャッシュします。

    for (var i = 0, iLen = form.length; i < iLen; i++) {

>         var Value = this.attribute('name').value;

thisの値は、関数の呼び出し方法によって設定されます。関数がハンドラーによって呼び出される場合、ブラウザーとメソッドのアタッチメントに応じて、リスナーが関数を呼び出した要素を参照します。この場合、関数はインライン リスナーによって呼び出されるため、これは設定されていないため、デフォルトでグローバル オブジェクトになります。

次のようにすると、リスナーから要素への参照を簡単に渡すことができます。

<input ... onclick="getFormValues(this);" ... >

これで、関数は要素への参照を受け取り、フォームへの参照を簡単に取得して、コントロールを反復処理できます。最後に、フォーム コントロールの属性値にアクセスする必要があることはほとんどありません。ほとんどの場合、プロパティにアクセスする必要があります。したがって、ここに書き直された関数があります：

function getFormValues(element) {
    var form = element.form;
    var controls = form.controls;

    for (var i=0, iLen=controls.length; i<iLen; i++) {
        alert(controls[i].name + ': ' + controls[i].value);
    }
    // Prevent form submission
    return false;
}

最後に、フォームは送信ボタンをクリックする以外の方法でも送信できるため、送信ボタンではなくフォームからリスナーを呼び出すことをお勧めします。ああ、フォーム コントロールを「submit」と呼んだり、フォーム メソッドと同じ名前を使用したりしないでください。同じ名前のメソッドが上書きされます。大文字化されているため、ここでは回避できますが、それはあまり防御にはなりません。

関連する HTML は次のようになります (フォームには名前も ID も必要ないことに注意してください)。

<form onsubmit="return getFormValues();">
    <input type="text" name="userName" placeholder="Username">
    <input type="password" name="userPassword" placeholder="Password">
    <input type="submit" name="submitButton">
</form>
于 2013-04-08T01:50:48.860 に答える
3

フォームの子を反復処理し、 getAttribute関数を使用して属性値を取得する必要があります。

これを試して：

function Get() {
    var Form = document.getElementById('Form');         
    var childs = Form.children;         
    for(I = 0; I < childs.length; I++) {                    
        var Value = childs[I].getAttribute('name');                             
        alert(Value);
    }
}
于 2013-04-08T01:37:05.523 に答える
2

これに対する答えを探している人は誰でも、コードを再配置するランダムな試みを使用するだけでそれを見つけましたが、ここにあります。

<!DOCTYPE html>
<html>
<head>
    <title>Foreach Tutorial</title>
    <script type="text/javascript">
        function Get() {
            var Form = document.getElementById('Form');
            for(I = 0; I < Form.length; I++) {
                var Name = Form[I].getAttribute('name');
                var Value = Form[I].value;
                alert(Name + ' : ' + Value);
            }
        }
    </script>
</head>
<body>
<form id="Form" onsubmit="return false;">
    <input type="text" name="User" placeholder="Username" />
    <input type="password" name="Pass" placeholder="Password" />
    <input type="submit" name="Submit" onclick="Get();" />
</form>
</body>
</html>
于 2013-04-08T01:39:40.553 に答える