我将尽我所能描述我正在尝试做的事情以及我所做的事情,但是,如果您需要更多信息来提供帮助,请告诉我。
我想要做的是创建一个 html 表,它有 5 列和任意数量的行。这是一个非常基本的订单表格,将列出我们出售的文学作品。前 4 列提供有关商品的信息,第 5 列是一个简单的文本输入“数量”字段,允许用户输入他们希望购买的商品的“数量”。你可以在这里看到它的样子:http ://web.go-spi.com/cgl/literature/ 。
需要注意的是,表格是通过我在 Wordpress 中创建的自定义循环动态生成的。我这样做是为了让我们能够从表中动态添加或删除文献项目。
编码:
<div class='gf_browser_chrome gform_wrapper' id='gform_wrapper_6' >
<a id='gf_6' name='gf_6' class='gform_anchor' ></a>
<form method='post' enctype='multipart/form-data' target='gform_ajax_frame_6' id='gform_6' action='/cgl/literature/#gf_6'>
<div class='gform_body'>
<div id='gform_fields_6' class='gform_fields top_label description_below'>
<?php $literature_query = new WP_Query( array( 'post_type' => 'literature', 'showposts' => '50', 'orderby' => 'meta_value', 'meta_key' => 'ecpt_brochurerow', 'order' => 'ASC'));
if( $literature_query->have_posts() ):?>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="data">
<thead>
<tr>
<th>Brochure Type</th>
<th><label class='gfield_label' for='input_6_1'>Description</label></th>
<th>Cost</th>
<th>Qty/Pack</th>
<th><label class='gfield_label' for='input_6_2'>Qty</label></th>
</tr>
</thead>
<tbody>
<?php while( $literature_query->have_posts() ): $literature_query->the_post();?>
<tr>
<td><?php echo get_post_meta($post->ID, 'ecpt_brochuregroup', true); ?></td>
<td><?php echo get_post_meta($post->ID, 'ecpt_brochuredescription', true); ?><input type='hidden' class='gform_hidden' name='input_1' id='input_6_1' value="<?php echo get_post_meta($post->ID, 'ecpt_brochuredescription', true); ?>"/></td>
<td><?php echo get_post_meta($post->ID, 'ecpt_brochurecost', true); ?></td>
<td><?php echo get_post_meta($post->ID, 'ecpt_brochureqtyperpack', true); ?></td>
<td><input name='input_2' id='input_6_2' type='text' value='' class='medium'/></td>
</tr>
<?php endwhile;
wp_reset_postdata();
?>
</tbody>
</table>
<?php else: ?>
<div class="alert alert-block">
<p>Sorry, there is currently no literature available. Please check back later.</p>
</div>
<?php endif; ?>
</div>
</div>
<div class='gform_footer top_label'>
<input type='submit' id='gform_submit_button_6' class='button gform_button' value='Submit' tabindex='1' /><input type='hidden' name='gform_ajax' value='form_id=6&title=&description=' />
<input type='hidden' class='gform_hidden' name='is_submit_6' value='1' />
<input type='hidden' class='gform_hidden' name='gform_submit' value='6' />
<input type='hidden' class='gform_hidden' name='gform_unique_id' value='5077469db6b44' />
<input type='hidden' class='gform_hidden' name='state_6' value='YToyOntpOjA7czo2OiJhOjA6e30iO2k6MTtzOjMyOiJjMDlmZjFlZmU1MjMzN2M3M2FkODliMmVjY2Y5YzIxMyI7fQ==' />
<input type='hidden' class='gform_hidden' name='gform_target_page_number_6' id='gform_target_page_number_6' value='0' />
<input type='hidden' class='gform_hidden' name='gform_source_page_number_6' id='gform_source_page_number_6' value='1' />
<input type='hidden' name='gform_field_values' value='' />
</div>
</form>
</div>
<iframe style='display:none;width:0px; height:0px;' src='about:blank' name='gform_ajax_frame_6' id='gform_ajax_frame_6'></iframe>
<script type='text/javascript'>function gformInitSpinner_6(){jQuery('#gform_6').submit(function(){if(jQuery('#gform_ajax_spinner_6').length == 0){jQuery('#gform_submit_button_6').attr('disabled', true).after('<' + 'img id="gform_ajax_spinner_6" class="gform_ajax_spinner" src="/cgl/wp-content/plugins/gravityforms/images/spinner.gif" alt="" />');jQuery('#gform_wrapper_6 .gform_previous_button').attr('disabled', true); jQuery('#gform_wrapper_6 .gform_next_button, #gform_wrapper_6 .gform_image_button').attr('disabled', true).after('<' + 'img id="gform_ajax_spinner_6" class="gform_ajax_spinner" src="/cgl/wp-content/plugins/gravityforms/images/spinner.gif" alt="" />');}} );}jQuery(document).ready(function($){gformInitSpinner_6();jQuery('#gform_ajax_frame_6').load( function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_6');var is_redirect = contents.indexOf('gformRedirect(){') >= 0;jQuery('#gform_submit_button_6').removeAttr('disabled');var is_form = !(form_content.length <= 0 || is_redirect);if(is_form){jQuery('#gform_wrapper_6').html(form_content.html());jQuery(document).scrollTop(jQuery('#gform_wrapper_6').offset().top);if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_6').val();gformInitSpinner_6();jQuery(document).trigger('gform_page_loaded', [6, current_page]);}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('#gforms_confirmation_message').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_6').replaceWith('<' + 'div id=\'gforms_confirmation_message\' class=\'gform_confirmation_message_6\'' + '>' + confirmation_content + '<' + '/div' + '>');jQuery(document).scrollTop(jQuery('#gforms_confirmation_message').offset().top);jQuery(document).trigger('gform_confirmation_loaded', [6]);}, 50);}else{jQuery('#gform_6').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [6, current_page]);} );} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [6, 1]) } ); </script>
问题:
1) 我不确定如何动态设置输入名称和 id,以便它们在您进入表单时是连续的。目前,随着代码的设置,无论填写多少个输入,我都只会收到第一个输入的提交值。
感谢您提供的任何帮助。谢谢!