2

誰かが次のプロセスの関数を作成するのを手伝ってもらえますか？1つのページに、それぞれフォームが異なる多くの日付ピッカーを配置したいと思います。次に、onChangeで、正しいフォームを送信します。私は現在、この動作を機能させるためにコードを何度も繰り返しています。これがそのページの私のコードのすべてです。

<html>
<head>
<link rel='stylesheet' type='text/css' media='all' href='style.css' />
<link rel='stylesheet' type='text/css' media='all' href='jqueryui.css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var $datepickers = $(".datepick");
    var $setallow = $(".showdate");
    var $removeallow = $(".hidedate");

    $removeallow.click(function() {
    var $remove = $(this).closest("form");
    $remove.children(".datepick").hide("normal");
        var formData = $remove.serialize();
        submitForm(formData);       
    });
    $setallow.click(function() {
    var $allow = $(this).closest("form");
    $allow.children(".datepick").show("normal");
        var formData = $allow.serialize();
        submitForm(formData);       
    });

    $datepickers.datepicker({ dateFormat: 'yy-mm-dd' });
    $datepickers.change(function() {
        var $form = $(this).closest("form");
        var formData = $form.serialize();
        alert($form.serialize());
    submitForm(formData);       
    });
});
</script>
</head>
<body>
<div>

<h1 align="center">Testing Datepicker</h1>
<div class="entry">
<table id="striping" cellspacing="0" cellpadding="2" width="100%"><tr class="textbold">
<td class="Label" nowrap="nowrap" width="500">
Title Name
</td>
<td class="Label" align="center" nowrap="nowrap" width="70">
Show</td>
<td class="Label" align="center" nowrap="nowrap" width="100">
Don't Show
</td>
<td class="Label" align="left" nowrap="nowrap" width="100">
Date (Year-Month-Day)
</td></tr>


<tr id="highlight">
<td nowrap="nowrap" height="33">Title 19</td>

<form id="form19">
<input name="id" type="hidden" value="19" />
<td align="center" nowrap="nowrap">
<input name="allow" class="showdate" type="radio" value="yes" id="show19" />
</td>
<td align="center" nowrap="nowrap">
<input name="allow" class="hidedate" type="radio" value="no" id="hide19" checked="checked" />
</td>
<td align="center" nowrap="nowrap">
<table width="100%">
<tr><td>
<input name="allowdate" class="datepick" id="datepicker19" type="text" size="12" maxlength="10" value="2012-06-25">
</td>
<td width="121"><div id="feedback"></div></td></tr>
</table>
</td>
<input type="hidden" name="token" value="69601e04ff3580695fa4aa1dc91d35b6" />
</form>

</tr>

<tr id="highlight">
<td nowrap="nowrap" height="33">Title 2</td>

<form id="form2">
<input name="id" type="hidden" value="2" />
<td align="center" nowrap="nowrap">
<input name="allow" class="showdate" type="radio" value="yes" id="show2" />
</td>
<td align="center" nowrap="nowrap">
<input name="allow" class="hidedate" type="radio" value="no" id="hide2" checked="checked" />
</td>
<td align="center" nowrap="nowrap">
<table width="100%">
<tr><td>
<input name="allowdate" class="datepick" id="datepicker2" type="text" size="12" maxlength="10" value="2012-06-25">
</td>
<td width="121"><div id="feedback"></div></td></tr>
</table>
</td>
<input type="hidden" name="token" value="69601e04ff3580695fa4aa1dc91d35b6" />
</form>

</tr>


</table>
</div>

<script>
    function submitForm(formData) {
        $.ajax({
            type: "POST",
            url: "update.php",
            data: formData,
            dataType: "json",
            cache: false,
            timeout: 8000,
            success: function(data) {
                    $("#feedback").html('<img src="icon_updated.png" border="0" />').fadeIn("fast");
                    setTimeout("$('#feedback').fadeOut('slow')", 1000);         
                },
            error: function(data) {
                    $("#feedback").html('<img src="icon_not_updated.png" border="0" />').fadeIn("fast");
                    setTimeout("$('#feedback').fadeOut('slow')", 1000);
                }
        });
    };
</script>

</body>
</html>

また、ラジオボタンを使用して、日付ピッカー要素の表示と非表示を切り替えようとしていますが、成功しません。1ページに2つ以上の日付ピッカーもあります。1つのdatepickerと1つのajax関数が欲しいのですが。私は運が悪かったので上記のリンクを試しました。助けてくれてありがとう。

4

1 に答える 1

2

これらの行に沿った何かがうまくいくはずです:

$(function() {
    //var $datepickers = $("#datepicker1, #datepicker2, #datepicker3");
    var $datepickers = $(".datepick");

    $datepickers.datepicker({ dateFormat: 'yy-mm-dd' });
    $datepickers.change(function() {
        var $form = $(this).closest('form');
        var formData = $form.serialize();

        submitForm(formData);       
    });
});

ライブデモ

$datepicker に設定されたセレクターを簡素化するために、テキストボックスに datepicker のクラスを追加できます。

于 2012-06-24T02:56:35.460 に答える