ajax – why my bootstrap form not working in mobile device?

Question

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@600&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <form method="post" action="javascript:void(0)" id="form" class="form">

        <h2 class="head">Get a Quote</h2>
        
        <div class="form-group">
            <label for="name">Name:<span class="star">*</span></label>
            <input type="text" name="name" class="form-control" placeholder="Enter Your Name">
        </div>
        <div class="form-group">
            <label for="email">Email:<span class="star">*</span></label>
            <input type="email" name="email" class="form-control" placeholder="info@gmail.com">
        </div>
        <div class="form-group">
            <label for="cnumber">Contact Number:<span class="star">*</span></label>
            <input type="tel" name="cnumber" class="form-control" placeholder="Enter Conatct Number">
        </div>
        <div class="form-group">
            <label for="company_name">Company Name:</label>
            <input type="text" name="company_name" class="form-control" placeholder="Enter Company Name">
        </div>
        <div class="form-group">
            <label for="subject">Project Subject:</label>
            <input type="text" name="subject" class="form-control" placeholder="Enter Project Subject">
        </div>
        <div class="form-group">
            <label for="r_site_url">Referral Website Url:</label>
            <input type="url" name="r_site_url" class="form-control" placeholder="www">
        </div>
        <div class="form-group">
            <label for="d_ab_p">Details about the project:</label>
            <textarea name="d_ab_p" class="form-control" rows="4" cols="22"></textarea>
        </div>
        <div class="form-group">
            <label for="budget">Budget:in ((₹) Rupee)</label>
            <input type="nubber" name="budget" class="form-control"> 
        </div>
        <div class="form-group">
            <button type="submit" name="submit" class="btn btn-success submit form-control">Submit</button>
            <!-- <input type="submit" name="submit" class="btn btn-success submit form-control"> -->
        </div>
        <div class="form-group">
            <span class="message"></span>
        </div>
    </form>
</body>
<script>
    jQuery('#form').submit(function (e){
        var get_quote = jQuery(this).serialize();
        jQuery.ajax(
        {   
            type: "POST",
            url: "<?php echo admin_url('admin-ajax.php'); ?>",
            data: get_quote + '&action=quote_req',
            success: function(p){
                // location.reload();
                jQuery('.message').html(p.message);

            }

        });
    });
</script>   
</html>

functions.php

function quote_req(){
  $error=""; 
  $valid = true;  
  $name =  $_POST['name'];
  $email =  $_POST['email'];
  $cnumber = $_POST['cnumber'];

  if (empty($name)) {
      $valid = false;  
      $error = "*Please Enter name";
  }
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $valid = false;
      $error = "*Please Enter Valid Email";
  }
  if (count($cnumber) > 10) {
      $valid = false;
      $error = "*Please Enter Valid Contact Number";
  }
  if (empty($name || $cnumber || $email)) {
      $valid = false;
      $error = "*Please Fill The Required Details";
  }
  if ($valid == true) {
      $name = isset($_POST['name']) ? $_POST['name'] : '';
      $email = isset($_POST['email']) ? $_POST['email'] : '';
      $cnumber = isset($_POST['cnumber']) ? $_POST['cnumber'] : '';
      $company_name = isset($_POST['company_name']) ? $_POST['company_name']: '';
      $subject = isset($_POST['subject']) ? $_POST['subject']: '';
      $r_site_url = isset($_POST['r_site_url']) ? $_POST['r_site_url']: '';
      $d_ab_p = isset($_POST['d_ab_p']) ? $_POST['d_ab_p']: '';
      $budget = isset($_POST['budget']) ? $_POST['budget']: '';

      $args = array(
        'post_type' => 'req_quote',
        'post_title' => $name,
        'post_status' => 'pending'

      );
      $new_post = wp_insert_post($args);
      $metas = array(
                    'name' => $name,
                    'email' => $email,
                    'cnumber' => $cnumber,
                    'company_name' => $company_name,
                    'subject' => $subject,
                    'r_site_url' => $r_site_url,
                    'd_ab_p' => $d_ab_p,
                    'budget' => $budget
      );
      update_post_meta($new_post,'new_post',json_encode($metas));
      update_post_meta($new_post,'name',$name);
      update_post_meta($new_post,'email',$email);
      update_post_meta($new_post,'cnumber',$cnumber);
      update_post_meta($new_post,'company_name',$company_name);
      update_post_meta($new_post,'subject',$subject);
      update_post_meta($new_post,'r_site_url',$r_site_url);
      update_post_meta($new_post,'d_ab_p',$d_ab_p);
      update_post_meta($new_post,'budget',$budget);
      
      $error = "Your Request Sent Successfully We Contact You Soon :)";
      wp_send_json( array('success'=>$valid,'message'=>$error));

  }
   else{
    wp_send_json( array('success'=>$valid,'message'=>$error) );
   }
   exit;
}
add_action('wp_ajax_quote_req','quote_req'); 

I am using this for get quote from viewer and it working aowsome at desktop but it’s not working in mobile devise it doesn’t work and did’t give any response if i change form action from “javascript:void(0)” to “#” or blank it start little movement at form page but after load it shows error that is: “Oops! That page can’t be found.” if anyone can help Thank you so much in advance.

0
MR. shaikh__92 7 months 2022-01-22T00:40:51-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse