javascript - フォーム送信後に前のタブに戻るのを防ぐ方法

Question

いくつかのタブがあり、タブを選択するたびにフォームが送信され、変数に異なる値が送信されます (ユーザーからは隠されています)。TAB1 から TAB2 に移動すると、variable99 は 2 の値を取得し、TAB3 は 3 の値を取得します....私が抱えている問題は、TAB2 を選択したときにページが元に戻りたくないということです。 TAB1へ。これが私のコードです：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<style type="text/css">
</style>

<script>
$(function() {
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){
var tabId = $(this).attr('id');
var tabNum = tabId.split('-')[2];
$('#form-' + tabNum).submit();
});
});
</script>


</head>

<body>



<div id="Main">
<ul>
<li><a href="#Tab1">Tab1</a></li>
<li><a href="#Tab2">Tab2</a></li>
<li><a href="#Tab3">Tab3</a></li>
<li><a href="#Tab4">Tab4</a></li>
<li><a href="#Tab5">Tab5</a></li>
<li><a href="#Tab6">Tab6</a></li>
</ul>

<form id="form-1" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="1">
</form>   

<form id="form-2" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="2">
</form> 

<form id="form-3" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="3">
</form>

<form id="form-4" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="4">
</form>

<form id="form-5" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="5">
</form>

<form id="form-6" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="6">
</form>

<div id="Tab1">
<p>Tab1</p> 
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>


</body>
</html>

ここに私のコードがあります。

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<style type="text/css">
</style>

<script>
$(function() {//Open function
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){ //Open [id^=ui-id-]

       if (tabId == 'ui-id-1')
     {
        doAjax('1');
        }
    else if (tabId == 'ui-id-2') 
     {
      doAjax('2');
     }
    else if (tabId == 'ui-id-3') 
     {
      doAjax('3');
     }
function doAjaxSubmit(formID) { //Open doAjaxSubmin
$.ajax({
    type: "POST",
    url: "Tab_Click_v00.html",
    data: "Nb_var99=" + formID,
})
} //Close doAjaxSubmin
}); //Close [id^=ui-id-]
});//Close function
</script>


</head>

<body>



<div id="Main">
<ul>
<li><a href="#Tab1">Tab1</a></li>
<li><a href="#Tab2">Tab2</a></li>
<li><a href="#Tab3">Tab3</a></li>
<li><a href="#Tab4">Tab4</a></li>
<li><a href="#Tab5">Tab5</a></li>
<li><a href="#Tab6">Tab6</a></li>
</ul>



 <div id="Tab1">
 <p>Tab1</p> 
 </div>
 <div id="Tab2">
 <p>Tab2</p>
 </div>
 <div id="Tab3">
 <p>Tab3</p>
 </div>
 <div id="Tab4">
 <p>Tab4</p>
 </div>
 <div id="Tab5">
 <p>Tab5</p>
 </div>
 <div id="Tab6">
 <p>Tab6</p>
 </div>
 </div>


</body>
</html>

これは機能していません。また、CSSスタイルを殺しました?? これからも頑張ります。

score 2 · Accepted Answer

あなたがやりたいことのために、<form>s と<input>s をまったく使用する必要はありません。

クリックされたタブに基づいて、AJAX 経由で 1 または 2 または 3 を目的の HTML ページに送信できます。

<form>いくつかのフィールドがあり、それらのデータを処理のために別のサーバーページに POST したい場合、この構造は優れています。ただし、あなたの場合、値を別のページに送信してから返すだけのようです。

AJAX を使用してそれを行う 1 つの方法を次に示します。

$(document).ready(function() {
    $( "#Main" ).tabs();

    $('[id^=ui-id-]').click(function() {

        if (tabId == 'ui-id-1') {
            doAjax('1');
        }else if (tabId == 'ui-id-2') {
            doAjax('2');
        }else if (tabId == 'ui-id-3') {
            doAjax('3');
        }

    }); //END ui-id-#.click fn
}); //END document.ready

function doAjaxSubmit(formID) {
    $.ajax({
        type: "POST",
        url: "myphpprocessor.php",
        data: "Nb_var99=" + formID,
    })
    .done(function( recd_from_PHP ) {
        //No need to put ANYTHING in here, but for eg, you can do:

        //AS AN EXAMPLE ONLY, display message sent from server side
        alert("PHP side said: " + recd_from_PHP);

        //AS AN EXAMPLE ONLY, click the third tab...
        $('[id^=ui-id-3]').click();
    });

}

フォームデータを送信するもう 1 つの方法 (意図したように a を使用) は、ページ内にページを含む<form>隠しファイルをページに作成し、そのページに POST することです。 <iframe>Tab_Click_v00.html

フォームのターゲットは既にのページにある<iframe>ため、現在のページは更新されません。また、<iframe>が非表示になっているため、ユーザーには何も異常は表示されません。

score 1 · Accepted Answer

非表示に投稿する<iframe>

私はこれを自分でやったことがなく、少し難しいことがわかります。これを行う方法について説明しているいくつかの投稿を次に示します。

どのように iframe に投稿しますか?
非表示の iframe 送信 iframe
で name= attr
Post フォームを指定することを忘れないでください

前の 2 つの回答で示唆したように、これは基本的な AJAX フォームの送信よりもかなり複雑であることがわかります。

あなたの状況で AJAX ソリューションが魅力的でない理由はわかりませんが、AJAX と PHP が私にとって未知の商品だったときのことを覚えています。おそらくそれがあなたが苦労していることです。

もしそうなら、もう苦労しないでください。どちらも、あなたが思っているよりもはるかに単純です。

PHP の基本的な無料の 10 分間チュートリアルについては、
phpAcademy.org
thenewboston.comをご覧ください。

次に、AJAX の基本を理解するための良い記事をいくつか紹介します。

簡単な例

より複雑な例

ドロップダウン 1 での選択に基づいてドロップダウン 2 を設定します

AJAX ソリューションを使用することをお勧めしますが、最終的に何を達成しようとしているのかわかりません。ファイルTab_Click_v00.htmlは受け取ったデータで何をするつもりですか?

Tab_Clickおそらく、サイドでの望ましい最終結果について、(この投稿の下のコメントとして) 詳細情報を提供していただければ、私はより多くの助けになることができます.

javascript - フォーム送信後に前のタブに戻るのを防ぐ方法

4 に答える 4

Related

Reference