JQuery как скрыть форму на отправке и показать ссылку, чтобы показать форму снова

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 Два <div class="search"> т.е., который будет показан и Div один <div class="search_tag> то есть, чтобы скрыть. Когда я нажму кнопку «Отправить», страница обновится, и я хочу, чтобы форма спрятала i.e <div class="search"> и <div class="search_tag">. Когда я нажимаю на Div one i.e <div class="search_tag"> Мне нужна форма Div two i.e <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

Try

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 Demo 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();   

    }) 



} 

Пожалуйста, попробуйте и дайте мне знать, если вы сталкиваетесь любые проблемы ...