Reputation:

Insert multiple data in jQuery with AJAX

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?

Upvotes: 0

Answers (2)

anupshrestha

Reputation: 236

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.

Upvotes: 0

Barmar

Reputation: 782785

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.

Upvotes: 2

Insert multiple data in jQuery with AJAX

Answers (2)

Related Questions