juery - form
페이지 정보
본문
<!DOCTYPE html>
<link rel="stylesheet" href="/css/jquery-ui.css">
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery-ui.js"></script>
<script>
$( function() {
$( document ).tooltip();
$( "#dialog" ).dialog();
$( ".radio" ).checkboxradio();
$( ".checkbox" ).checkboxradio();
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear : true
});
$.datepicker.setDefaults({
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
showMonthAfterYear: true,
yearSuffix: '년'
});
$( "#speed" ).selectmenu();
$( "#spinner" ).spinner({
min: 1,
max: 10,
step: 1
});
} );
</script>
<script>
function submit(){
$.ajax({
url: './post.php',
type: 'POST',
data: $("#formname").serialize(),
dataType: 'text',
success: function(result) {
$('#output').html(result);
$("#form_submit").hide();
},
error: function(result) {
alert("ERROR");
}
});
}
</script>
<div id="output"></div>
<div class="widget">
<form id="formname">
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1" class="radio">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2" class="radio">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3" class="radio">
</fieldset>
<fieldset>
<legend>Hotel Ratings: </legend>
<label for="checkbox-1">2 Star</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="checkbox">
<label for="checkbox-2">3 Star</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="checkbox">
<label for="checkbox-3">4 Star</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="checkbox">
<label for="checkbox-4">5 Star</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4" class="checkbox">
</fieldset>
<p>Date: <input type="text" name="date" id="datepicker"></p>
<fieldset>
<label for="speed">Select a speed</label>
<select name="speed" name="speed1" id="speed">
<option>Slower</option>
<option disabled selected>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
</fieldset>
<p>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value" value="1" size="2">
</p>
<a href="#" id="form_submit" class="ui-button" onclick="submit()" title="전송버튼입니다.">전송</a>
<a href="<?=$_SERVER['PHP_SELF']?>" class="ui-button">다시작성</a>
</form>
</div>
<link rel="stylesheet" href="/css/jquery-ui.css">
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery-ui.js"></script>
<script>
$( function() {
$( document ).tooltip();
$( "#dialog" ).dialog();
$( ".radio" ).checkboxradio();
$( ".checkbox" ).checkboxradio();
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear : true
});
$.datepicker.setDefaults({
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
showMonthAfterYear: true,
yearSuffix: '년'
});
$( "#speed" ).selectmenu();
$( "#spinner" ).spinner({
min: 1,
max: 10,
step: 1
});
} );
</script>
<script>
function submit(){
$.ajax({
url: './post.php',
type: 'POST',
data: $("#formname").serialize(),
dataType: 'text',
success: function(result) {
$('#output').html(result);
$("#form_submit").hide();
},
error: function(result) {
alert("ERROR");
}
});
}
</script>
<div id="output"></div>
<div class="widget">
<form id="formname">
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1" class="radio">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2" class="radio">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3" class="radio">
</fieldset>
<fieldset>
<legend>Hotel Ratings: </legend>
<label for="checkbox-1">2 Star</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="checkbox">
<label for="checkbox-2">3 Star</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="checkbox">
<label for="checkbox-3">4 Star</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="checkbox">
<label for="checkbox-4">5 Star</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4" class="checkbox">
</fieldset>
<p>Date: <input type="text" name="date" id="datepicker"></p>
<fieldset>
<label for="speed">Select a speed</label>
<select name="speed" name="speed1" id="speed">
<option>Slower</option>
<option disabled selected>Slow</option>
<option selected="selected">Medium</option>
<option>Fast</option>
<option>Faster</option>
</select>
</fieldset>
<p>
<label for="spinner">Select a value:</label>
<input id="spinner" name="value" value="1" size="2">
</p>
<a href="#" id="form_submit" class="ui-button" onclick="submit()" title="전송버튼입니다.">전송</a>
<a href="<?=$_SERVER['PHP_SELF']?>" class="ui-button">다시작성</a>
</form>
</div>
- 이전글[jquery] select box 선택값 가져오기 20.09.18
- 다음글jquery - datepicker 20.09.18
댓글목록
등록된 댓글이 없습니다.