Click on PHP result to Autofill form fields

**kjett80** · 09-29-2014, 02:47 PM

Hello, I hope that I am posting this in the correct forum. This particular situation involves PHP & AJAX.

I have created a database, form and an alphabetic menu of sorts that grabs all results housed in the database and displays them by last name alphabetically when a letter is clicked. I would then like to be able to click on a single result within the populated results and have the information autofill the fields in my form.

Here is a snippet of my html:

HTML Code:

<!-- Letter Search -->
<div class="searchBox span12">

	<h3>Choose the First Letter of the Person's Last Name</h3>
	<ul>
        <li class="alphabets" id="A"><a href="?by=A">A</a></li>
        <li class="alphabets" id="B"><a href="?by=B">B</a></li>
        <li class="alphabets" id="C"><a href="?by=C">C</a></li>
        <li class="alphabets" id="D"><a href="?by=D">D</a></li>
        <li class="alphabets" id="E"><a href="?by=E">E</a></li>
        <li class="alphabets" id="F"><a href="?by=F">F</a></li>
        <li class="alphabets" id="G"><a href="?by=G">G</a></li>
        <li class="alphabets" id="H"><a href="?by=H">H</a></li>
        <li class="alphabets" id="I"><a href="?by=I">I</a></li>
        <li class="alphabets" id="J"><a href="?by=J">J</a></li>
        <li class="alphabets" id="K"><a href="?by=K">K</a></li>
        <li class="alphabets" id="L"><a href="?by=L">L</a></li>
        <li class="alphabets" id="M"><a href="?by=M">M</a></li>
        <li class="alphabets" id="N"><a href="?by=N">N</a></li>
        <li class="alphabets" id="O"><a href="?by=O">O</a></li>
        <li class="alphabets" id="P"><a href="?by=P">P</a></li>
        <li class="alphabets" id="Q"><a href="?by=Q">Q</a></li>
        <li class="alphabets" id="R"><a href="?by=R">R</a></li>
        <li class="alphabets" id="S"><a href="?by=S">S</a></li>
        <li class="alphabets" id="T"><a href="?by=T">T</a></li>
        <li class="alphabets" id="U"><a href="?by=U">U</a></li>
        <li class="alphabets" id="V"><a href="?by=V">V</a></li>
        <li class="alphabets" id="W"><a href="?by=W">W</a></li>
        <li class="alphabets" id="X"><a href="?by=X">X</a></li>
        <li class="alphabets" id="Y"><a href="?by=Y">Y</a></li>
        <li class="alphabets" id="Z"><a href="?by=Z">Z</a></li>
     </ul>
     	<? include('search.php'); ?>
    
</div>
<!-- End Letter Search -->

        
<hr style="color:#ccc; margin-bottom:20px;" />

<!-- Main Form -->

<div id="mainForm">
	<form method="post" id="icsForm" class="searchBox span12">
    	<div id="col1" class"span6">
    	<h3>Contact Information</h3>
        <label>Church / Organization:</label><input type="text" name="organization" id="organization" class="span6 upright" /><br />
		<label>First Name:</label><input type="text" name="firstName" id="firstName" class="span6 upright" />
        <label>Last Name:</label><input type="text" name="lastName" id="lastName" class="span6 left upright" />
        <label>Email Address:</label><input type="text" name="email" id="email" class="span6 left upright" />
        <label>Phone Number:</label><input type="text" name="phone" id="phone" class="span6 left upright" />
        </div>

Here is my PHP:

PHP Code:


include("dbconnect.php");



if(preg_match("/^[A-Z | a-z]+/", $_POST['name'])){

$name=$_POST['name'];

}



if(isset($_GET['by'])){

$letter=$_GET['by'];



//query to sort by last name



$sql="SELECT contact_id, first_name, last_name, church_org, email_address, phone_number FROM ics_data WHERE last_name LIKE '$letter%' ORDER BY last_name ASC";



//run the query against the mysql query function

$result=mysql_query($sql); 



//count the results

$numrows=mysql_num_rows($result);



echo "<p>" .$numrows . " results found for " . $letter . "</p>"; 



//Create a while loop and loop through result set - array

while($row=mysql_fetch_array($result)){



        $first_name=$row['first_name'];

    $last_name=$row['last_name'];

    $church_org=$row['church_org'];

    $email_address=$row['email_address'];

    $phone_number=$row['phone_number'];

    $contact_id=$row['contact_id'];

    

//display the result of the array



echo "<div id=\"search-results\">";

echo "<ul class=\"letter-results\">\n"; 

echo "<li class=\"result-row\">" . "<a href=\"\" class=\"testclass\">"  .$first_name . " " .$last_name . "". ", &nbsp;" ."" .$church_org ."</a></li>\n";

echo "</ul>";

echo "</div>";

}

}

$formData = json_encode($row);

Here is my javascript / ajax:

Code:

$(document).ready( function() {
	function formfill() {
		var organization = $('#organization').val();
		var firstname = $('#firstname').val();
		var lastname = $('#lastname').val();
		var email = $('#email').val();
		var phone = $('#phone').val();
		$.ajax ({
			method: "GET",
			url: "search.php",
			dataType: 'json',
			data: {
				organization:organization, firstname:firstname, lastname:lastname, email:email, phone:phone
			},
			type: "POST",
			success: function(data) {
				$organization
				$firstname
				$lastname
				$email
				$phone
			},
			
	 	failure: function() {
                alert('fail!');
            }
        });
	}
	
	$('.result-row').click(function() {
       formfill();
    });

});

Any help or guidance would be so much appreciated!! I am learning this bit by bit and this is my first big attempt to create something useful.

**jscheuer1** · 09-29-2014, 05:49 PM

The highlighted below appears to do nothing:

Code:

$(document).ready( function() {
	function formfill() {
		var organization = $('#organization').val();
		var firstname = $('#firstname').val();
		var lastname = $('#lastname').val();
		var email = $('#email').val();
		var phone = $('#phone').val();
		$.ajax ({
			method: "GET",
			url: "search.php",
			dataType: 'json',
			data: {
				organization:organization, firstname:firstname, lastname:lastname, email:email, phone:phone
			},
			type: "POST",
			success: function(data) {
				$organization
				$firstname
				$lastname
				$email
				$phone
			},
			
	 	failure: function() {
                alert('fail!');
            }
        });
	}
	
	$('.result-row').click(function() {
       formfill();
    });

});

Am I right, or am I missing something? If I'm right, what if anything do you want it to do? I may need to see the live page.

**kjett80** · 09-29-2014, 06:13 PM

Hi John,

Thank you so much for taking the time to look at this and help me bridge the gap! Believe it or not, the php was the easy part.

The Javascript is where my confusion set in, I think.

When I looked at other examples that had similar components, it seemed that for the "success" portion, they were echoing the set variables and then the values. so, $phone var phone = $('#phone').val(); #phone is the ID of the Phone number field in my form. .val() is the value of the field. (This is the way I understood it). Now that I am looking at it... it would appear that the value is empty so in essence it does nothing. Am I right?

So that you can better understand what I am trying to accomplish, the link to my form is here:

https://diocesan.com/ics

If you click on one of the letters, results will show up. Those results come from the information housed in my database.

What I need is to be able to click on one of the results... ex: John Smith, Organization and have the form autofill the information of John Smith: Organization, First name, Last name, phone number and email address. This is the part I am having trouble with.

Thank you so much for your help!!

**kjett80** · 09-30-2014, 02:31 PM

After doing more research, I reworked the code a bit:

I added this to the PHP:

PHP Code:


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

  echo json_encode(array('first_name' => $first_name, 'last_name' => $last_name, 'church_org' => $church_org, 'email_address' => $email_address, 'phone_number' => $phone_number));

  exit;

}

Code:

$(document).ready( function() {
	$('.testclass').click(function() {
		var selectname = $(this).val(); <-- the result listed in .testclass
		$.ajax({
			url: 'search.php',
			data: {selectname : selectname},  <-- the value listed in .testclass
			type: 'POST',
			dataType: 'JSON',
			success: function(data)
			{
				$("input#organization").val(result);  <-- the result posted in the input field
				$("input#firstName").val(result);
				$("input#lastName").val(result);
				$("input#email").val(result);
				$("input#phone").val(result);
			}
			});
});
});

I know there is a disconnect here... i'm just having a hard time figuring out what it is

**jscheuer1** · 09-30-2014, 02:35 PM

OK, I think you are going overkill here wanting to use AJAX. You probably could, but all of the information that you want put into the form for each name/organization combo of a letter was already apparently fetched from the database when a letter was clicked. Unfortunately, not all of it was made note of in a way that could again then be used, but that would be a simple matter to accomplish. I'd either put that information into a javascript object, or into hidden elements or attributes, in any of those places it could be accessed later as needed to fill out the form.

Another problem you are facing is that you cannot load insecure content (http):

Code:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

on a secure page (https://diocesan.com/ics)

As a result, jQuery is unavailable to the page. Change the jQuery script tag to:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Or host your own copy of it on your secure partition.

Now we just need a way to save all that info when it's first fetched and a way to put it into the form later when someone clicks on a particular person.

It's going to take me a little time to work out the code I'm talking about. In the meantime, if there's any reason why we have to use AJAX, like this highlighted data called for in the PHP loop you showed me:

Code:

//Create a while loop and loop through result set - array 
while($row=mysql_fetch_array($result)){ 

        $first_name=$row['first_name']; 
    $last_name=$row['last_name']; 
    $church_org=$row['church_org']; 
    $email_address=$row['email_address']; 
    $phone_number=$row['phone_number']; 
    $contact_id=$row['contact_id'];

not being available at that time, let me know.

**kjett80** · 09-30-2014, 02:52 PM

There is no reason that we have to use Ajax. When I was Googling for a good solution, every similar solution I saw, used Ajax. If there is a way I can cut the Ajax out, then I am all for it.

Also, I didn't include the email address and the phone number in the echo'd results because I felt it might look too messy for all of the information to show up in the results. I can certainly have them show up though and just insert a css class to hide them visually. I'm not sure what effect if any that will have on the results showing up in the form field, though.

**jscheuer1** · 09-30-2014, 04:01 PM

OK, good, so that information is there. This should work. From your original posted PHP code, replace:

PHP Code:


echo "<div id=\"search-results\">"; 

echo "<ul class=\"letter-results\">\n";  

echo "<li class=\"result-row\">" . "<a href=\"\" class=\"testclass\">"  .$first_name . " " .$last_name . "". ", &nbsp;" ."" .$church_org ."</a></li>\n"; 

echo "</ul>"; 

echo "</div>";

with:

PHP Code:


echo "<div id='search-results'>"; 

echo "<ul class='letter-results'>\n";  

echo "<li class='result-row' data-name1='$first_name' data-name2='$last_name' data-org='$church_org' data-mail='$email_address' data-phone='$phone_number'>";

echo "<a href='#' class='testclass'>$first_name $last_name, &nbsp;$church_org</a></li>\n"; 

echo "</ul>"; 

echo "</div>";

Change:

HTML Code:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

to:

HTML Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Change diocesan.com/ics/js/custom.js to:

Code:

jQuery(document).ready( function($) {
	function formfill(e) {
		var $t = $(this);
		$('#organization').val($t.data('org'));
		$('#firstName').val($t.data('name1'));
		$('#lastName').val($t.data('name2'));
		$('#email').val($t.data('mail'));
		$('#phone').val($t.data('phone'));
		e.preventDefault();
	}
	
	$('.result-row').click(formfill);
});

That should do it. The browser's cache may need to be cleared and/or the page refreshed to see changes.

Any problems or questions, let me know.

Oh, and I just realized: diocesan.com/ics/ diocesan comics?

I'm sure it's unintentional . . .