PHP + HTML不帶SQL的下拉框

Question

我們的目標是在當前只有文本字段的wordpress聯繫人部分模板中添加一個下拉框。我們希望找到實現這一目標的最簡單方法 - 不涉及任何SQL（將靜態值保存在php中）。

我相信表單使用AJAX發送完成的表單。

您可以在這裏看到的形式（頁面底部）：http://demo.rocknrolladesigns.com/wp/jarvis/callouts/

從我們所看到的，形式目前由兩個部分組成 - 在的functions.php：

wp_localize_script('rnrscripts', 'rnr_global_vars', array( 
     'contact_form_required_fields_label_ajax' => __('This is a required field', 'rocknrolla'), 
     'contact_form_warning' => __('Please verify fields and try again.', 'rocknrolla'), 
     'contact_form_email_warning' => __('Please enter a valid e-mail address and try again.', 'rocknrolla'), 
     'contact_form_error' => __('There was an error sending your email. Please try again later.', 'rocknrolla'), 
     'contact_form_success_message' => __('Thanks, we got your mail and will get back to you soon!', 'rocknrolla'), 
     'contactFormDefaults_name' => __('Name', 'rocknrolla'), 
     'contactFormDefaults_email' => __('E-mail', 'rocknrolla'), 
     'contactFormDefaults_subject' => __('Subject', 'rocknrolla'), 
     'contactFormDefaults_message' => __('Message', 'rocknrolla'), 
     'commentFormDefaults_author' => __('Name', 'rocknrolla'), 
     'commentFormDefaults_email' => __('E-mail', 'rocknrolla'), 
     'commentFormDefaults_url' => __('http://', 'rocknrolla'), 
     'searchFormDefaults_search' => __('Search', 'rocknrolla') 
    ));     

    } 

和接觸section.php（用於接觸形式WordPress的頁面模板）

<!-- START CONTACT FORM --> 
         <div id="contact-form">  



       <form action="<?php the_permalink(); ?>" method="post" class="contactForm form" id="contact-form">  


           <div id="contact-input"> 
           <input type="text" name="contactName" class="required" id="contactName" value="<?php _e('Name', 'rocknrolla'); ?>" /> 
           <input type="text" name="contactEmail" class="required" id="contactEmail" value="<?php _e('E-mail', 'rocknrolla'); ?>" /> 
           <input type="text" name="contactSubject" class="required" id="contactSubject" value="<?php _e('Subject', 'rocknrolla'); ?>" /> 
           </div> 


           <div id="contact-textarea"> 
           <textarea class="required" name="contactMessage" id="contactMessage" rows="" cols=""><?php _e('Message', 'rocknrolla'); ?></textarea> 
           <textarea class="required" name="contactMessage" id="contactMessage" rows="" cols=""><?php _e('Message', 'rocknrolla'); ?></textarea> 
           <div> 

           <div id="contact-submit"> 
           <input type="hidden" name="submitted" id="submitted" value="true" /> 
           <input type="submit" value="<?php _e('Send', 'rocknrolla'); ?>" class="comment-submit button submit" id="submitform" /> 

           <span id="msg"></span> 


           </div> 
          </form> 
          <div class="clear"></div> 
         </div> 
         <!-- END CONTACT FORM --> 

任何幫助將不勝感激！ 謝謝。

Answer 1

你可以用jQuery來做到這一點。這會更容易。如果你想添加一個新的領域，如果你將能夠改變後端這是代碼：

$('form#contact-form').append('<select name="somename"><option>First Value</option><option>Second Value</option></select>'); 

如果你將不會改變後端和替換文字區域之一，這是代碼（假設主題字段）：

$('#contactSubject').remove(); 
$('form#contact-form').append('<select name="contact-subject" id="contactSubject"><option>First Value</option><option>Second Value</option></select>'); 

另外，如果你想保留的所有字段，但添加一個新的，而不改變後端，我會建議你來處理表單提交和新的選擇框值添加到年底任何你想要的領域。對於這一個，您可以使用此代碼：

$(document).on('submit', 'form#contact-form', function(){ 
       //I'm assuming you would like to add the new select box value to contact message field. 
       contactMessage = $('#contactMessage'); 
       currentValueForMessage = contactMessage.val(); 
       //Add new value 
       newValue = currentValueForMessage+$('#newAddedSelectBoxID').val(); 
       contactMessage.val(newValue); 

       //Now get all the form values and do the rest 
       //Do the post request to $('form#contact-form').prop('action'); 
      });