एक रूप में सशर्त क्षेत्रों के लिए सबसे आसान तरीका


20

किसी अन्य फ़ील्ड के मान के आधार पर फ़ॉर्म फ़ील्ड को सक्षम / अक्षम करने के लिए कुछ जावास्क्रिप्ट जादू प्राप्त करने का सबसे आसान तरीका क्या है? यह कुछ ऐसा लगता है जैसे कहीं के लिए एक सहायक होना चाहिए, लेकिन मुझे यह नहीं मिल रहा है। मैं एक ऐसे समाधान की तलाश में हूं जो नोड्स तक सीमित न हो।


यकीन नहीं होता कि यह वाकई एक ड्रुपल सवाल है। यह एक जावास्क्रिप्ट है और इसे स्टैक ओवरफ्लो पर पूछा जाना चाहिए।
कैमसॉफ्ट

3
मैं एक ड्रुपल समाधान की तलाश में था। मैं इसके लिए जावास्क्रिप्ट लिखने में सक्षम हूं, लेकिन यह वास्तव में ऐसा महसूस करता है कि इसे किसी तरह फॉर्म एपीआई में प्लग किया जाना चाहिए।
फजी 7676

यह अच्छा है। मुझे नहीं लगता कि मूल प्रश्न में यह स्पष्ट था। मैं ऐसा करने वाले किसी भी मॉड्यूल के बारे में नहीं जानता।
कैंपसॉफ्ट

जवाबों:


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

किसी एक फ़ील्ड के मूल्य के आधार पर फ़ॉर्म को बदलने का यह सही तरीका है। लेकिन फ़ील्ड को छिपाने / दिखाने या सक्षम / अक्षम करने के लिए, फॉर्म तत्व पर संपत्ति का उपयोग करना आसान है।
पियरे बाइल

6

सशर्त फ़ील्ड्स मॉड्यूल केवल ऐसा नहीं करता है?

नोड को संपादित करते समय, नियंत्रित फ़ील्ड गतिशील रूप से दिखाए जाते हैं और जावास्क्रिप्ट के साथ छिपे होते हैं।


नोड रूपों और CCK फ़ील्ड्स के लिए, हाँ। लेकिन मैं कुछ ऐसा चाहता था जो अन्य परिस्थितियों में इस्तेमाल किया जा सके। मैं अपना प्रश्न स्पष्ट करूँगा।
फजी Mar६

3

दो अलग-अलग प्रणालियाँ हैं जिनका आप उपयोग कर सकते हैं:

  • # अहा / # अजाक्स आपको AJAX के साथ फॉर्म जमा करने और सर्वर साइड पर इसे फिर से बनाने की अनुमति देता है। उपयोगी जब आप वास्तव में नए फॉर्म एलिमेंट्स जोड़ना चाहते हैं, तो D6 में विशिष्ट उदाहरण upload.module है। पहले से ही ऊपर बताया गया है।
  • Drupal 7 में नया #states सिस्टम है जो आपको अन्य तत्वों के आधार पर फ़ॉर्म तत्वों को दिखाने / छिपाने / सक्षम / अक्षम करने जैसे सामान करने की अनुमति देता है। उस के बारे में अधिक जानकारी के लिए http://www.randyfay.com/node/58 देखें ।

1

सबसे आसान तरीका यह होगा कि आप अपने स्वयं के जावास्क्रिप्ट को लिखें और ईवेंट हैंडलर को धब्बा और फ़ोकस घटनाओं से जोड़ने के लिए jQuery का उपयोग करें। फिर जब आपकी कॉलबैक निकाल दी जाती है, तो अपने तर्क के आधार पर फ़ील्ड को अक्षम / सक्षम करें।


और अगर वह अपने jQuery लिखने में सक्षम नहीं है? क्या ड्रुपल मॉड्यूल कोडिंग की तुलना में आसान नहीं होगा? - सवाल के स्पष्टीकरण के कारण, मैं अपनी टिप्पणी को वापस लेता हूं।
Decipher

सबसे पहले मुझे खुद कंडीशनल फील्ड्स मॉड्यूल के बारे में पता नहीं था, दूसरी बात यह है कि इस तरह का एक मॉड्यूल कुछ साधारण क्लाइंट-साइड JS के प्रोजेक्ट पर कितना ऐड करेगा?
कैंपसॉफ्ट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.