`

ajax 分步向导

 
阅读更多
function ajax_example_wizard($form, &$form_state, $no_js_use = FALSE) {
  $form['#prefix'] = '<div id="wizard-form-wrapper">';
  $form['#suffix'] = '</div>';
  $form['#tree'] = TRUE; // We want to deal with hierarchical form values.
  $step = empty($form_state['storage']['step']) ? 1 : $form_state['storage']['step'];
  $form_state['storage']['step'] = $step;

  switch ($step) {
    case 1:
      $form['step1'] = array(
        '#type' => 'fieldset',
        '#title' => t('Step 1: Personal details'),
      );
      $form['step1']['name'] = array(
        '#type' => 'textfield',
        '#title' => t('Your name'),
        '#default_value' => empty($form_state['values']['step1']['name']) ? '' : $form_state['values']['step1']['name'],
        '#required' => TRUE,
      );
      break;

    case 2:
      $form['step2'] = array(
        '#type' => 'fieldset',
        '#title' => t('Step 2: Street address info'),
      );
      $form['step2']['address'] = array(
        '#type' => 'textfield',
        '#title' => t('Your street address'),
        '#default_value' => empty($form_state['values']['step2']['address']) ? '' : $form_state['values']['step2']['address'],
        '#required' => TRUE,
      );
      break;

    case 3:
      $form['step3'] = array(
        '#type' => 'fieldset',
        '#title' => t('Step 3: City info'),
      );
      $form['step3']['city'] = array(
        '#type' => 'textfield',
        '#title' => t('Your city'),
        '#default_value' => empty($form_state['values']['step3']['city']) ? '' : $form_state['values']['step3']['city'],
        '#required' => TRUE,
      );
      break;
  }
if ($step == 3) {
    $form['submit'] = array(
      '#type' => 'submit',
      '#value' => t("Submit your information"),
    );
  }
  if ($step < 3) {
    $form['next'] = array(
      '#type' => 'submit',
      '#value' => t('Next step'),
      '#ajax' => array(
        'wrapper' => 'wizard-form-wrapper',
        'callback' => 'ajax_example_wizard_callback',
      ),
    );
  }
  if ($step > 1) {
    $form['prev'] = array(
      '#type' => 'submit',
      '#value' => t("Previous step"),

      // Since all info will be discarded, don't validate on 'prev'.
      '#limit_validation_errors' => array(),
      // #submit is required to use #limit_validation_errors
      '#submit' => array('ajax_example_wizard_submit'),
      '#ajax' => array(
        'wrapper' => 'wizard-form-wrapper',
        'callback' => 'ajax_example_wizard_callback',
      ),
    );
  }
  return $form;
}

function ajax_example_wizard_callback($form, $form_state) {
  return $form;
}

function ajax_example_wizard_submit($form, &$form_state) {

  // Save away the current information.
  $current_step = 'step' . $form_state['storage']['step'];
  if (!empty($form_state['values'][$current_step])) {
    $form_state['storage']['values'][$current_step] = $form_state['values'][$current_step];
  }

  // Increment or decrement the step as needed. Recover values if they exist.
  if ($form_state['triggering_element']['#value'] == t('Next step')) {
    $form_state['storage']['step']++;
    // If values have already been entered for this step, recover them from
    // $form_state['storage'] to pre-populate them.
    $step_name = 'step' . $form_state['storage']['step'];
    if (!empty($form_state['storage']['values'][$step_name])) {
      $form_state['values'][$step_name] = $form_state['storage']['values'][$step_name];
    }
  }
  if ($form_state['triggering_element']['#value'] == t('Previous step')) {
    $form_state['storage']['step']--;
    // Recover our values from $form_state['storage'] to pre-populate them.
    $step_name = 'step' . $form_state['storage']['step'];
    $form_state['values'][$step_name] = $form_state['storage']['values'][$step_name];
  }

  // If they're done, submit.
  if ($form_state['triggering_element']['#value'] == t('Submit your information')) {
    $value_message = t('Your information has been submitted:') . ' ';
    foreach ($form_state['storage']['values'] as $step => $values) {
      $value_message .= "$step: ";
      foreach ($values as $key => $value) {
        $value_message .= "$key=$value, ";
      }
    }
    drupal_set_message($value_message);
    $form_state['rebuild'] = FALSE;
    return;
  }

  // Otherwise, we still have work to do.
  $form_state['rebuild'] = TRUE;
}

 

分享到:
评论

相关推荐

    jQuery CSS3分步向导手风琴特效.zip

    【jQuery CSS3分步向导手风琴特效】是一种网页交互设计中的常见元素,它结合了jQuery库的灵活性和CSS3的现代特性,为用户提供了一种优雅的方式来展示内容。手风琴效果允许用户通过展开和折叠不同的部分来查看或隐藏...

    jQuery实现分步注册向导.zip

    分步注册向导是一种将复杂表单分割成多个简单步骤的界面设计,每个步骤只显示一部分字段,使用户更容易理解和填写。这有助于减少用户的认知负担,提高注册转化率。 三、实现步骤 1. **布局设计**:首先,我们需要...

    jQuery实现一个滚动的分步注册向导

    滚动分步向导则是将这些步骤排列在单一页面上,通过滚动页面来切换步骤,而不是采用传统的“下一步”按钮。 1. **页面布局**:在创建滚动向导时,首先要考虑的是页面布局。每个步骤应该是一个独立的容器,它们可以...

    jQuery和CSS3手风琴样式分步向导特效

    **jQuery和CSS3手风琴样式分步向导特效详解** 在网页设计中,交互性和用户体验是至关重要的因素。为了提升这些方面,开发者们经常利用jQuery和CSS3来创建各种动态效果,其中手风琴(Accordion)样式就是一个常用的...

    jQuery和CSS3手风琴样式分步向导特效源码.zip

    在本资源中,"jQuery和CSS3手风琴样式分步向导特效源码.zip" 提供了一个结合了jQuery和CSS3技术实现的手风琴式(Accordion)效果的指南。手风琴效果是一种常见的网页交互设计,它允许用户展开或折叠内容区域,以节省...

    jQuery+CSS3分步向导手风琴特效

    "jQuery+CSS3分步向导手风琴特效"就是一个很好的例子,它结合了两种强大的技术,为用户提供了一种简洁而直观的导航方式。接下来,我们将深入探讨这个特效背后的原理、实现方法以及相关的知识点。 首先,jQuery是一...

    jQuery实现分步注册向导特效代码

    在本文中,我们将深入探讨如何使用jQuery来实现一个分步注册向导,这是一种常见的用户界面设计,用于引导用户逐步完成复杂或多步骤的注册过程。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、...

    jQuery分步指引介绍特效代码.zip

    **jQuery分步指引介绍特效代码** 是一个利用 **jQuery** 和其移动版插件 **jQuery.mobile** 开发的页面引导和介绍系统。这个特效代码旨在帮助用户更好地理解和使用复杂的网页应用,通过逐步提示来引导他们完成操作...

    js用户反馈表格步骤向导代码.zip

    这个向导可能通过分步引导用户填写反馈,提高用户体验并确保信息的完整性和准确性。JavaScript是前端开发中的主要脚本语言,用于实现网页动态功能;CSS则负责页面的样式设计,使其美观且易用。 【描述】提到该代码...

    jquery向导提示操作插件.rar

    向导提示插件通常是用来创建分步指南,通过在页面上高亮显示特定元素并提供相关说明,引导用户逐步完成一项任务。这种插件在教育性应用、复杂表单或多功能界面中尤为常见。"jquery向导提示操作插件"正是这样一个工具...

    Bootstrap4 多步骤向导模态窗口插件

    它旨在提供一个分步的用户体验,引导用户完成复杂或涉及多个阶段的操作,比如贷款申请流程。这个插件充分利用了Bootstrap4的灵活性和响应式设计,使得在各种设备上都能保持良好的视觉效果和用户体验。 首先,...

    视屏ASP.NET 2.0的新控件

    1. **Wizard 控件**:Wizard控件为用户提供了一种分步向导式的界面,使得复杂的任务可以被拆分为多个简单的步骤。它允许自定义各个步骤的布局和样式,同时提供了导航按钮,如“上一步”、“下一步”和“完成”。 2....

    步进式导航

    这种设计模式常用于注册、设置向导、购物结账等场景,通过分步显示内容,使用户能够集中精力于当前步骤,降低复杂度,提高用户体验。在本示例中,我们关注的是一个基于jQuery实现的进步式导航效果。 jQuery是一个轻...

    自定义jquery-wizard插件

    jQuery Wizard插件是一种用于创建分步表单或向导样式的交互体验的工具,它能够帮助用户逐步完成复杂任务或填写多步骤信息。在这个项目中,我们有一个名为“自定义jquery-wizard插件”的实现,通过提供的资源文件,...

    jQuery带节点步骤进度条插件

    3. **表单提交**:长表单分步填写时,进度条可以降低用户的焦虑感,让他们知道还需完成多少字段。 4. **设置向导**:新用户初次使用复杂软件或应用时,设置向导通常会用到步骤进度条来指导用户。 四、使用方法 1. *...

    jQuery步骤进度条样式代码

    这个功能在多步骤表单、向导或教程中非常实用,为用户提供了一种直观的方式来跟踪他们所在的位置以及完成任务的进度。结合HTML、CSS和jQuery,你可以根据自己的需求自定义样式和交互效果,以适应各种项目场景。

Global site tag (gtag.js) - Google Analytics