Submitting a form without form tags

I have a few input values that I want to insert into my database, I cant use form tags to post the values because of Google map inputs wont show on the map.

I have 3 sections:

  1. user choose trucks using a checkbox
    2, choose start and end date with jquery datepicker
  2. google maps origin and destination input

I tried ajax to post my data but it doesn’t work, here is my code:

Trucks:

                                        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                            <div class="panel-body">
                                                <div class="row">
                                                    <h3>Caddy:</h3>
                                                    <div class="col-md-4"> <img class="img-responsive img-hover" img src="images/1.jpg" alt="2t"> </div>
                                                    <div class="col-md-6">
                                                        <input type="checkbox" id="trucksCheck" class="trucksCheck" value="Caddy_700kg">
                                                        <input type="hidden" name="truck_number" value="1">
                                                        <input type="hidden" name="truck_name" value="Caddy_700kg">
                                                        <!-- Trigger the modal with a button -->
                                                        <button type="button" class="btn btn-danger btn-small" data-toggle="modal" data-target="#myModal1"> Information</button>
                                                        <!-- Modal -->
                                                        <div class="modal fade" id="myModal1" role="dialog">
                                                            <div class="modal-dialog modal-sm">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                                        <h4 class="modal-title">Information</h4> </div>
                                                                    <div class="modal-body">
                                                                        <p>700kg closed Caddy.</p>
                                                                    </div>
                                                                    <div class="modal-footer"> </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


Date part

<section id="calendar">
        <div class="section-title">
            <h2> Please Choose Start and End Date:</h2>
            <div class="calendar-wraper">
                <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
                <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
                <script>
                    $(function () {
                        $("#datepicker, #datepicker2").datepicker({
                            onSelect: function (dateText, inst) {
                                $(this).prev()[0].value = dateText;
                            }
                        });
                    });
                </script>
                <div class="container">
                    <div class="row">
                        <div class="col-md-10 col-md-offset-2">
                            <h3>Start Date:</h3>
                            <input id="inp_datepicker" name="startDateField">
                            <div id="datepicker"></div>
                        </div>
                        <div id="end">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-5 col-md-offset-7">
                                        <h3>End Date:</h3>
                                        <input id="inp_datepickerR" name="endDateField">
                                        <div id="datepicker2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

google maps

</section>
    <h2> Please Choose your route(s):</h2>
    <h3>Route One:</h3>
    <input id="origin_input" class="controls" type="text" placeholder="Enter an origin location">
    <input id="destination_input" class="controls" type="text" placeholder="Enter a destination location">
    <div id="mode-selector" class="controls">
        <input type="radio" name="type" id="changemode-driving" checked="checked">
        <label for="changemode-driving">Driving</label>
    </div>
    <div id="map"></div>


ajaxsubmit.php

<?php
include_once("connect.php");
if(isset($_POST['submit'])) {
        $truckCheck2 = implode(',', $_POST['TruckCheck1']);
        $inp_datepicker2 = $_POST['inp_datepicker1'];
        $inp_datepickerR2 =  $_POST['inp_datepickerR1'];
        $origin_input2 =  $_POST['origin_input1'];
        $destination_input2 =  $_POST['destination_input1'];
        
        
        $sql="INSERT INTO booked(truck, start_date, end_date, origin, destination)
        values('$truckCheck2','$inp_datepicker2', '$inp_datepickerR2', '$origin_input2', '$destination_input2')";
        
echo "Form Submitted Succesfully";
    mysql_close($connection); // Connection Closed
}
?>

main.js

$(document).ready(function(){
$('#submit').click(function(){
var truckCheck = $("#truckCheck").val();
var inp_datepicker = $("#inp_datepicker").val();
var inp_datepickerR = $("#inp_datepickerR").val();
var origin_input = $("#origin_input").val();
var destination_input = $("#destination_input").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'truckCheck1='+ truckCheck + '&inp_datepicker1='+ inp_datepicker + '&inp_datepickerR1='+ inp_datepickerR + '&origin_input1='+ origin_input + '&destination_input1='+ destination_input;
if(truckCheck==''||inp_datepicker==''||inp_datepickerR==''||origin_input==''||destination_input=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});

Have you used the browser developer tools to find out what is not working.

For instance a quick glance under network, can reveal if the ajax request has been sent and therefore can eliminate the click event on submit. If you can see the request then check the data being passed to it and the data coming back to make sure this is what you are expecting.

1 Like

This line:

if(isset($_POST['submit'])) {

won’t be helping, because when you build up the data string to send using Ajax, you don’t include a field called “submit”:

var dataString = 'truckCheck1='+ truckCheck + '&inp_datepicker1='+ inp_datepicker
   + '&inp_datepickerR1='+ inp_datepickerR + '&origin_input1='+ origin_input 
  + '&destination_input1='+ destination_input;

ETA - and you don’t execute the query either. You’re using the old mysql functions, so that needs changing to mysqli or PDO, but you need to execute the query after you’ve built it. Obviously you’ll do some validation before you let it out into the wild, as well.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.