Question

我是jQuery的新手，这是我想问的问题。以下是HTML代码

<div>
  <!-- Div One -->
  <div class="search_tag">
    <span>Show search From</span>
  </div>

  <!-- Div Two -->
  <div class="search">
    <form>
      ......
      <input class="submit" type="submit" value="submit" />
    </form>
  </div>
</div>

现在，当页面加载时，我想要显示Div 2，即<div class="search">，并且要隐藏Div <div class="search_tag>。当我点击表单提交时，页面将刷新，我希望表单隐藏，即显示<div class="search">和<div class="search_tag">。当我点击Div之一，<div class="search_tag">我希望Div 2即<div class="search">形式出现，我会再提交一份表格。我需要用jQuery做到这一点。

重要提示：我不需要表单按钮事件，我需要表单提交事件，页面将刷新。

Answer 1

<span id="toggleSearch"></span>
<input id="submit" class="submit" type="button" value="submit" />

$('#toggleSearch').onclick(function() {
  $('.search').toggle();
  $('.search_tag').toggle();
});


$('#submit').onclick(function() {
  $('.search').toggle();
  $('.search_tag').toggle();
});

Answer 2

好的，这接近你想要的，我认为这会有所帮助。（你想要的东西很容易从中得到它。）

<div id="search_tag">
    Show search form
</div>

<div id="search">
    <form id="myform">
        <input type="text"/>
        <input type="button" value="submit"/>
    </form>
</div>

<!-- jQuery -->

var form_submitted = false;
refresh();

$('#myform').click(function() {
    form_submitted = true;
    refresh();
});

$('#search_tag').click(function() {
    form_submitted = false;
    refresh();
});

function refresh() {
    $('#search').toggle(!form_submitted);
    $('#search_tag').toggle(form_submitted);
}

工作示例：http://jsfiddle.net/FZfxN/

Answer 3

尝试

jQuery(function($){
    $('.search form input[value="submit"]').click(function(){
        $(this).closest('.search').hide();
    })

    $('.search_tag').click(function(){
        $('.search').toggle()
    });
})

演示：Fiddle

Answer 4

试试这个：

$(document).ready(function(){
$('.search_tag').hide();
$('.search_tag').click(function(){ $(this).toggle(); $('.search').toggle();});
$('.search').click(function(){ $(this).toggle(); $('.search_tag').toggle(); });
});

这是我的demo

每次单击提交按钮时，您也可以执行一些AJAX来发送表单数据，而无需通过添加以下代码进行刷新：

 $('#demoform').submit(function(e){
    e.preventDefault(); // Prevent from following the link
    $.post('mytest.php'); // and just post here if you are using php
});

Ajax演示here

Answer 5

你可以试试这个

 // please set ID attribute for all control

**HTML**
<div>
   <!-- Div One -->
   <div class="search_tag" id="search">
   <span id="show">Show search From</span>
   </div>

   <!-- Div Two -->
   <div class="search" id="submitButton">
     <form>
     ......
     <input class="submit" type="button" value="submit" id="submit" />
   </form>
  </div>
</div>


function pageLoad()
{
  $('#search').hide();


  $('#submit').click(function(){

    $('#submitButton').hide();
    $('#search').show();

  })

  $('#show').click(function(){

    $('#submitButton').show();        

  })



}

请尝试一下，如果您遇到任何问题，请告诉我......

Jquery如何在提交时隐藏表单并显示一个链接以再次显示表单

5 个答案: