CODEWITHSUNDEEP
javascriptjqueryajaxformsajaxform
Frauds
Frauds

Reputation: 137

jQuery ajax submit form and get value from datepicker, button

I'm figuring out how the ajax form I created can respond to an alert box when it succeeds or fails. I have formed with box choice 1, box choice 2, datepicker, email address, and phone number. I want to ask how to get value from datepicker,and value from the button choice to the ajax form. I've made my own code like below. Can anyone help me solve this problem step by step?

$(document).ready(function() {
  //datepicker
  $(function() {
     $( ".datepicker" ).datepicker({
        dateFormat:'DD, d MM yy',
        firstDay: 0
      });
  });
  
  $('.box-1 button, .box-2 button').on('click', function(e) {
    e.preventDefault();
    $(this).addClass('selected');
    $(this).closest('div').find('button').not(this).removeClass('selected');
  });
  
  //ajax process the form
    $('#myForm').submit(function(event) {

        // get the form data
        var formData = {
            'phone' : $('input[name=phone]').val(),
            'email' : $('input[name=email]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', 
            url         : 'myscript.php', 
            data        : formData,
            dataType    : 'json', 
            encode      : true
        })
            // using the done promise callback
            .done(function(data) {
                alert('success');
            })
            
            // using the fail promise callback
            .fail(function(data) {
                alert('fail');
            });

        event.preventDefault();
});
button,.datepicker{
  border:none;
  background-color:#1f45;
  padding: .5rem 2.5rem;
  border-radius: 2rem;
}

.box-1{
  margin-bottom: 15px;
}

button.selected{
  background-color: #578889;
  color: #fff;
}

.submit-box{
  margin-top:15px;
  margin-bottom:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" integrity="sha512-9h7XRlUeUwcHUf9bNiWSTO9ovOWFELxTlViP801e5BbwNJ5ir9ua6L20tEroWZdm+HFBAWBLx2qH4l4QHHlRyg==" crossorigin="anonymous" />

<form action="#" method="post" id="myForm">
  <h3>Box 1 Choice</h3>
  <div class="box-1">
    <button name="choice1">Box 1 Option 1</button>
    <button name="choice2">Box 1 Option 2</button>
  </div>

  <h3>Box 2 Choice</h3>
  <div class="box-2">
    <button name="choice3">Box 2 Option 1</button>
    <button name="choice4">Box 2 Option 2</button>
  </div>
 
  <h3>Choose Date</h3>
  <div class="datepicker-box">
    <input type="text" class="datepicker" placeholder="Choose your date" name="date">
  </div>
  
  <h3>Email Address</h3>
  <input type="text" placeholder="Your email address" name="email">
  
  <h3>Phone Number</h3>
  <input type="text" placeholder="Your phone number" name="phone">
  
  <div class="submit-box">
    <button type="submit">Submit Form</button>
  </div>
</form>

Upvotes: 0

Views: 856

Answers (1)

mplungjan
mplungjan

Reputation: 178421

You mean

$("#myForm").on("submit", function(e) { 
  e.preventDefault();

  var formData = {
        'phone' : $('input[name=phone]').val(),
        'email' : $('input[name=email]').val(),
        'buttons' : [...this.querySelectorAll("button.selected")]
                    .map(but => but.name),
        'date'  :  $(".datepicker",this).val()
  };

Upvotes: 1

Related Questions