2010-06-07 7 views
0

Y at-il un moyen de cacher un formulaire à mes utilisateurs jusqu'à ce qu'ils cliquent sur un lien, puis le formulaire tombe à l'utilisateur à remplir, en utilisant PHP ou JQuery si oui comment? Y at-il un tutoriel qui va m'apprendre comment faire cela?PHP et JQuery Question?

Répondre

3

Oui, vous pouvez le faire, vous cachez la forme initialement soit avec jquery ou css et le slideDown vers le bas comme ceci:

$(function(){ 
    $('a#link_id').click(function(){ 
    $('form-selector').slideDown('slow'); 
    // prevent default action 
    return false; 
    }); 
}); 

et de le cacher en arrière, vous pouvez utiliser la fonction slideUp:

$(function(){ 
    $('a#link_id_2').click(function(){ 
    $('form-selector').slideUp('slow'); 
    // prevent default action 
    return false; 
    }); 
}); 

I f vous voulez afficher et masquer en utilisant un même lien, utilisez le slideToggle à la place:

$(function(){ 
    $('a#link_id').click(function(){ 
    $('form-selector').slideToggle('slow'); 
    // prevent default action 
    return false; 
    }); 
}); 

Voici le prototype de votre code html:

<a id="form_show_hide">Show/Hide Form</a> 

<div id="form_container"> 
    <form> 
    ...form elements... 
    </form> 
</div> 

et jquery pour que:

$(function(){ 
    $('a#form_show_hide').click(function(){ 
    $('#form_container').slideToggle('slow'); 
    // prevent default action 
    return false; 
    }); 
}); 

and finally here the demo for that

0

essayez de régler la propriété d'affichage de la forme en utilisant cache show:

jQuery:

$('#formId').hide(); 
0

Oui, il y a un certain nombre de façons de mettre en œuvre quelque chose comme ça. Ultra mise en œuvre de base:

<form action="" method="post" id="login_form" style="display: none;"> 
    <label for="username">Username</label> <input type="text" name="username" /><br /> 
    <label for="password">Password</label> <input type="password" name="password" /> 
</form> 

<a href="javascript: void(0)" onclick="$('#login_form').slideToggle();">Show Form</a> 

Vous pouvez utiliser un certain nombre de plugins jquery et méthodes pour montrer la forme, y compris show()/hide(), fadeIn()/fadeOut(), slideUp(), slideDown () (comme ci-dessus) etc. Vous pouvez utiliser quelque chose comme FancyBox (ou Facybox) pour afficher le formulaire dans une fenêtre de type 'popup'.

Remarque - Pour des raisons de compatibilité, je suggère de ne pas utiliser jquery dans l'événement onclick.

0

Vous pouvez le faire avec jQuery. Vous avez besoin d'une cible de clic, puis d'un événement lié à la cible de clic et d'un conteneur pour le formulaire. Quelque chose comme:

<span id="ClickTarget">Click Me!</span> 
<div id="FormContainer"> <!-- fill in the form here --> </div> 

<script type=text/javascript language=javascript> 
    $('#ClickTarget').click(function() { 
    $('#FormContainer').show(); 
    }); 
</script>