2015-03-31 3 views
0

Я хочу, чтобы моя форма появляться, когда я нажимаю на кнопку регистрацииКак показать форму при нажатии кнопки с помощью jquery?

<div id="signup"> 
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="form1"> 
     <input name="user" type="text" placeholder="Username" size="30" > 
     <input name="pass" type="password" placeholder="Password" size="30" > 
     <input class="btn" type="submit" value="sign up" name="signup"> 
</div> 

это код JQuery:

<script> 
$("#form").click(function() { 
    $("#signup").show("Clip", 1000); 
}); 
</script> 
+2

Правильный отступ кода подчеркивает, что вы не закрыли тег формы (для начала). Во-вторых, вы должны привязать событие click к кнопке '$ ('input [name =" signup "]')' или указать кнопке уникальный идентификатор для привязки. Я не видел, чтобы кто-либо привязывал клик к элементу формы, прежде чем ... кажется неправильным. В-третьих, похоже, что кнопка, которую вы нажимаете, чтобы показать форму, находится в div, который вы показываете, когда вы нажимаете кнопку (курица и яйцо?). Как я ее вижу, вы хотите [что-то вроде этого] (http: // jsfiddle .net/gb035b9c /) –

ответ

1

первую очередь вы не закрыли вашу форму тег, второй ваш таргетинг на элемент с формой «id», и любой из элементов, которые у вас есть, имеет такой идентификатор, теперь одна вещь, которую вы можете сделать, - дать каждому элементу ввода в вашей форме класс (например, signup_txt) и нацелить эти элементы с помощью css и установить свойство «показывать» никому, чтобы скрыть их следующим образом:

.signup_txt{ 
    display:none 
} 

затем дайте кнопку отправки идентификатор (signup_btn, например), и сделать это:

$("#signup_btn").click(function(){ 
    $(".signup_txt").show(); 
}); 

и что должен сделать работу вот демо в jsfiddle: http://jsfiddle.net/zdksn35f/

2

Вы могли бы хотеть попробовать что-то вроде этого ... (уведомление я добавил дополнительный «кнопку», чтобы ваш HTML и закрыт «форме» тег

CSS ...

#form1 { 
display : none; 
} 
button { 
margin-bottom: 10px; 
} 

HTML ...

<div id="signup"> 
<button id="signup">Click here to sign-up!</button> 
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="form1"> 
     <input name="user" type="text" placeholder="Username" size="30" > 
     <input name="pass" type="password" placeholder="Password" size="30" > 
     <input class="btn" type="submit" value="sign up" name="signup"> 
    </form> 
</div> 

затем с помощью JQuery ...

$(document).ready(function() { 
    $("#signup").click(function() { 
    $("#form1").toggle('slow'); 
    }); 
}); 

JSFiddle

Надеется, что это помогает. Удачи!

Смежные вопросы