วิธีที่ง่ายที่สุดสำหรับเขตข้อมูลที่มีเงื่อนไขในฟอร์ม


20

วิธีที่ง่ายที่สุดในการทำให้ javascript magic เป็นวิธีที่ง่ายที่สุดสำหรับการเปิด / ปิดการใช้งานเขตข้อมูลฟอร์มตามค่าของฟิลด์อื่น ดูเหมือนว่ามีบางสิ่งที่ควรมีผู้ช่วยอยู่ที่ไหนสักแห่ง แต่ฉันหามันไม่เจอ ฉันกำลังมองหาโซลูชันที่ไม่ จำกัด เฉพาะโหนด


ไม่แน่ใจว่านี่เป็นคำถาม Drupal จริงๆ มันเป็นจาวาสคริปต์หนึ่งและควรถูกถามใน Stack Overflow
Camsoft

3
ฉันกำลังมองหาวิธีแก้ปัญหา Drupal ฉันสามารถเขียน Javascript ได้ แต่รู้สึกว่าควรเสียบเข้ากับ Form API อย่างใด
Fuzzy76

มันเท่ห์มาก ฉันไม่คิดว่าชัดเจนในคำถามเดิม ฉันไม่ทราบว่าโมดูลใดที่สามารถทำได้
Camsoft

คำตอบ:


18

ความมหัศจรรย์ที่ใช้#ahah / #ajaxทรัพย์สินที่มีองค์ประกอบของรูปแบบวิธีการที่คุณสามารถกำหนดสิ่งที่ควรจะเรียกการปรับเปลี่ยนและสิ่งที่ควรได้รับการแก้ไขเป็นผลบวกบูรณาการร่วมกับ jQuery

นี่คือส่วนสำคัญจากตัวอย่างด้านล่าง:

'#ajax' => array(
    'event' => 'change',
    'callback' => 'myajax_ajax_callback',
    'wrapper' => 'dropdown_second_replace',
),

นี่คือตัวอย่างที่แสดงหน้าแบบฟอร์มที่มีสองดรอปดาวน์: รายการของตัวเลือกในดรอปดาวน์ที่สองขึ้นอยู่กับการเลือกในดรอปดาวน์แรก

<?php

/**
 * Implementation of hook_menu().
 * Registers a form-based page that you can access at "http://localhost/myajax"
 */
function myajax_menu(){
    return array(
        'myajax' => array(
            'title' => 'A page to test ajax',
            'page callback' => 'drupal_get_form',
            'page arguments' => array('myajax_page'),
            'access arguments' => array('access content'), 
        )
    );
}



/**
 * A form with a dropdown whose options are dependent on a
 * choice made in a previous dropdown.
 *
 * On changing the first dropdown, the options in the second are updated.
 */
function myajax_page($form, &$form_state) {
    // Get the list of options to populate the first dropdown.
    $options_first = myajax_first_dropdown_options();

    // If we have a value for the first dropdown from $form_state['values'] we use
    // this both as the default value for the first dropdown and also as a
    // parameter to pass to the function that retrieves the options for the
    // second dropdown.
    $value_dropdown_first = isset($form_state['values']['dropdown_first']) ? $form_state['values']['dropdown_first'] : key($options_first);

    $form['dropdown_first'] = array(
        '#type' => 'select',
        '#title' => 'First Dropdown',
        '#options' => $options_first,
        '#default_value' => $value_dropdown_first,

        // Bind an ajax callback to the change event (which is the default for the
        // select form type) of the first dropdown. It will replace the second
        // dropdown when rebuilt
        '#ajax' => array(
            // When 'event' occurs, Drupal will perform an ajax request in the
            // background. Usually the default value is sufficient (eg. change for
            // select elements), but valid values include any jQuery event,
            // most notably 'mousedown', 'blur', and 'submit'.
            'event' => 'change',
            'callback' => 'myajax_ajax_callback',
            'wrapper' => 'dropdown_second_replace',
        ),
    );
    $form['dropdown_second'] = array(
        '#type' => 'select',
        '#title' => 'Second Dropdown',
        // The entire enclosing div created here gets replaced when dropdown_first
        // is changed.
        '#prefix' => '<div id="dropdown_second_replace">',
        '#suffix' => '</div>',
        // when the form is rebuilt during ajax processing, the $value_dropdown_first variable
        // will now have the new value and so the options will change
        '#options' => myajax_second_dropdown_options($value_dropdown_first),
        '#default_value' => isset($form_state['values']['dropdown_second']) ? $form_state['values']['dropdown_second'] : '',
    );
    return $form;
}

/**
 * Selects just the second dropdown to be returned for re-rendering
 *
 * Since the controlling logic for populating the form is in the form builder
 * function, all we do here is select the element and return it to be updated.
 *
 * @return renderable array (the second dropdown)
 */
function myajax_ajax_callback($form, $form_state) {
    return $form['dropdown_second'];
}


/**
 * Helper function to populate the first dropdown. This would normally be
 * pulling data from the database.
 *
 * @return array of options
 */
function myajax_first_dropdown_options() {
    return array(
        'colors' => 'Names of colors',
        'cities' => 'Names of cities',
        'animals' => 'Names of animals',
    );
}


/**
 * Helper function to populate the second dropdown. This would normally be
 * pulling data from the database.
 *
 * @param key. This will determine which set of options is returned.
 *
 * @return array of options
 */
function myajax_second_dropdown_options($key = '') {
    $options = array(
        'colors' => array(
            'red' => 'Red',
            'green' => 'Green',
            'blue' => 'Blue'
        ),
        'cities' => array(
            'paris' => 'Paris, France',
            'tokyo' => 'Tokyo, Japan',
            'newyork' => 'New York, US'
        ),
        'animals' => array(
            'dog' => 'Dog',
            'cat' => 'Cat',
            'bird' => 'Bird'
        ),  
    );
    if (isset($options[$key])) {
        return $options[$key];
    }
    else {
        return array();
    }
}

นี่เป็นวิธีที่เหมาะสมในการเปลี่ยนแบบฟอร์มขึ้นอยู่กับค่าของหนึ่งในเขตข้อมูล แต่หากต้องการซ่อน / แสดงหรือเปิดใช้งาน / ปิดใช้งานคุณสมบัติ #states ในองค์ประกอบของฟอร์มจะง่ายขึ้น
Pierre Buyle

6

ไม่ไม่ทุ่งเงื่อนไขโมดูลทำแค่นั้น?

เมื่อแก้ไขโหนดฟิลด์ควบคุมจะแสดงแบบไดนามิกและซ่อนด้วย JavaScript


สำหรับฟอร์มโหนดและฟิลด์ CCK ใช่ แต่ฉันต้องการสิ่งที่สามารถใช้ในสถานการณ์อื่น ๆ ฉันจะอธิบายคำถามของฉัน
Fuzzy76

3

มีสองระบบที่แตกต่างกันซึ่งคุณสามารถใช้:

  • # ahah / # ajax ช่วยให้คุณสามารถส่งแบบฟอร์มด้วย AJAX และสร้างใหม่ในฝั่งเซิร์ฟเวอร์ มีประโยชน์เมื่อคุณต้องการเพิ่มองค์ประกอบของฟอร์มใหม่ตัวอย่างทั่วไปใน D6 คือ upload.module อธิบายไว้ข้างต้นแล้ว
  • สิ่งใหม่ใน Drupal 7 คือระบบ #states ที่ให้คุณทำสิ่งต่าง ๆ เช่นการแสดง / ซ่อน / เปิด / ปิดการใช้งานองค์ประกอบแบบฟอร์มตามองค์ประกอบอื่น ๆ ดูhttp://www.randyfay.com/node/58สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งนั้น

1

วิธีที่ง่ายที่สุดคือการเขียน JavaScript ของคุณเองและใช้ jQuery เพื่อแนบตัวจัดการเหตุการณ์เข้ากับเหตุการณ์เบลอและโฟกัส จากนั้นเมื่อการเรียกกลับของคุณถูกปิดใช้งาน / เปิดใช้งานฟิลด์ตามตรรกะของคุณ


และถ้าเขาไม่สามารถเขียน jQuery ของเขาเอง? โมดูล Drupal จะไม่ง่ายกว่าการเข้ารหัสหรือไม่ - เนื่องจากการชี้แจงคำถามฉันจึงถอนความคิดเห็นของฉัน
ถอดรหัส

ประการแรกฉันไม่ทราบว่าโมดูล Conditional Field เป็นของฉันเองประการที่สองโมดูลที่มีค่าใช้จ่ายจะเพิ่มโครงการของเขาผ่าน JS ฝั่งไคลเอ็นต์ง่ายๆ
Camsoft
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.