javascript - Jquery/AJAX populated HTML form when dropdown selected -

javascript - Jquery/AJAX populated HTML form when dropdown selected -

i trying populate form on page. info required populate form pulled mysql database using id of drop downwards alternative id in sql statement. thinking can store info in $_session['formbookings'] , on refresh populate form (this happening using session variable populate form after submit.

i can not have submit button attached form have 1 , boss doesn't want another. form automatically refresh page on selection of option. if info sql statement has been stored in session array form populated.

here have far:

the jquery:

<script> $(document).ready(function(){ $('select[name=recall]').on('change', function() {var recall = $(this).val() //$(function () //{ //----------------------------------------------------------------------- // 2) send http request ajax http://api.jquery.com/jquery.ajax/ //----------------------------------------------------------------------- $.ajax({ url: 'recall.php', //the script phone call info data: "recall: recall", //you can insert url argumnets here pass api.php //for illustration "id=5&parent=6" datatype: 'json', //data format success: function(data) //on recieve of reply { var id = data[0]; //get id var vname = data[1]; //get name //-------------------------------------------------------------------- // 3) update html content //-------------------------------------------------------------------- $('div#box1').load('dfbristol.html');//html("<b>id: </b>"+id+"<b> name: </b>"+vname); //set output element html //recommend reading on jquery selectors awesome // http://api.jquery.com/category/selectors/ //} }); }); }); }); </script>

the html:

<select name='recall' id='recall'> <option selected></option> <?php session_start(); $user = 'root'; $pass = ''; $dbh = new pdo('mysql:host=localhost;dbname=nightlinedb;', $user, $pass); $dbh->setattribute(pdo::attr_errmode, pdo::errmode_exception); $dbh->setattribute(pdo::attr_emulate_prepares, false); $recall = $dbh->prepare('select * bookings dateinputted >= now() - interval 2 day'); $recall->execute(); $recallresult = $recall->fetchall(pdo::fetch_assoc); foreach ($recallresult $key) { echo '<option id='.$key["id"].'>'.$key['id'].' - '.$key['branch'].' - '.$key['title'].' '.$key['firstname'].' '.$key['lastname'].'</option>'; } ?> </select><br />

the sql file (recall.php):

<?php $user = 'root'; $pass = ''; $dbh = new pdo('mysql:host=localhost;dbname=nightlinedb;', $user, $pass); $dbh->setattribute(pdo::attr_errmode, pdo::errmode_exception); $dbh->setattribute(pdo::attr_emulate_prepares, false); $recall = $dbh->prepare("select * bookings id = '%$recall%'"); $recall->execute(); $recallformresult = $recall->fetchall(pdo::fetch_assoc); echo json_encode($recallformresult);

?>

i have tried pass variable 'recall' jquery sql statement using info argument nil happens.

could please help me understand doing wrong , how can resolve it.

on quick glance there seems 2 issues code you've posted far:

the ajax request

even though $.ajax() defaults request type of default, it's specify it. there syntax error in request — have closed success callback }); should } only:

$.ajax({ url: "recall.php", data: { recall: recall }, type: "get", // declare type of request (we utilize get, default) datatype: "json", success: function(data) { var id = data[0]; var vname = data[1]; $('div#box1').load('dfbristol.html'); } // problematic closure });

even better: instead of using deprecated jqxhr.success() function, utilize .done() promise object instead, i.e.:

$.ajax({ url: "recall.php", data: { recall: recall }, type: "get", // declare type of request (we utilize get, default) datatype: "json" }).done(function() { // success var id = data[0], vname = data[1]; $('div#box1').load('dfbristol.html'); }); fixing file recall.php

when create ajax request recall.php, file needs know variables intend pass, have not defined. can using $_get[] (see doc), i.e.:

<?php // assign variable $recall value of recall query string ajax request // recommend doing check see if $_get['recall'] defined, e.g. // if($_get['recall']) { $recall = $_get['recall']; } $recall = $_get['recall']; // rest of script, unmodified $user = 'root'; $pass = ''; $dbh = new pdo('mysql:host=localhost;dbname=nightlinedb;', $user, $pass); $dbh->setattribute(pdo::attr_errmode, pdo::errmode_exception); $dbh->setattribute(pdo::attr_emulate_prepares, false); $recall = $dbh->prepare("select * bookings id = '%$recall%'"); $recall->execute(); $recallformresult = $recall->fetchall(pdo::fetch_assoc); echo json_encode($recallformresult); ?>

note: however, if take create post request, should utilize $_post[] (see doc) instead :)

javascript php jquery mysql ajax