jquery - 通过 Ajax 提交的多个 Jquery 日期选择器和表单-6ren

jquery - 通过 Ajax 提交的多个 Jquery 日期选择器和表单

转载作者：行者123 更新时间：2023-12-01 04:20:21

27

4

有人可以帮助我为以下流程创建函数吗？我想在一个页面上有许多日期选择器，每个日期选择器都有不同的形式。然后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>

我还尝试使用单选按钮来切换显示和不显示日期选择器元素，但没有成功。每页也有超过 2 个日期选择器。我想要一个datepicker和一个ajax function 。我已经尝试过上面的链接，但没有成功。感谢您的帮助。

最佳答案

以下内容应该适合您:

$(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);       
    });
});

Live DEMO

要简化设置为 $datepicker 的选择器，您可以将一类 datepicker 添加到文本框。

关于jquery - 通过 Ajax 提交的多个 Jquery 日期选择器和表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11174617/

27

4

0

文章推荐： java - 哪些 API 可用于从 Gemplus 智能卡 (PKCS11) 读取证书

文章推荐： python - "append"多维 numpy 数组的正确方法？

文章推荐： python - 在Python中使用super()方法

文章推荐： gwt - 制作一个简单的叠加类？

C# Dll注入(inject)器，VB.Net Dll注入(inject)器
我之前让 dll 注入(inject)器变得简单，但我有 Windows 7，我用 C# 和 C++ 做了它，它工作得很好!但是现在当我在 Windows 8 中尝试相同的代码时，它似乎没有以正确的方
javascript - Polymer 1.0 尝试制作一种类似于核心 split 器的 split 器，可以称为铁 split 器
我正在尝试制作一个名为 core-splitter 的元素，该元素在 1.0 中已弃用，因为它在我们的项目中起着关键作用。如果您不知道 core-splitter 的作用，我可以提供一个简短的描述。
scrapy - 在scrapy的同一进程中运行多个蜘蛛后如何停止 react 器？
我有几个不同的蜘蛛，想一次运行所有它们。基于 this和 this ，我可以在同一个进程中运行多个蜘蛛。但是，我不知道如何设计一个信号系统来在所有蜘蛛都完成后停止 react 器。我试过了: cra
twisted - 在某个条件下停止扭曲 react 器
有没有办法在达到特定条件时停止扭曲 react 器。例如，如果一个变量被设置为某个值，那么 react 器应该停止吗？最佳答案理想情况下，您不会将变量设置为一个值并停止 react 器，而是调用
javascript - 我如何定义我的应用程序的注入(inject)器
https://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js 上面的链接定义了外部js文件，我不知道Angular-1.0.0rc9.js的注入(in
angularjs - 如何为我的应用程序检索注入(inject)器？
我正在尝试运行一个函数并将服务注入(inject)其中。我认为这可以使用 $injector 轻松完成.所以我尝试了以下(简化示例): angular.injector().invoke( [ "$q
gwt - 使用多个抽象模块实例化一个注入(inject)器
在 google Guice 中，我可以使用函数 createInjector 创建基于多个模块的注入(inject)器。因为我使用 GWT.create 在 GoogleGin 中实例化注入(in
c# - 属性的自定义配置绑定(bind)器
我在 ASP.NET Core 1.1 解决方案中使用配置绑定(bind)。基本上，我在“ConfigureServices Startup”部分中有一些用于绑定(bind)的简单代码，如下所示: s
java - Spring初始化绑定(bind)器
我在 Spring MVC 中设置 initBinder 时遇到一些问题。我有一个 ModelAttribute，它有一个有时会显示的字段。 public class Model { privat
jquery post表单数据和MVC模型绑定(bind)器
我正在尝试通过jquery post发布knockoutjs View 模型 var $form = $('#barcodeTemplate form'); var data = ko.toJS(vm
c# - 具有多态对象集合的复杂模型的自定义模型绑定(bind)器
如何为包含多态对象集合的复杂模型编写自定义模型绑定(bind)程序？我有下一个模型结构: public class CustomAttributeValueViewModel { publi
c# - 使用多个构造函数注册开放泛型的简单注入(inject)器
您好，我正在尝试实现我在 this article 中找到的扩展方法对于简单的注入(inject)器，因为它不支持开箱即用的特定构造函数的注册。根据这篇文章，我需要用一个假的委托(delegate)
c# - 注册动态类型的简单注入(inject)器
你好，我想自动注册我的依赖项。我现在拥有的是: public interface IRepository where T : class public interface IFolderReposi
javascript - 带有位置服务的angularjs注入(inject)器
我正在使用 Jasmine 测试一些 Angular.js 代码。为此，我需要一个 Angular 注入(inject)器: var injector = angular.injector(['ng'
C 代码 reshape 器
我正在使用 Matlab 代码生成器。不可能包含代码风格指南。这就是为什么我正在寻找一个工具来“ reshape ”、重命名和重新格式化生成的代码，根据我的: 功能横幅约定文件横幅约定命名约定等
c++ - 与模板模板类一起使用的自定义模板参数绑定(bind)器
这个问题在这里已经有了答案: Where and why do I have to put the "template" and "typename" keywords? (8 个答案) 关闭 8
c++ - 开源dll注入(inject)器
我开发了一种工具，可以更改某些程序的外观。为此，我需要在某些进程中注入(inject)一个 dll。现在我基本上使用这个 approach .问题通常是人们无法注入(inject) dll，因为他们
java - 是否有使用方面和注释的数据绑定(bind)器？
我想使用 swing、spring 和 hibernate 编写一个 java 应用程序。我想使用数据绑定(bind)器用 bean 的值填充 gui，并且我还希望它反射(reflect) gui
python - 当两个蜘蛛都完成时如何停止 react 器
我有这段代码，当两个蜘蛛完成后，程序仍在运行。 #!C:\Python27\python.exe from twisted.internet import reactor from scrapy.cr
java - 我如何才能限定我不使用的 Autowiring 器 "own"
要点是 Spring Batch (v2) 测试框架具有带有 @Autowired 注释的 JobLauncherTestUtils.setJob。我们的测试套件有多个 Job 类提供者。因为这个类不

首页

博学

6Ren·AI

商城

jquery - 通过 Ajax 提交的多个 Jquery 日期选择器和表单