0

ユーザー名とパスワードを含む単純な HTML フォームがあります。

この HTML フォームには、無料ユーザーと有料ユーザーの両方のログインが含まれています。有料ユーザーはユーザー名とパスワードを入力する必要がありますが、無料ユーザーはデフォルトのユーザー名 (Username = myname、Password = password など) を入力する必要があります。

HTMLリンクを使用して、フォームの値を自動入力することができました-

<a href="#" onclick="document.getElementById('name').value='myname';document.getElementById('password').value='mypassword';" >Free User</a>

これはスムーズに機能しました。ここで、無料ユーザーがボタンをクリックすると、上記のように値が自動入力され、その HTML フォームがすぐに送信される可能性を追加したいと思います。

さまざまな方法で試してみたところ、フィールドは入力されますが、HTML フォームは送信されません。

ありがとうございます。

4

3 に答える 3

4

フォームにデフォルトを設定するだけで、スクリプトは必要ありません。

User ID: <input type="text" name="userid" value="guest">
<br>
Password: <input type="password" name="password" value="password">
<br>
<input type="submit" value="Login">

本当にスクリプトを使用する必要がある場合は、("name" という名前のフォーム コントロールはフォームの name プロパティをマスクするので、より適切なものを使用しました) 次のようなものを使用します。

<input type="button" value="Guest Login" onclick="
  this.form.userid.value = 'guest';
  this.form.password.value = 'password';
  this.form.submit();
">

しかし、率直に言って、それは完全に時間の無駄です。ゲスト用と登録ユーザー用の 2 つの送信ボタンをフォームに配置すると、ゲストはゲストの送信ボタンをクリックできます。

<input type="submit" name="registeredLogin" value="Registered User Login">
<input type="submit" name="guestLogin" value="Guest User Login">

クリックされたボタンはサーバーに送信されるため、適切な権限を設定できます。ユーザーがゲスト ボタンをクリックした場合、ユーザー名やパスワードに設定された値は気にせず、無視してください。

繰り返しますが、スクリプトは必要ありません。

于 2012-07-26T00:01:38.223 に答える
1

サーバー側で設定することもできます。つまり、ユーザー名/パスワードなしでログインフォームの送信を受信した場合は、デフォルトのユーザー/パスで上書きして、ログインスクリプトを続行します。

代わりに、またはこれに加えて、別のデフォルトのユーザー/パスの組み合わせを動的に割り当てたい場合は、1 つまたは 2 つの追加の非表示フィールドを設定することもできます。

あなたの質問にもっと直接的に、あなたはすでに1つのフィールドにデータを入力する方法を理解しています..だから、2番目のフィールドは同じトリックを繰り返しています. 必要に応じて、フォームからデフォルトの送信ボタンを引き続き使用できますが、クライアントで Javascript を実行する必要があります。フォームの送信は、伝統的に document.forms[n].submit(); によって行われます。
まだ document.getElementById('submit').click(); はるかにうまく機能します..

全体として、適切なフォールバックのために、2 つの非表示のフォーム フィールドを作成し、残りのサーバー側を処理することをお勧めします。

幸運を

更新 3: 私のテクニックに基づく 2 つのバージョンが完全に機能するようになりました!!!
自動ログオン:

<form action="login.php" method="post" id="formID" name="formID">
    <label for="name">Username:</label>
    <input id="name" name="name" type="text">
    <label for="user_email">Password:</label>
    <input id="user_email" name="email" type="password" />
    <input id="submit" name="submit" type="submit" value="Login" />
    </div>
</form>
<script type="text/javascript">
window.onload=function(){
    document.getElementById('name').value = 'duddu';
    document.getElementById('user_email').value = 'dudu';
    document.getElementById('submit').click();
};
</script>

ボタン (ユーザー開始) 自動ログオン:

<form action="login.php" method="post" id="formID" name="formID">
    <label for="name">Username:</label>
    <input id="name" name="name" type="text">
    <label for="user_email">Password:</label>
    <input id="user_email" name="email" type="password" />
    <input id="submit" name="submit" type="submit" value="Login" />
    <input name="free" type="button" value="Free User Login" onclick="popAndSub();" />
    </div>
</form>
<script type="text/javascript">
var popAndSub=function(){
    document.getElementById('name').value = 'duddu';
    document.getElementById('user_email').value = 'dudu';
    document.getElementById('submit').click();
};
</script>
于 2012-07-26T00:05:30.093 に答える
1

私があなたの質問を正しく理解し、フォームを投稿する前にフォームフィールドにボタンを入力したい場合は、埋め込みコードを JavaScript 関数に配置し、ボタンの「onclick」プロパティを介してクリックハンドラーとして設定するだけです。

元:

<script>
    function populate(){
        document.getElementById('name').value='myname';  //set username
        document.getElementById('password').value='mypassword'; //setpassword
        document.forms["formID"].submit();  //submit 'formID'
    }
</script>

...

<form>
    ....
    <input type="button" name="test" value="Free User" onclick="populate()">
</form>
<!-- or as a link.. -->
<a href="#" onclick="populate()" title="login as free user">Free User</a>

私は、変数を設定する必要があり、それらをデフォルトとして持たないことを意味する設計に疑問を呈します! (デフォルトは HTML で設定できます) ただし、それが設計仕様である場合、コードは次のとおりです。

編集 以下のすべてのコメントを要約すると、フォームに「送信」という名前の要素がある場合、このコードは機能しません-ほとんどの場合、送信という名前のフォームを送信します! このコードを呼び出そうとすると、送信行は実際にボタンを呼び出そうとします。これは明らかに関数ではなく、ここでこのエラーが発生します...

Uncaught TypeError: Property 'submit' of object <#an HtmlFormElement> is not a function.

[ jsFiddle でエラーが発生] [ jsFiddle を修正] -送信ボタンの名前だけが変更されていることに注意してください

これについての説明はここにあります- まあ、あなたは毎日何か新しいことを学びます!

したがって、ボタンの名前を別の名前に設定することもできます-つまり、サブ; または、送信ボタンのクリックイベントをプログラムで呼び出すGitaarLABのソリューションを使用できます。(これについては、コメントセクションを参照してください)

于 2012-07-26T00:00:28.270 に答える