Ajax Jequery Post without Form tag & without refresh

Question

I have a page to post data via ajax jquery without refresh an without form tag. N validate via snackbar.

I know that this is possible using jQuery and AJAX, but I'm not really experienced in one of these languages. Anyone got an idea how to solve this?

its my button funtion:

<input type="text" id="nikpemohon">
<input type="text" id="namapemohon">
<button id="tombolsimpan" onclick="validate()"></button>`

here my js:

function validate() {
    var regExnamapemohon = /^[a-zA-Z .'-]+$/;

    var values = {
        'nikpemohon': document.getElementById('nikpemohon').value,
        'namapemohon': document.getElementById('namapemohon').value,
    };

    if(document.getElementById('nikpemohon').value == "" || document.getElementById('nikpemohon').value == null || document.getElementById('nikpemohon').value == undefined || document.getElementById('nikpemohon').value.length < 16 ) {
        //get the snackbar
        var notification = document.querySelector('.mdl-js-snackbar');
        //creating data for snackbar notification
        var data = {
            message: 'Isi NIK dengan benar. Contoh: 6108011234567890',
            timeout: 4000
        }
        //pushing the notification to the screen
        notification.MaterialSnackbar.showSnackbar(data);
        document.getElementById('nikpemohon').focus();
    } else if (document.getElementById('namapemohon').value == "" || document.getElementById('namapemohon').value == null || document.getElementById('namapemohon').value == undefined || !regExnamapemohon.test(document.getElementById('namapemohon').value) )  {
        //get the snackbar
        var notification = document.querySelector('.mdl-js-snackbar');
        //creating data for snackbar notification
        var data = {
            message: 'Isi Nama Lengkap hanya dengan huruf abjad saja, tanpa Penulisan Gelar. Contoh: Matius, Markus atau Darius',
            timeout: 4000
        }
        //pushing the notification to the screen
        notification.MaterialSnackbar.showSnackbar(data);
        document.getElementById('namapemohon').focus();
    } else {
        $.ajax({
            url: "ktp_post.php",
            type: "POST",
            data: values,
        }); 
    }
}

this my ktp_post.php:

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

$nikpemohon = strtoupper($_POST['nikpemohon']);
$namapemohon = strtoupper($_POST['namapemohon']);

$sql = $con->query("INSERT INTO katimpus (nikpemohon, namapemohon)Values('{$nikpemohon}', '{$namapemohon}')");}

please help here. two days spent for this error. I cannot Post the data to mysql database..

no I mean with this code, it not post any data into database sir. — omdx, Dec 13 '16 at 13:20
have you checked the network setting in your dev tools to see if the ajax file is being called? — Option, Dec 13 '16 at 13:23
any error in your browser console? any error in your php log file? — Mauro, Dec 13 '16 at 13:24
Have you watched the AJAX request / response in the browser's developer tools? Have you included the jQuery library in the project? Are there any errors reported? Are you running this on a web-server? — Jay Blanchard, Dec 13 '16 at 13:26
[Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)***. Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! — Jay Blanchard, Dec 13 '16 at 13:26
No error on console. [SS](http://image.prntscr.com/image/54731f5a3c914dc39c62b541af9abbe3.png) — omdx, Dec 13 '16 at 13:28
You didn't set value for `tombolsimpan` in your `values `parameter of jQuery ajax request. So the php function doesn't work. :) — Miron, Dec 13 '16 at 14:01
`(function (json_args) { var args = JSON.parse(unescape(json_args)); console[args[0]].apply(console, Array.prototype.slice.call(args, 1)); })('%5B%22groupCollapsed%22%2C%22XHR%20Loaded%20%28ktp_post.php%20-%20200%20OK%20-%20250.99999999656575ms%20-%20239B%29%22%5D');` thats my error i think — omdx, Dec 13 '16 at 14:16
this [screenshot](http://image.prntscr.com/image/0ab2c0204c11422e95f39f42c0490913.png) — omdx, Dec 13 '16 at 14:18

Amit Sahu · Answer 1 · 2016-12-13T13:38:15.283

0

Have you used proper value for your button Try like this:

<form method='post'> <input type="text" id="nikpemohon"> <input type="text" id="namapemohon"> <input type="button" id="tombolsimpan" value="tombolsimpan" onclick="validate()"/> </form>

edited Dec 13 '16 at 13:38

answered Dec 13 '16 at 13:28

Amit Sahu

686
4
7

No. I not go with form element. with form element I usualy fine. but, this bout not using form element. – omdx Dec 13 '16 at 13:38
In you code you are checking `if(isset($_POST['tombolsimpan']))` and you are not getting that value because it is not set... – Amit Sahu Dec 13 '16 at 13:40
so, without form element, I just delete isset on php procces? – omdx Dec 13 '16 at 13:45
I you really want to check `isset($_POST['tombolsimpan'])` you have to use like this var values = { 'nikpemohon': document.getElementById('nikpemohon').value, 'namapemohon': document.getElementById('namapemohon').value, }; – Amit Sahu Dec 13 '16 at 13:51
in your value array use one more element i.e. `tombolsimpan: anyValue` so that issset method check your post data – Amit Sahu Dec 13 '16 at 13:53
any example for doing that? How with PDO maybe? – omdx Dec 13 '16 at 13:57
ok. to be clear. that example is used Form element. I dont want use form element because my empty input elemet validated by Snackbar. If I use form element, then button function `validate()` not work. button push submit data without being validate by snackbar. – omdx Dec 14 '16 at 04:49

score 0 · Answer 2 · answered Dec 15 '16 at 00:34

0

i fix by delete if(isset($_POST['tombolsimpan'])){ & } on .php process

answered Dec 15 '16 at 00:34

omdx

53
7

Ajax Jequery Post without Form tag & without refresh

2 Answers2

Linked