Question

我在list元素中有一个表单。默认情况下，包含在列表项中的表单将被隐藏，并通过单击调用slideToggle的按钮使其显示为列表提供内联类“display：list-item”。当用户单击表单的提交按钮时，它会产生关闭li容器的不良影响，因为它剥离了slideToggle函数创建的内联样式。我需要使表单元素变形以保持可见，即显示：list-item。

html结构如下

<ul class="contact">
   <li>class="gravity-form">
   <div>
      <form>
        <div></div>
        <div></div>
        <div></div>
        <div class="gform_footer left_label">
        <input type="submit" id="gform_submit_button_1" class="button gform_button"
        value="Submit" tabindex="5">
        </div>           
      </form>
   </div>
   </li>
</ul>

到目前为止，我的无用工作是尝试重新设置内联类显示：list-item with：

$('#gform_submit_button_1').bind('click', function(event) {
$(this).prevUntil('ul.contact').children()
    .find('li.gravity-form').css('display' , 'list-item');    
  });

我不确定这是否是正确的方向，以及我的选择器是否正确。我确实尝试过一个事件preventDefault，但这显然会阻止表单提交。有任何想法吗？非常感谢。

Answer 1

尝试event.preventDefault()后跟AJAX帖子提交表单。

$('#gform_submit_button_1').bind('click', function(event) {
  data = {
    formData: $('form input').val()
  }
  $(this).preventDefault()
  $.post('somepage.php', function(data) {
    $('.result').html(data);
  });
});

Answer 2

目前尚不清楚您首先点击了哪个按钮才能使表单可见。我假设它是某个地方以外的按钮。

<input type="button" id="showform" />
<ul class="contact">
   <li id="gravity-form">
   <div>
      <form>
        <div></div>
        <div></div>
        <div></div>
        <div class="gform_footer left_label">
        <input type="submit" id="gform_submit_button_1" class="button gform_button"
         value="Submit" tabindex="5">
        </div>           
      </form>
   </div>
   </li>
</ul>

我会把我的代码写成：

$('#showform').click(function(){
    $('#gravity-form').slideToggle();
});

$('#gform_submit_button_1').click(function(){
    // do something like $.ajax(url, params, method, callback );
});

我希望这能解决你的问题。

从关闭幻灯片切换列表元素中阻止表单提交按钮

2 个答案: