javascript - JQuery は、チェックボックスがオンになっているテーブルの列を印刷しようとし、Web サーバーからの応答を印刷します。

Question

JQuery を使用して URL を作成しようとしていますが、小さな問題が発生しています。私は自分のページにテーブルを次のように印刷しています:

   <table id="employeeTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Branch</th>
                <th>Phone No.</th>
                <th>Extension</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var prod in Model)
            {
                <tr>
                    <td>@prod.FullName</td>
                    <td>@prod.Branch</td>
                    <td>@prod.PhoneNo</td>
                    <td>@prod.Extension</td>
                    <td>@prod.Email</td>
                    @if (User.IsInRole(@"Admins") || User.Identity.Name == prod.DomainAC)
                    {
                        <td><a href="/home/edit/@prod.Id"  style="color: blue;">edit</a></td>
                    }
                    else
                    {
                        <td>User => @User.ToString()</td>   
                    }
                    <td>
                        <input type="checkbox" name="message" value="@prod.PhoneNo">Message<br>
                    </td>
                </tr>
            }
        </tbody>
    </table>

次に、この下にフォームがあり、ユーザーにいくつかの値を入力するように求めています。

@{if (IsPost) {
      string ua = Request["u"];
      string pa = Request["p"];
      string ma = Request["m"]; 
    <p>You entered: </p>
    <p>Company Name: @ua </p>
    <p>Contact Name: @pa </p>
    <p>Contact Name: @ma </p>
    <p>It should appear here, but it won't =></p>
    <p id="out"></p>
  }
  else
  {
    <form method="post" runat="server" id="FormID">
        Username:<br />
        <input type="text" name="u" id="u" /><br />
        Password<br />
        <input type="text" name="p" id="p" /><br />
        <br />
        Password<br />
        <textarea name="m" id="m" cols="25" rows="5">
        Enter your comments here...
        </textarea><br>
        <br />
        <input type="submit" value="Submit" class="submit" id="thebutton" />
    </form>
}

JQuery を使用して URL を作成し、そこに移動して画面に応答を出力したい - テーブル内のチェックボックスとフォームの値を使用して、スクリプトで次のようにします。

<script>
    $("#thebutton").click(function () {
        $('#out').text('');
        var form = $(document.getElementById('FormID'));
        var urlToConstruct = 'http://webaddress.com/web/d.php';
        urlToConstruct += '?u=' + form.find('#u').val();
        urlToConstruct += '&p=' + form.find('#p').val();
        $('#employeeTable tr').has(':checkbox:checked').find('td:eq(2)').each(function () {
            urlToConstruct += ($(this).text());
        });
        alert(urlToConstruct);
    });
</script>

このフォームから作成したい URL は次のとおりです。

http://webaddress.com/web/d.php?u=<Username entered by user>&p=<Password entered by user>&s=<List of Phone Numbers from the C# above where the checkbox is selected, comma separated>&m=<Comment submitted by user>

したがって、私の名前が「John」、パスワードが「Password1」、コメントが「Test」で、電話番号が「12345678」のユーザーのチェックボックスを 1 つ選択した場合、ナビゲートする URL は次のとおりです。

http://webaddress.com/web/d.php?u=John&p=Password1&s=12345678&m=Test

理想的には、可能であれば新しいページに移動するのではなく、同じ親 Web ページに Web ページの応答をしばらく印刷したいと考えています。

だから、私の質問 -

alert()上記の JQuery を修正して、正しい URL が構築されるようにするにはどうすればよいですか?
親サイトから移動せずに、div 内で送信をクリックしたときにサーバーからの応答を表示するにはどうすればよいですか?

アップデート：

これは私を夢中にさせています:)。アラートを削除して、フィドラーで作成された URL を表示しようとしました。JQuery のフォーム部分が機能します。テーブル部分は単に拒否します。

更新＃2：

脚本：

<script>
    $("#thebutton").click(function () {
        evt.preventDefault();
        var $form = $('#FormID');
        var urlToConstruct = 'http://webaddress.com/web/d.php';
        urlToConstruct += '?u=' + $form.find('#u').val();
        urlToConstruct += '&p=' + $form.find('#p').val();

        var phoneNumbers =
            $.map($('#employeeTable').find('input:checked')
                    .parent()
                    .siblings('.js-phoneNumbers'),
                  function (elem, index) {
                      return $(elem).text();
                  });

        urlToConstruct += 's=' + phoneNumbers.join(',');

        alert(urlToConstruct);
        form.submit();
    });
</script>

HTML :

    <table id="employeeTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Branch</th>
                <th>Phone No.</th>
                <th>Extension</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var prod in Model)
            {
                <tr>
                    <td>@prod.FullName</td>
                    <td>@prod.Branch</td>
                    <td class="js-phoneNumbers">@prod.PhoneNo</td>
                    <td>@prod.Extension</td>
                    <td>@prod.Email</td>
                    @if (User.IsInRole(@"Admins") || User.Identity.Name == prod.DomainAC)
                    {
                        <td><a href="/home/edit/@prod.Id"  style="color: blue;">edit</a></td>
                    }
                    else
                    {
                        <td>User => @User.ToString()</td>   
                    }
                    <td>
                        <input type="checkbox" name="message" value="@prod.PhoneNo">Message<br>
                    </td>
                </tr>
            }
        </tbody>
    </table>

まだ警告ダイアログはありません:(

score 1 · Accepted Answer

var form = $(document.getElementById('FormID'));

マークアップに id の要素がありませんFormID。
なぜdocument.getElementById('FormID')ですか？すでにjQueryが含まれているので、単に使用してくださいvar form = $('#FormID');

適切なマークアップで質問を更新できれば、さらにお手伝いできます。

別の考えとして、クリックハンドラーはsubmitフォームのボタンに添付されています。つまり、そのボタンをクリックしたときにブラウザーによって実行されるデフォルトのアクションは、フォームの送信です。それでも明示的にフォームを送信したい場合は、次のようにクリックハンドラーを変更することをお勧めします。

$("#thebutton").click(function(evt) {
    evt.preventDefault();
    // rest of the code as before
    ...
    ...
});

第三に、次のようにマークアップと js を再構築できます。

<table id="employeeTable">
    <thead>
        // markup as before
    </thead>
    <tbody>
        @foreach (var prod in Model)
        {
            <tr>
                // markup as before
                <td class="js-phoneNumbers">@prod.PhoneNo</td>
                // markup as before
            </tr>
        }
    </tbody>
</table>


$("#thebutton").click(function(evt) {
    evt.preventDefault();

    var $form = $('#FormID');
    var urlToConstruct = 'http://webaddress.com/web/d.php';
    urlToConstruct += '?u=' + $form.find('#u').val();
    urlToConstruct += '&p=' + $form.find('#p').val();

    var phoneNumbers = 
        $.map($('#employeeTable').find('input:checked')
                .parent()
                .siblings('.js-phoneNumbers'),
              function (elem, index){
                  return $(elem).text();
              });

    urlToConstruct += 's=' + phoneNumbers.join(',');

    alert(urlToConstruct);
    form.submit();
});

td私たちが興味を持っているに、特定のクラスを与えましたjs-phoneNumbers。接頭辞はjs、クラスが主に js を介して使用され、スタイリング用ではないことを読者に伝えます。

クリックハンドラーは、マジックの代わりにこのクラスを使用しますtd:eq(2)。こうすることでより明確に意図が伝わる気がします。

は$.map、jquery 要素の配列を文字列 (つまり、電話番号) の配列に変換するために使用されます。

URL の電話番号部分を構成するために以前に必要だったコードが間違っていました。Cheifly&s=が URL に追加されておらず、電話番号がカンマで区切られていませんでした。

javascript - JQuery は、チェックボックスがオンになっているテーブルの列を印刷しようとし、Web サーバーからの応答を印刷します。

1 に答える 1

Related

Reference