Форум Сайтостроение Веб-строительство

Очистка форрмы js

12
O
На сайте с 23.09.2014
Offline
76
Osavul
887

Как сделать кнопку по очистке формы от предустановленных уже значений (без отправки на сервер) средствами JS или jquery?



<form id="searchform" method="post">
       <input type="text" name="search_name" maxlength="27" value="Имя">
       <input type="text" name="search_mail" maxlength="35" value="Почтовый адрес">
       <input type="checkbox" name="search_banned" value="1" {ifch}>
        <select name="">
		<option value="">----</option>
		<option value="asc">{us_grow}</option>
		<option value="desc">{us_desc}</option>
	</select>
       <input type="submit" name="us_show" value="Показать">
       <input type="button"  value="Сбросить">
</form>

дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#1

http://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery

http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
anser06
На сайте с 11.03.2006
Offline
276
anser06
#2

обычная кнопка reset.

<INPUT TYPE="RESET" VALUE ="Очистить">

O
На сайте с 23.09.2014
Offline
76
Osavul
#3
дани мапов:
http://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery
http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery

Js не селен. Как это можно реализовать если у меня JS-скрипты вынесены в отдельный файл. А html - отделен от скриптов?

---------- Добавлено 03.05.2015 в 10:32 ----------

anser06:
обычная кнопка reset.
<INPUT TYPE="RESET" VALUE ="Очистить">

Такой вариант не подойдет, поскольку предустановленные значения VALUE не будут очищаться из полей.

дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#4
Osavul:
Js не селен. Как это можно реализовать если у меня JS-скрипты вынесены в отдельный файл. А html - отделен от скриптов?

Без разницы, в отдельном или еще там где-то. Берите примеры по ссылкам и пробуйте, чтобы готовый пример скопировать, не надо особого умения.

O
На сайте с 23.09.2014
Offline
76
Osavul
#5
дани мапов:
Без разницы, в отдельном или еще там где-то. Берите примеры по ссылкам и пробуйте, чтобы готовый пример скопировать, не надо особого умения.

Ну вот пример по ссылке: 



$('.reset').on('click', function() {

    $(this).closest('form').find('input[type=text], textarea').val('');

});

Этот скрипт я добавляю себе в отдельный файл со JS.

А класс .reset я применяю к кнопке сброса формы в html. Верно?

дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#6 


$("input[type=button]").click(function() {
    $(this).closest('form').find(':input','option:selected')
     .not(':button, :submit, :reset, :hidden')
     .val('')
     .removeAttr('checked')
     .removeAttr('selected');    
});
O
На сайте с 23.09.2014
Offline
76
Osavul
#7
дани мапов:

$("input[type=button]").click(function() {
    $(this).closest('form').find(':input','option:selected')
     .not(':button, :submit, :reset, :hidden')
     .val('')
     .removeAttr('checked')
     .removeAttr('selected');    
});

Почему то не работает этот скрипт :(


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Стартовая страница</title>
<script>
$("input[type=button]").click(function() {
    $(this).closest('form').find(':input','option:selected')
     .not(':button, :submit, :reset, :hidden')
     .val('')
     .removeAttr('checked')
     .removeAttr('selected');    
});
</script>
</head>

<body>
<form action="" id="myform" method="post">
First Name: <input type="text" name="txtFirstName" id="txtFirstName" value="Vasy" /><br />
Last Name:  <input type="text" name="txtLastName" id="txtLastName"  value="Petrov" /><br />
<br />
<input type="button" value="Очистить">
</form>
</body>
</html>
дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#8

jquery надо подключить http://web-answers.ru/questions-and-answers/javascript/jquery/kak-podklyuchit-jquery/

O
На сайте с 23.09.2014
Offline
76
Osavul
#9
дани мапов:
jquery надо подключить http://web-answers.ru/questions-and-answers/javascript/jquery/kak-podklyuchit-jquery/

Подключил:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Но ситуация прежняя - скрипт не работает

дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#10

Код js надо вниз, после формы. Или используйте

$( document ).ready(function() {

// код здесь

});

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий