it-swarm.asia

إنشاء <button type = "Submit"> باستخدام واجهة برمجة التطبيقات للنموذج

لدي نموذج ذو موضوع كثيف للاندماج ، يظهر هيكله أدناه. أنا فقط هناك في معظم الأحيان باستثناء الإرسال.

 <form action="#">
   <fieldset>
     <legend>Authentification</legend>
       <label for="email">Courriel*</label>
       <input type="text" name="email" id="email">
       <label for="password">Mot de passe*</label>
       <input type="password" name="password" id="password" class="last">
       <a href="#" title="Mot de passe oublié?" class="clearfix">Forgot password?</a>
       <button type="submit" class="clearfix"><span>Login</span></button>
   </fieldset>
 </form>

لقد جربت العديد من المجموعات المختلفة ، وتبين أن button_type ليس له أي تأثير على النواة. لذلك استخدمت هذا الاختراق ، على أمل أن تحل مشكلتي. للأسف ، إنه يغير فقط سمة "النوع" (من الواضح) ، وليس العنصر نفسه. يمكن أن يحتوي نوع الزر على عناصر أخرى ، وفي هذه الحالة يكون النطاق مطلوبًا لاحتواء صورة خلفية ، ويجب أن يكون في امتداد ليمتد لأن النص في الزر ديناميكي.

هل لدى أي شخص فكرة عن كيفية إنشاء السطر التالي من الترميز باستخدام واجهة برمجة تطبيقات النموذج؟

<button type="submit" class="clearfix"><span>Login</span></button>
12
stefgosselin

في D7 توصي:

$form['custom-form'] = array(
  '#prefix' => '<button type="submit">',
  '#suffix' => '</button>',
  '#markup' => '<span>' . t('Login') . '</span>',
);

وبهذه الطريقة يمكنك استبدال #markup في وظيفة تغيير لاحقًا إذا لزم الأمر ، دون الحاجة إلى إعادة إنشاء الزر HTML.

12
tim.plunkett

بالإضافة إلى ذلك ، فقط في حال واجه شخص ما نفس المشكلة التي واجهتها - عند استخدام #markup أو #prefix/#suffix خدعة في مجموعة actions للنموذج ، وظيفة رد الاتصال لن يتم استدعاؤها على الإطلاق ، ما لم يكن عنصر submit من النوع موجودًا. كان الحل البديل الخاص بي على النحو التالي:

$form['actions']['submit'] = array
(
    '#type' => 'submit',
    '#value' => '',
    '#attributes' => array( 'style' => array( 'display: none' )), // hide the input field
    '#submit' => array( 'my_callback_for_the_form_submit' ),
    '#prefix' => '<button type="submit" class="btn btn-primary">Add <i class="fa fa-plus-square-o">',
    '#suffix' => '</i></button>',
);

بهذه الطريقة يمكنك استخدام HTML مخصص لإرسال مجموعات العمل.

17
Óscar Gómez Alcañiz

لإضافة بعض العلامات المخصصة ، يمكنك استخدام المقتطفات التالية:

// Drupal 6.
$form = array();

// Other elements.

$form['custom-form'] = array(
    '#value' => '<button type="submit" class="clearfix"><span>Login</span></button>',
);
// Drupal 7.
$form = array();

// Other elements.

$form['custom-form'] = array(
    '#markup' => '<button type="submit" class="clearfix"><span>Login</span></button>',
);
5
Shoaib Nawaz

فقط من أجل الاكتمال سأقوم بنشر حل بديل ينطوي على تجاوز theme_button (مأخوذ من مشاركة المدونة هذه )

قم أولاً بإضافة سمة buttontype إلى عنصر النموذج:

$form['submit'] = array (
    '#type' => 'submit',
    '#buttontype' => 'button',
    '#value' => 'Search',
);

ثم تجاوز زر السمة:

/**
 * Override of theme_button().
 *
 * Render the button element as a button and the submit element as an input element.
 */
function MYTHEME_button($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'submit';

  element_set_attributes($element, array('id', 'name', 'value'));  

  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled'])) {
    $element['#attributes']['class'][] = 'form-button-disabled';
  }

  if (isset($element['#buttontype']) && $element['#buttontype'] == 'button') {
    $value = $element['#value'];
    unset($element['#attributes']['value']);
    return '<button' . drupal_attributes($element['#attributes']) . '>' . $value . '</button>';
  }
  else {
    return '<input' . drupal_attributes($element['#attributes']) . ' />';
  }
}

ويؤدي ذلك إلى حدوث مشكلات إذا كان هناك أكثر من زر واحد في النموذج حيث أن Drupal غير قادر على اكتشاف الزر الذي تم النقر عليه.

يمكن معالجة ذلك بإضافة رد اتصال #after_build إلى النموذج:

$form['#after_build'][] = 'mymodule_force_triggering_element';

ثم في وظيفة ما بعد البناء:

function mymodule_force_triggering_element($form, &$form_state) {
  if (isset($form_state['input']['submit'])) {
    $form_state['triggering_element'] = $form['submit'];
  } elseif (isset($form_state['input']['other_button'])) {
    $form_state['triggering_element'] = $form['other_button'];
  }
  return $form;
}
2
Felix Eve

لقد حاولت إجابة Óscar Gómez Alcañiz لكن استمارتي كانت لا تزال لم يتم التقديم. كحل بديل ، قمت بتغيير حله ، لذا كانت المدخلات تجلس فوق الزر لكنها كانت شفافة:

$form['actions']['submit'] = array (
    '#type' => 'submit',
    '#value' => '',
    '#attributes' => array( 'style' => 'position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: none; opacity: 0; width: 100%;'), // put input field over the top of button and make transparent
    '#prefix' => '<button type="submit" class="btn btn-primary">Add <i class="fa fa-plus-square-o">',
    '#suffix' => '</i></button>',
);

بهذه الطريقة الفعلية input[type="submit] يتم النقر عليه وتشغيل الإجراء ولكن الزر

ربما تكون فكرة جيدة أن تضع كل تلك CSS في ورقة أنماط في الحياة الواقعية ولكن ضع فقط في علامة النمط المضمنة هنا كمثال.

1
Felix Eve

إليك كيفية تحقيق ذلك في Drupal 8. بشكل أساسي أقوم بإنشاء اقتراح سمة جديدة حتى أتمكن من تجاوز الزر باستخدام ملف مخصص twig file.

أضف هذا الكود داخل ملف mythemename.theme:

/**
 * Add twig suggestions for input elements.
 *
 * If a form api element has a data-twig-suggestion attribute, then allow twig
 * theme override, add to suggestions.
 *
 * @param array $suggestions
 *   Current list of twig suggestions.
 * @param array $variables
 *   Every variable of the current element.
 */
function mythemename_theme_suggestions_input_alter(&$suggestions, array $variables) {
  $element = $variables['element'];

  if (isset($element['#attributes']['data-twig-suggestion'])) {
    $suggestions[] = 'input__' . $element['#type'] . '__' . $element['#attributes']['data-twig-suggestion'];
  }
}

في الكود الخاص بك أينما قمت بإنشاء النموذج الخاص بك ، أضف سمة 'data-twig-Suggestion' إلى زر الإرسال الخاص بك:

$form['submit'] = [
      '#type' => 'submit',
      '#value' => t('Submit') . ' >',
      '#attributes' => [
        'data-twig-suggestion' => 'button',
      ],
    ];

الآن إذا كان لديك twig وتحققت من مصدر html لزرك على الموقع ، فسترى اقتراحًا twig اقتراح:

<!-- FILE NAME SUGGESTIONS:
   * input--submit.html.twig
   * input--submit--button.html.twig
   x input.html.twig
-->

يمكنك الآن إنشاء ملف إدخال - إرسال - button.html.twig (أضع هذا في mythemename/templates/form_elements ولكن يمكنك وضعه في مكان آخر إذا أردت):

<button{{ attributes }} type='submit'>
    <span class="great-success">Submit</span>
</button>
0
user33560