Question

我在提交的同一页面中有多个表单，我希望在表单提交后隐藏表单并显示相应表单的链接下面是html我对所有表单都有相同的类名还有提交课程。

<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post"> 
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
 </form>
</div>

<div id="wpcf7-f63-p1-o2">

 <form name="" class="" action="" method = "post"> 
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
 <input type="submit" value="Send" class="but" />
 </form>
</div>

我尝试了下面的代码

<script> 
jQuery(".wpcf7-form").submit(function() 
{ 
jQuery("^wpcf7-f63-p1-").hide(); 
});
</script>';

Answer 1

在您输入的示例中：
jQuery("^wpcf7-f63-p1-").hide();
我认为应该是：
jQuery("#wpcf7-f63-p1-o1").hide();

Answer 2

在表单提交

上使用此功能

 $('input[type="submit"]').click(function() {
      $form = $(this).parent();
      $('<p><a href="#">link to form</a></p>').insertBefore($form);
      $form.hide();
    });

Answer 3

您在寻找jquery .find()吗？

你可以这样做：

  $('form').submit(function(){

    $(this).find('.myForm').hide();
    $(this).find('.link').show();
  }

.link {
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post"> 
  <div class="myForm">
    <input type="text" name="your-name" value="" size="40" />
    <input type="text" name="email" value="" size="40" />
    <input type="submit" value="Send" class="but" />
  </div>
  <a class="link" href="#">Link</a>
</form>

Answer 4

你的jquery选择器上的错误啊，将你的js改为：

jQuery(".wpcf7-form").submit(function() 
{ 
jQuery("[id^='wpcf7-f63-p1-']").hide() 
return false;
});

工作jsfiddle代码

NB。 您可能需要删除return false，我添加它以查看提交后元素消失。

提交表单上的jquery搜索其对应的div和隐藏表单

4 个答案: