`

ajax 添加相同的表单

 
阅读更多
function ajax_example_add_more($form, &$form_state, $no_js_use = FALSE) {
  $form['#tree'] = TRUE;
  $form['names_fieldset'] = array(
    '#type' => 'fieldset',
    '#title' => t('People coming to the picnic'),
    '#prefix' => '<div id="names-fieldset-wrapper">',
    '#suffix' => '</div>',
  );

  if (empty($form_state['num_names'])) {
    $form_state['num_names'] = 1;
  }
  for ($i = 0; $i < $form_state['num_names']; $i++) {
    $form['names_fieldset'][$i]['name']= array(
      '#type' => 'textfield',
      '#title' => t('Name'),
    );
    $form['names_fieldset'][$i]['hobby'] = array(
      '#type' => 'select',
      '#title' => t('Hobby'),
      '#options' => drupal_map_assoc(array('足球','电影','乒乓')),
      '#description' => ' 请选择你的爱好!',
    );
  }
  $form['names_fieldset']['add_name'] = array(
    '#type' => 'submit',
    '#value' => t('Add one more'),
    '#submit' => array('ajax_example_add_more_add_one'),
    '#ajax' => array(
      'callback' => 'ajax_example_add_more_callback',
      'wrapper' => 'names-fieldset-wrapper',
    ),
  );
  if ($form_state['num_names'] > 1) {
    $form['names_fieldset']['remove_name'] = array(
      '#type' => 'submit',
      '#value' => t('Remove one'),
      '#submit' => array('ajax_example_add_more_remove_one'),
      '#ajax' => array(
        'callback' => 'ajax_example_add_more_callback',
        'wrapper' => 'names-fieldset-wrapper',
      ),
    );
  }
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
  );
  return $form;
}

function ajax_example_add_more_callback($form, $form_state) {
  return $form['names_fieldset'];
}

function ajax_example_add_more_add_one($form, &$form_state) {
  $form_state['num_names']++;
  $form_state['rebuild'] = TRUE;
}

function ajax_example_add_more_remove_one($form, &$form_state) {
  if ($form_state['num_names'] > 1) {
    $form_state['num_names']--;
  }
  $form_state['rebuild'] = TRUE;
}


function ajax_example_add_more_submit($form, &$form_state) {
  $output = t('These people are coming to the picnic: @names',
    array('@names' => implode(', ', $form_state['values']['names_fieldset']['name'])) );
  drupal_set_message($output);
}

 

  • 大小: 23.5 KB
分享到:
评论

相关推荐

    php+ajax表单无刷新验证

    1. **事件监听**:使用JavaScript监听表单元素的`onchange`、`onkeyup`等事件,当用户输入时触发AJAX请求。 2. **创建XMLHttpRequest对象**:实例化一个XMLHttpRequest对象,用于与服务器进行通信。 3. **发送请求**...

    ajax提交form表单和上传图片

    在Web开发中,异步JavaScript和XML(Ajax)技术被广泛用于提高用户体验,尤其是在处理表单提交和文件上传时。本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。...

    AJAX添加和删除

    本教程将深入探讨如何使用AJAX来实现动态的添加和删除功能。 首先,我们需要理解AJAX的基本结构。一个基本的AJAX请求通常包括以下几个步骤: 1. 创建XMLHttpRequest对象:这是所有AJAX操作的核心。在现代浏览器中...

    ajax提交表单到后台

    本主题将深入探讨如何使用jQuery库的AJAX功能将表单数据提交到后台,以及后台如何使用Spring框架来处理这些数据。下面将详细阐述这一过程。 ### 一、前端:使用jQuery的AJAX提交表单 1. **引入jQuery库**:首先...

    利用ajax提交表单完整流程

    本文将详细介绍如何利用AJAX提交表单的完整流程,以实现更加流畅和用户友好的交互体验。 ### 1. 创建HTML表单 首先,我们需要创建一个HTML表单,它包含了用户输入的数据和一个用于触发AJAX提交的按钮。例如: ```...

    使用jQuery ajax提交表单代码

    本文将深入探讨如何使用jQuery的ajax方法来提交表单,从而实现异步数据交换,提高用户体验。 首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...

    ajax-表单验证

    2. **JavaScript事件监听**:在表单元素上添加事件监听器,如`onsubmit`或`onchange`,当用户输入或提交数据时触发Ajax请求。 3. **构造Ajax请求**:使用JavaScript的`XMLHttpRequest`或更现代的`fetch API`创建异步...

    ajaxForm异步提交表单(含图片)

    AjaxForm是jQuery Form Plugin的一个功能,用于实现异步表单提交,特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先,让我们了解什么是Ajax。AJAX(Asynchronous ...

    AJAX添加

    本篇文章将详细讲解如何实现一个简单的AJAX添加功能。 首先,我们需要理解AJAX的基本结构。一个基本的AJAX调用通常包括以下几个部分: 1. 创建XMLHttpRequest对象:这是所有AJAX操作的核心,它提供了与服务器进行...

    ajax表单验证实例

    同时,我们可以为表单元素添加JavaScript事件监听器,如`onsubmit`,以便在用户尝试提交表单时触发Ajax请求。 ```html 提交 ``` 接下来,我们编写JavaScript代码,使用XMLHttpRequest或更现代的fetch API来...

    Ajax 动态表单验证封装类附示例

    动态表单验证是Ajax应用的一个常见场景,用于在用户输入时实时检查数据的有效性,提供更好的用户体验。 在Web开发中,表单验证是非常关键的一步,它能确保用户提交的数据符合预设的规则,如邮箱格式、密码强度等。...

    ajax验证表单

    Ajax(异步JavaScript和XML)技术为表单验证提供了优雅的解决方案,允许在不刷新整个页面的情况下进行后台验证。本示例中,"ajax验证表单"是一个实现这一功能的具体应用,它主要利用JavaScript(尤其是JavaScript库...

    ajax表单验证简单实现jquery版

    本文将深入探讨如何使用jQuery库来实现一个简单的Ajax表单验证。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。 首先,我们需要理解Ajax的核心概念。Ajax允许我们在后台与...

    Asp+ajax提交表单实例

    在HTML表单中,我们可以添加一个事件监听器,例如“onsubmit”,当表单提交时触发Ajax请求。下面是一个简单的例子: ```html 提交" onclick="submitForm()" /&gt; function submitForm() { var form = ...

    用户注册表单验证(Ajax验证)

    1. **即时反馈**:当用户填写表单时,Ajax可以在后台验证输入,如邮箱格式、手机号码合法性等,及时给出错误提示,提高用户交互体验。 2. **非阻塞操作**:传统方式中,用户提交表单后页面会跳转或刷新,而Ajax验证...

    asp+jquery ajax实例源码,添加,删除,修改,分页

    - 在前端,jQuery监听表单提交事件,阻止默认的表单提交行为,然后使用$.ajax()发送包含新数据的POST请求到ASP服务器端脚本。 - ASP接收到请求后,通过ADO(ActiveX Data Objects)处理数据库操作,如使用SQL ...

    JQuery Ajax提交整个表单

    为了防止表单默认的提交行为导致页面刷新,可以在表单的`submit`事件中添加阻止默认行为的代码: ```javascript $('#myForm').on('submit', function(event) { event.preventDefault(); // 阻止表单的默认提交 //...

    动态添加删除表单元素

    一、动态添加表单元素 1. 创建新元素:首先,我们需要使用JavaScript创建新的HTML元素。例如,如果要添加一个文本输入框,可以使用`document.createElement('input')`来创建一个`&lt;input&gt;`标签。接着,可以通过`...

    ajax提交表单

    ### AJAX提交表单知识点详解 #### 一、概述 在Web开发中,异步JavaScript与XML(Asynchronous JavaScript and XML,简称AJAX)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器...

    AJAX验证表单下载.rar

    在本案例中,"AJAX验证表单下载"是一个关于利用AJAX进行表单数据验证并实现文件下载的实践项目。这个压缩包可能包含了HTML、CSS、JavaScript等文件,用于展示如何使用AJAX来提高用户体验,避免传统表单提交时页面...

Global site tag (gtag.js) - Google Analytics