Insert multiple data in jQuery with AJAX

Question

i have some trouble in inserting datas in jQuery using AJAX. i have code named login.js :

function check_login()
{
    //Mengambil value dari input username & Password
    var pulau = $('#pulau').innerHTML();
    var judul = $('#judul').innerHTML();
    var gambar = $('#gambar').innerHTML();
    var rekomendasi = $('#rekomendasi').innerHTML();
    var deskripsi = $('#deskripsi').innerHTML();
    var detail = $('#detail').innerHTML();
    var itinerary = $('#itinerary').innerHTML();
    var persiapan = $('#persiapan').innerHTML();
    var terms = $('#terms').innerHTML();

    //Ubah alamat url berikut, sesuaikan dengan alamat script pada komputer anda
    var url_login    = 'http://localhost/project/konfig/posting.php';

    //Ubah tulisan pada button saat click login
    $('#submit').attr('value','Silahkan tunggu ...');

    //Gunakan jquery AJAX
    $.ajax({
        url     : url_login,
        //mengirimkan username dan password ke script login.php
        data    : 'pulau='+pulau+'&judul='+judul+'&gambar='+gambar+'&rekomendasi='+rekomendasi+'&deskripsi='+deskripsi+'&detail='+detail+'&itinerary='+itinerary+'&persiapan='+persiapan+'&terms='+terms,
        type    : 'POST',
        //Data yang akan diambil dari script pemroses
        dataType: 'html',
        //Respon jika data berhasil dikirim
        success : function(pesan){
            if(pesan=='oke'){
                //Arahkan ke halaman admin jika script pemroses mencetak kata ok
                window.location = url_login;
            }
            else{
                //Cetak peringatan untuk username & password salah
                alert(pesan);
                $('#btnLogin').attr('value','Coba lagi ...');
        }
        }
    });
}

and this is code for dest.php :

<?php
session_start();
include('core.php');
include('ui.php');
database();
global $judul;
global $deskripsi;
global $gambar;
global $pulau;
global $rekomendasi;
global $detail;
global $itinerary;
global $persiapan;
global $terms;
$id=$_REQUEST['edit'];
$uid=$_REQUEST['hapus'];
if($_REQUEST['edit'] && $_REQUEST['edit'] == $id){
    edit_posting();
}else
if($_REQUEST['hapus'] && $_REQUEST['hapus'] == $uid){
    hapus_posting();
}
$q=mysql_query("INSERT INTO `destinasi` (`id`,`judul`,`deskripsi`,`gambar`,`pulau`,`rekomendasi`,`detail`,`itinerary`,`persiapan`,`terms`) VALUES (NULL,'$judul','$deskripsi','$gambar','$pulau','$rekomendasi','$detail','$itinerary','$persiapan','$terms')");
?>
<!doctype html>
<head>
<title>Posting Baru</title>
</head>
<body>
    <div class='app-bar'>
        <a href='./home.php' class='app-bar-element'><span class='mif-arrow-left icon fg-white'></span></a> 
    </div>
                    <div class='padding10 no-padding-top'>
                    <div class='input-control select'>
                    <form method='post'>
                        <select name='pulau' id='pulau'>
                            <option value='jawa'>Jawa</option>
                            <option value='sumatera'>Sumatera</option>
                            <option value='sulawesi'>Sulawesi</option>
                            <option value='kalimantan'>Kalimantan</option>
                            <option value='lain'>Pulau lain</option>
                        </select>
                    </div>
<br />
                        <input type='text' id='judul' class='input-control text' style='width:50%;' name='judul' placeholder='Judul' required />
                        <input type='text' id='gambar' class='input-control text' style='width:50%;' name='gambar' placeholder='Image Featured Link e.g: ajak_sawarna.jpg'>
                        <input type='text' id='rekomendasi' class='input-control text' style='width:50%;' name='rekomendasi' placeholder='Tulis rekomendasi/sambutan singkat tentang postinganmu' required />

<div id='deskripsi' class='editable' style='border:1px solid black;width:100%;height:300px;overflow:auto;'>
Tulis Deskripsi disini
</div>
<div id='details' class='editable' style='border:1px solid black;width:100%; height:200px;overflow:auto;'>
Tulis Detail disini
</div>
<div id='itinerary' class='editable' style='border:1px solid black;width:100%; height:200px;overflow:auto;'>
Tulis itinerary disini
</div>
<div  id='persiapan' class='editable' style='border:1px solid black;width:100%; height:200px;overflow:auto;'>
Tulis Persiapan disini
</div>
<div  id='terms' class='editable' style='border:1px solid black;width:100%; height:200px;overflow:auto;'>
Tulis terms disini
</div>
<button onclick='check_login()' id='submit' name='submit' value='Posting!'>Login</div>
        </div>
        </form>
</body>
</html>

i so dizzy in this section :

data    : 'pulau='+pulau+'&judul='+judul+'&gambar='+gambar+'&rekomendasi='+rekomendasi+'&deskripsi='+deskripsi+'&detail='+detail+'&itinerary='+itinerary+'&persiapan='+persiapan+'&terms='+terms,

why that code is not work?

i was read in StackOverflow sites, but still not work. can help me?

Try running var_dump($_POST) to see if any data is coming through! — Luke
– Luke, Commented May 19, 2015 at 1:42
Where do you set all the variables like $judul in the PHP script? You need something like $judul = mysql_real_escape_string($_POST['judul']); — Barmar
– Barmar, Commented May 19, 2015 at 1:46
global statements don't do anything at the top-level of a script. They're only useful inside functions, to allow the function to access global variables. — Barmar
– Barmar, Commented May 19, 2015 at 1:47

Barmar · Accepted Answer · 2015-05-19 01:51:09Z

2

In the Javascript, use:

    data    : { pulau: pulau,
                judul: judul,
                gambar: gambar,
                ...
              },

In case there are any special characters in the values, they need to be encoded, and jQuery will do this automatically for you when you give it an object here (when you're making the string yourself, you need to call encodeURIComponent() on each of the values).

And in the PHP script, you're not accessing the parameters. Instead of

global $judul;

it should be:

$judul = mysql_real_escape_string($_REQUEST['judul']);

and the same for all the other variables that are posted.

answered May 19, 2015 at 1:51

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anupshrestha · Accepted Answer · 2015-05-19 02:11:48Z

0

I don't know if you have added the reference to the jQuery library in your original code, but if not then make sure you add the following line to your html code.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Also in your check_login() function change .innerHTML() to .val() and it should pass the values to the url.

answered May 19, 2015 at 2:11

anupshrestha

2366 silver badges20 bronze badges

Collectives™ on Stack Overflow

Insert multiple data in jQuery with AJAX

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related