Skip to content

Instantly share code, notes, and snippets.

@SeqviriouM

SeqviriouM/form

Created April 16, 2014 14:31
Show Gist options
  • Save SeqviriouM/10885214 to your computer and use it in GitHub Desktop.
Save SeqviriouM/10885214 to your computer and use it in GitHub Desktop.
Download ZIP
Jquery change action
Raw
form
<body>
<div class="middle">
<form class="form">
<div class="form-group">
<div style="text-align: center">
<b><label>Заполните следующие поля</label></b>
</div>
</div>
<div class="form-group">
<label>От: </label>
<input type="text" name="from" id="from" placeholder="Место отправления" size=25>
</div>
<div class="form-group">
<label>До: </label>
<input type="text" name="to" id="to" placeholder="Место прибытия" size=25>
</div>
<div class="form-group">
<label>Вид транспорта: </label>
</div>
<div class="form-group">
<input type="radio" name="transport" value="airplane">Самолет
<input type="radio" name="transport" value="train">Поезд
<input type="radio" name="transport" value="ship">Корабль
<input type="radio" name="transport" value="bus">Автобус<br><br>
<input type="radio" name="transport" value="another">Другой вид транспорта:
<input type="text" placeholder="Название транспорта" id="another_transport" name="another_transport" size=25 disabled>
</div>
<div class="form-group">
<input type="checkbox" name="flight" value="flight" id="flight"><label for="flight">Номер рейса: </label>
<input type="text" name="numb_flight" id="numb_flight" placeholder="Номер рейса" size=25 disabled>
</div>
<div class="form-group">
<input type="checkbox" name="seat" value="seat" id="seat"><label for="seat">Номер места: </label>
<input type="text" name="numb_seat" id="numb_seat" placeholder="Номер места" size=25 disabled>
</div>
<div class="form-group">
<label>Дополнительная информация: </label>
</div>
<div class="form-group">
<input type="button" value="Ввести еще данные" onclick="save()">
<input type="button" value="Далее" class="next" onclick="next()" >
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
// Активация текстового поля для ввода названия транспорта при выборе варианта "Другой вид транспорта"
$('input[name=transport]:radio').change(function() {
if ($(":checked").val() === "another") {
$('#another_transport').prop('disabled', false);
} else {
$('#another_transport').prop('disabled', true);
}
});
// Активация текстового поля для ввода номера рейса при выборе варианта "номер рейса"
$('input[name=flight]:checkbox').change(function() {
if ($(":checked").val() === "flight") {
$('#numb_flight').prop('disabled', false);
} else {
$('#numb_flight').prop('disabled', true);
}
});
$('input[name=seat]:checkbox').change(function() {
if ($(":checked").val() === "seat") {
$('#numb_seat').prop('disabled', false);
} else {
$('#numb_seat').prop('disabled', true);
}
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment