script

2020.09.18 09:39

juery - form

  • 관리자 2020.09.18 인기
  • 6,580
    0
<!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>
  • 공유링크 복사
  • 이전글[jquery] select box 선택값 가져오기2020.09.18
  • 다음글jquery - datepicker2020.09.18
  • 댓글목록

    등록된 댓글이 없습니다.