Jquery Ajax Get the current URL on submit form

Question

I used the code from https://scotch.io/tutorials/submitting-ajax-forms-with-jquery to post these data from these form

 <form id="request" method="post" autocomplete="off" class="form-horizontal row scrollTo" novalidate="novalidate">
    <div class="form-group row">
    <label class="control-label label-font" for="lastname">Lastname</label>
    <input name="lastname" id="lastname" class="form-control required" type="text">
    <label class="control-label label-font" for="firstname">Firstname</label>
    <input name="firstname" id="firstname" class="form-control required" type="text">
    </div>
    <div class="form-group row">
    <label class="control-label label-font" for="mobile">Mobile</label>
    <input name="mobile" id="mobile" class="form-control required number" type="text" minlength="10" maxlength="10">
    <label class="control-label label-font" for="vat">vat</label>
    <input name="vat" id="vat" class="form-control validVAT required" maxlength="9" type="text">
    </div>
    <div class="form-group row">
    <label class="control-label label-font" for="address">Address</label>
    <input name="address" id="address" class="form-control required" type="text">
    <label class="control-label label-font" for="streetno">Streetno</label>
    <input name="streetno" id="streetno" class="form-control required" type="text">
    </div>
    <div class="form-group row">
    <label class="control-label label-font" for="user_postcode">Postcode</label>
    <select name="user_postcode" id="user_postcode" class="form-control select2 required select2-hidden-accessible" tabindex="-1" aria-hidden="true"><option value="">Select</option><optgroup label="country1">
    <option value="3002123">3002123 Las Vegas</option><option value="3002723">3002723 Los Angeles</option></optgroup></select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-user_postcode-container"><span class="select2-selection__rendered" id="select2-user_postcode-container" title="3002123 Las Vegas">3002123 Las Vegas</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span> </div>
    </div>
    <label class="control-label label-font" for="user_email">Email</label>
    <input name="user_email" id="user_email" class="form-control required" type="text">
    </div>
    <div class="form-group row">
    <label class="control-label label-font" for="notes">Notes</label>
    <textarea type="text" name="notes" id="notes" class="form-control"></textarea>
    </div>
    <div class="form-group text-center">
    <input type="hidden" name="host"><input type="hidden" name="userID" class="userID" value="ho9fbhp3mhb"><input type="hidden" name="usage" value="auto">
    <button type="submit" class="btn btn-primary btn-sm" data-wizard="letters">Submit</button>
    </div>
    </form>

in .php file.

<script type="text/javascript">

            jQuery(document).ready(function() {

                jQuery("#request").submit(function(event) {

                    var formData = {
                        'lastname'         : jQuery('input[name=lastname]').val(),
                        'firstname'        : jQuery('input[name=firstname]').val(),
                        'phone'            : jQuery('input[name=mobile]').val(),
                        'afm'              : jQuery('input[name=vat]').val(),
                        'address'          : jQuery('input[name=address]').val(),
                        'address_no'       : jQuery('input[name=streetno]').val(),
                        'user_postcode'    : jQuery('select[name=user_postcode]').val(),
                        'email'            : jQuery('input[name=user_email]').val(),
                        'notes'            : jQuery('textarea[name=notes]').val()
                    };

                    jQuery.ajax({
                        type        : 'POST', 
                         url         : 'process.php', // the url where we want to POST 
                        data        : formData, 
                        dataType    : 'json', 
                                    encode          : true
                    })
                        .done(function(data) {

                            console.log(data); 

                        });

                    event.preventDefault();
                });

            });

        </script>

This is the code I wrote but I want to save in .php file also the current url. Which is the code to do this? Where and how sould I put the code? Also, could I set all this code only when the form is valid?

Do you want to save the URL of the page you sent? or this page? — Özgür Can Karagöz, Apr 09 '18 at 22:14
Ajax should send across a header for Referrer and/or Origin. — Taplar, Apr 09 '18 at 22:17

score 1 · Answer 1 · answered Apr 09 '18 at 22:15

Add another property to formData:

var formData = {
    'lastname'         : jQuery('input[name=lastname]').val(),
    'firstname'        : jQuery('input[name=firstname]').val(),
    'phone'            : jQuery('input[name=mobile]').val(),
    'afm'              : jQuery('input[name=vat]').val(),
    'address'          : jQuery('input[name=address]').val(),
    'address_no'       : jQuery('input[name=streetno]').val(),
    'user_postcode'    : jQuery('select[name=user_postcode]').val(),
    'email'            : jQuery('input[name=user_email]').val(),
    'notes'            : jQuery('textarea[name=notes]').val(),
    'url'              : location.href
};

Thank you for your answer!! Could you tell me also how to send these data to the php file only when the form is valid? — gma, Apr 12 '18 at 14:57
Put validation code in your `.submit()` function. If it's not valid, return `false` to prevent the form from being submitted. — Barmar, Apr 12 '18 at 18:53

Özgür Can Karagöz · Accepted Answer · 2018-04-09T22:25:25.920

1

The window.location.href property returns the URL of the current page.

console.log(window.location.href);

Also : https://www.w3schools.com/js/js_window_location.asp

if we come to the problem

var formData = {
  'lastname': jQuery('input[name=lastname]').val(),
  'firstname': jQuery('input[name=firstname]').val(),
  'phone': jQuery('input[name=mobile]').val(),
  'afm': jQuery('input[name=vat]').val(),
  'address': jQuery('input[name=address]').val(),
  'address_no': jQuery('input[name=streetno]').val(),
  'user_postcode': jQuery('select[name=user_postcode]').val(),
  'email': jQuery('input[name=user_email]').val(),
  'notes': jQuery('textarea[name=notes]').val(),
  'url' : window.location.href
};

you can do it this way.

edited Apr 09 '18 at 22:25

answered Apr 09 '18 at 22:19

Özgür Can Karagöz

1,039
1
13
32

Thank you for your answer!! Could you tell me also how to send these data to the php file only when the form is valid? – gma Apr 12 '18 at 14:57
there are many ways to do this. https://stackoverflow.com/questions/37912937/how-to-send-secure-ajax-requests-with-php-and-jquery I recommend you take a look here. – Özgür Can Karagöz Apr 12 '18 at 22:25

Jquery Ajax Get the current URL on submit form

2 Answers2