Задать значение не из списка SELECT
Всем привет,
хочу создать в форме список, в котором есть некоторые известные опции, и если нет в списке известных опций, то пользователь при отправке формы модифицирует значение переменной.
Например, переменная формы category имеет два predefined значения - MP3 player и book. Как сделать так, чтобы при выборе "other" из списка разрешалось ввести какую-то другугю категорию и чтобы через форму отправилось пара category = some_value?
Пробую через javascript, вроде туда копаю, но не могу найти функцию, которая разрешила бы вводить пользователю данные.
хочу создать в форме список, в котором есть некоторые известные опции, и если нет в списке известных опций, то пользователь при отправке формы модифицирует значение переменной.
Например, переменная формы category имеет два predefined значения - MP3 player и book. Как сделать так, чтобы при выборе "other" из списка разрешалось ввести какую-то другугю категорию и чтобы через форму отправилось пара category = some_value?
Пробую через javascript, вроде туда копаю, но не могу найти функцию, которая разрешила бы вводить пользователю данные.
Код:
<script type='text/javascript'>
function DefineCategory()
{
document.getElementById('other').innerHTML=textContents;
}
</script>
<form method=POST action=addtodb.php>
<table align=center border=1 color='black'>
<tr>
<td>Name:</td>
<td><input type=text name='name' value=name></td>
</tr>
<tr>
<td>Category:</td>
<td>
<select name='category'>
<option>MP3 player</option>
<option>book</option>
<option id='other' onclick='DefineCategory()'>Other</option>
</select>
</td>
</tr>
<tr>
<td>Price:</td>
<td><input type=text name='price' value='0 USD'></td>
</tr>
<tr>
<td>Availability:</td>
<td>
<select name='available'>
<option>True</option>
<option>False</option>
</select>
</td>
</tr>
<tr>
<td>Quantity:</td>
<td><input type=text name='quantity' value=0></td>
</tr>
<tr>
<td COLSPAN=2 align=center><input type=submit value='OK'></td>
</tr>
</table>
</form>
function DefineCategory()
{
document.getElementById('other').innerHTML=textContents;
}
</script>
<form method=POST action=addtodb.php>
<table align=center border=1 color='black'>
<tr>
<td>Name:</td>
<td><input type=text name='name' value=name></td>
</tr>
<tr>
<td>Category:</td>
<td>
<select name='category'>
<option>MP3 player</option>
<option>book</option>
<option id='other' onclick='DefineCategory()'>Other</option>
</select>
</td>
</tr>
<tr>
<td>Price:</td>
<td><input type=text name='price' value='0 USD'></td>
</tr>
<tr>
<td>Availability:</td>
<td>
<select name='available'>
<option>True</option>
<option>False</option>
</select>
</td>
</tr>
<tr>
<td>Quantity:</td>
<td><input type=text name='quantity' value=0></td>
</tr>
<tr>
<td COLSPAN=2 align=center><input type=submit value='OK'></td>
</tr>
</table>
</form>
юзай JQuery
с ней бы это выглядело так
html
css
js
а на сервере что-то типа
с ней бы это выглядело так
html
Код:
<select name="category" class="category">
<option>MP3 player</option>
<option>book</option>
<option>Other</option>
</select>
<input type="text" name="category-other" value="" class="category-other" />
<option>MP3 player</option>
<option>book</option>
<option>Other</option>
</select>
<input type="text" name="category-other" value="" class="category-other" />
css
Код:
.category-other {
display: none;
}
display: none;
}
js
Код:
$('.category').change(function(){
if ($(this).val() == 'Other') {
$('.category-other').show();
} else {
$('.category-other').hide();
}
});
if ($(this).val() == 'Other') {
$('.category-other').show();
} else {
$('.category-other').hide();
}
});
а на сервере что-то типа
Код:
if ($_POST['category'] == 'Other') {
// создаем новыю категорию если это необходимо
$_POST['category'] = $_POST['category-other'];
}
// создаем новыю категорию если это необходимо
$_POST['category'] = $_POST['category-other'];
}
разве не должно быть onclick=some_function() для вызова функции:
? Я так понимаю, при нажатии на опцию other должно отрисовываться input поле, куда пишешь любую строку. Может, где-то уже встречалось что-то похожее или есть туториал понятный и конкретный? А то по правде сказать, не знаю как правильно в Google задать вопрос.
Код:
$('.category').change(function(){
if ($(this).val() == 'Other') {
$('.category-other').show();
} else {
$('.category-other').hide();
}
});
if ($(this).val() == 'Other') {
$('.category-other').show();
} else {
$('.category-other').hide();
}
});
? Я так понимаю, при нажатии на опцию other должно отрисовываться input поле, куда пишешь любую строку. Может, где-то уже встречалось что-то похожее или есть туториал понятный и конкретный? А то по правде сказать, не знаю как правильно в Google задать вопрос.
Цитата: t3rmin41
разве не должно быть onclick=some_function() для вызова функции:
onclick не подходит. мы имеем дело с формой поэтому правильней вешать обработчик на изменение элемента формы, а не на щелчек мыши на нем
конечно можно и так, но это неправильно
Цитата: t3rmin41
Может, где-то уже встречалось что-то похожее или есть туториал понятный и конкретный? А то по правде сказать, не знаю как правильно в Google задать вопрос.
туториал вот
а вот экзампл
как писать подобный код без использования jQuery я честно уже не помню и не рвусь вспоминать
Имеет ли значение то, что весь html код заключен в php скрипт (т.е. всё относящееся к html находится между кавычками echo "<html></html>"; ? На мой взгляд, это не должно играть никакой роли, но тем не менее, этот код не работает:
содержимое category-other.css:
У меня есть сомнения насчёт правильности куска js, интуитивно мне кажется, что там не так должно быть, но исходники, которые я видел по jQuery в интернете, используют onclick = some_defined_function_called_onclick(), а тут его не используем и что-то не вижу быстрого решения, как этот js код преобразовать. Если есть лёгкое решение, то было бы неплохо, если бы сообщили. Пока посмотрю официальную документацию по jQuery, может что-то откопаю.
Код:
<html>
<head>
<title>Protected page content</title>
<script src='jquery-1.7.1.min.js' type='text/javascript'>
$('.category').change(function() {
if ($(this).val() == '0ther') {
$('.category-other').show();
} else {
$('.category-other').hide();
}
});
</script>
<link rel='stylesheet' href='category-other.css' type='text/css'>
</head>
<body>
<p align=center><a href='logout.php'>Exit</a><br></p>
<p align=center><a href='showall.php'>Show all items</a><br></p>
<p align=center>Add new item</a><br></p>
<form method=POST action=addtodb.php>
<table align=center border=1 color='black'>
<tr>
<td>Name:</td>
<td><input type=text name='name' value=name></td>
</tr>
<tr>
<td>Category:</td>
<td>
<select name='category' class='category'>
<option>MP3 player</option>
<option>book</option>
<option>0ther</option>
</select>
<input type='text' name='category-other' value='' class='category-other' />
</td>
</tr>
<tr>
<td>Price:</td>
<td><input type=text name='price' value='0 USD'></td>
</tr>
<tr>
<td>Availability:</td>
<td>
<select name='available'>
<option>True</option>
<option>False</option>
</select>
</td>
</tr>
<tr>
<td>Quantity:</td>
<td><input type=text name='quantity' value=0></td>
</tr>
<tr>
<td COLSPAN=2 align=center><input type=submit value='OK'></td>
</tr>
</table>
</form>
<head>
<title>Protected page content</title>
<script src='jquery-1.7.1.min.js' type='text/javascript'>
$('.category').change(function() {
if ($(this).val() == '0ther') {
$('.category-other').show();
} else {
$('.category-other').hide();
}
});
</script>
<link rel='stylesheet' href='category-other.css' type='text/css'>
</head>
<body>
<p align=center><a href='logout.php'>Exit</a><br></p>
<p align=center><a href='showall.php'>Show all items</a><br></p>
<p align=center>Add new item</a><br></p>
<form method=POST action=addtodb.php>
<table align=center border=1 color='black'>
<tr>
<td>Name:</td>
<td><input type=text name='name' value=name></td>
</tr>
<tr>
<td>Category:</td>
<td>
<select name='category' class='category'>
<option>MP3 player</option>
<option>book</option>
<option>0ther</option>
</select>
<input type='text' name='category-other' value='' class='category-other' />
</td>
</tr>
<tr>
<td>Price:</td>
<td><input type=text name='price' value='0 USD'></td>
</tr>
<tr>
<td>Availability:</td>
<td>
<select name='available'>
<option>True</option>
<option>False</option>
</select>
</td>
</tr>
<tr>
<td>Quantity:</td>
<td><input type=text name='quantity' value=0></td>
</tr>
<tr>
<td COLSPAN=2 align=center><input type=submit value='OK'></td>
</tr>
</table>
</form>
содержимое category-other.css:
Код:
.category-other {
display: none;
}
display: none;
}
У меня есть сомнения насчёт правильности куска js, интуитивно мне кажется, что там не так должно быть, но исходники, которые я видел по jQuery в интернете, используют onclick = some_defined_function_called_onclick(), а тут его не используем и что-то не вижу быстрого решения, как этот js код преобразовать. Если есть лёгкое решение, то было бы неплохо, если бы сообщили. Пока посмотрю официальную документацию по jQuery, может что-то откопаю.
Цитата: t3rmin41
Имеет ли значение то, что весь html код заключен в php скрипт (т.е. всё относящееся к html находится между кавычками echo "<html></html>"; ? На мой взгляд, это не должно играть никакой роли, но тем не менее, этот код не работает:
есть такая штука как MVC и шаблонизаторы. рекомендую почитать на досуге
лучше писать отдельными тегами подгрузку библиотеки и скрипт использующий эту библиотеку
Код:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$('.category').change(function() {
if ($(this).val() == '0ther') {
$('.category-other').show();
} else {
$('.category-other').hide();
}
});
</script>
<script type="text/javascript">
$('.category').change(function() {
if ($(this).val() == '0ther') {
$('.category-other').show();
} else {
$('.category-other').hide();
}
});
</script>
Цитата: t3rmin41
У меня есть сомнения насчёт правильности куска js, интуитивно мне кажется, что там не так должно быть, но исходники, которые я видел по jQuery в интернете, используют onclick = some_defined_function_called_onclick(), а тут его не используем и что-то не вижу быстрого решения, как этот js код преобразовать. Если есть лёгкое решение, то было бы неплохо, если бы сообщили. Пока посмотрю официальную документацию по jQuery, может что-то откопаю.
не велика разница
Код:
// jQuery
el.change(function(e){ });
// без библиотек(обычный js)
el.onChange = function(e){ };
el.change(function(e){ });
// без библиотек(обычный js)
el.onChange = function(e){ };