...

View Full Version : Get textbox value into php without submitting form



mbarandao
12-21-2010, 05:22 PM
Good day all:

I want to get the value of a textbox into php without clicking the submit button. Any advice... Here is what I have
My form field:


#1
<input type="text" style=background:transparent; border:0px; name='clientid' >


This field is populated dynamically by its name with another php script in this way

#2
echo "formObj.clientid.value = '".toSafeString($inf["clientID"])."';\n";


Now I want to take the value in code#1 (name='clientid') and pass it to a php code that is in the same file as the form. Here is the php code


<?php
$name=$_POST['name'];//this is where the value of the text box mentioned is defined
include 'datalogin.php';

error_reporting(0);
error_reporting(E_ERROR | E_WARNING | E_PARSE);
//test
//get image details
$uploaddir = "images/clientsimages/";

$get_data = "SELECT i.uploadedfile, i.clientid " . " FROM images AS i, ajax_client AS a " . " WHERE i.clientid = a.clientID " . " AND a.clientID = $name";

$get_data_res = mysql_query($get_data) or die(mysql_error() . '<br>sql : '.$get_data);

if (mysql_num_rows($get_data_res) > 0)
{
while ($get_data_info = mysql_fetch_array($get_data_res))
{
$uploadedfile = $uploaddir . $get_data_info["uploadedfile"];


}
}

?>


I know this may require js, but I appreciate any help!

Rowsdower!
12-21-2010, 06:38 PM
When you say that you want to submit it "without clicking the submit button" do you actually just mean that you want to submit it without leaving the current page?

If not, then on what basis do you want to submit that data? On page load? On a timer value? Please specify.

If what you mean to say is that you want to submit without leaving the current page then this is an AJAX project. Is there any particular reason that you *have to* submit the data to the same page or can you submit it to a separate handler page that returns only the results you need (as opposed to returning the entire page's code all over again)?

In either case, what you will need to do is use javascript's http request to send the data to the server. These pages will provide some basic guidance:

http://www.w3schools.com/ajax/ajax_intro.asp
http://www.w3schools.com/XML/xml_parser.asp

mbarandao
12-21-2010, 07:40 PM
Thanks for the reply. I don't really need to submit the form as the data on the html form are loaded load using ajax.

I'm trying to pass the value of one of the textbox that is loaded via ajax to a php code that is embedded in the same file.

This is the php code:


<?php
$name=$_POST['name'];//this is where the value of the text box mentioned is defined
include 'datalogin.php';

error_reporting(0);
error_reporting(E_ERROR | E_WARNING | E_PARSE);
//test
//get image details
$uploaddir = "images/clientsimages/";

$get_data = "SELECT i.uploadedfile, i.clientid " . " FROM images AS i, ajax_client AS a " . " WHERE i.clientid = a.clientID " . " AND a.clientID = $name";

$get_data_res = mysql_query($get_data) or die(mysql_error() . '<br>sql : '.$get_data);

if (mysql_num_rows($get_data_res) > 0)
{
while ($get_data_info = mysql_fetch_array($get_data_res))
{
$uploadedfile = $uploaddir . $get_data_info["uploadedfile"];


}
}

?>
the variale name in the php is what I'm trying to pass from the form as the this input field is loaded:



<input type="text" style=background:transparent; border:0px; name='clientid' >

Again the value for name is actually populated from ajax. And in the html rendered form the name='clientid would be name= dg9642. It is this (dg9642) that I want to pass to php without reloading the page.

I hope this makes some sense...

Rowsdower!
12-21-2010, 07:53 PM
OK, so you truly don't want the user to have to press ANYTHING before this data is sent to the server? Do I understand that correctly?

I'm really confused. If your name attribute is generated by the server and then sent to the user but NOT ever submitted later on in the process, then why not just update the $_SESSION variable with the value during your initial AJAX call and skip the second AJAX call completely? Or am I way off track for what you're doing?

My head hurts...

mbarandao
12-21-2010, 08:25 PM
I appreciate the reply --my apology for the head pain. As I'm new to much of this and Learning on the fly, what you write may be on track in relation to my need. I've been trying to accomplish this for some days now and I'm at my wits-ends. I suspect that you have an understanding of my situation... If, I may, let me strengthen my explanation.

The form is a client look-up application. The user enters a value in one field and on onkeyup the rest of the data is populated --via ajax. This process works fine!

I have made the task a bit more complicated by adding an image display in the form; whereas the image is retrieved from both a directory(image data) and mysql(image name) and displayed in the form based. The variable used to retrieve the name of the image from db is the value of one the form input (ie: <input type="text" style=background:transparent; border:0px; name='clientid' >). The php code is for this purpose.

I know this maybe a bit unorthodox, but I see no other way of achieving this task.

Rowsdower!
12-21-2010, 09:02 PM
What you are describing sounds like a "personal image" (or whatever they call them) that some sites use during user authentication. In general the user enters their username and submits, then the server sends a response to set up a password field and displays that user's "personal image" so that the user can be assured that they are truly accessing the intended site as opposed to a phishing site.

If this is something like what you are trying to do, and if you want to display that image without giving away the file's location then what you can do is set up a PHP page, say "image_display.php" and then use that file - along with any necessary $_GET variable string - as the image's src attribute.

So the image tag generated would look something like this:

<img src="/image_display.php?user=3i9fanf983naf9nf3nva89" alt="Your Personal Image" />

Then, in "image_display.php" you have a MySQL hook to look up the path to the user's selected personal image. Once located, the image_display file can send header text and send the file contents of the image directly, which means that the user never sees the actual filepath.

Is this something like what you are talking about?

mbarandao
12-21-2010, 09:17 PM
Actually, what you describe is not the samething I'm doing. Here is my entire code for what I'm doing... see if it makes sense to you.


<?php
include('auth.php');
//$clientimage='images/clientsimages/';
?>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Quick Customer LookUp</title>
<style type="text/css">
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
height:100%;
background-color: #FFF;
margin:0px;
padding:0px;
background-image:url;
background-repeat:no-repeat;
padding-top:85px;
}

fieldset{
width:500px;
margin-left:10px;
}

</style>
<script type="text/javascript" src="/AJAX/ajax.js"></script>
<script type="text/javascript">

var ajax = new sack();
var currentClientID=false;
function getClientData()
{
var clientId = document.getElementById('clientID').value.replace(/[^0-9|a-z|A-Z]/g,'');//here to incorporate the client id with numbers and letters
if(clientId.length >0 && clientId!=currentClientID){//here to change the client id lenght
currentClientID = clientId
ajax.requestFile = 'getClient.php?getClientId='+clientId; // Specifying which file to get
ajax.onCompletion = showClientData; // Specify function that will be executed after file has been found
ajax.runAJAX(); // Execute AJAX function
}

}

function showClientData()
{
var formObj = document.forms['clientForm'];
eval(ajax.response);
//ajax.getElementByID().response;
}


function initFormEvents()
{
document.getElementById('clientID').onblur = getClientData;
document.getElementById('clientID').focus();
}
//window.onload = initFormEvents;
</script>
<!--this script redirect the page when there is no activities on this page for 1 minute --BEGINS-->
<script type="text/javascript">
var timer;
//window.onload= document.onmousemove= document.onkeypress= function()
{
clearTimeout(timer);
timer=setTimeout(function(){location= 'home.php'},600000);
}
</script>
<!--this script redirect the page when there is no activities on this page for 1 minute --ENDS-->
<!--<script language=JavaScript>
var message="Function Disabled!";

function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")
</script>-->
<style>
#servicedesc {
position: absolute;
top: 260px;
right: 13px;
padding-right: 0px;
width: 499px;
height: 195px;
color: #FF0000;//#99CC00;
vertical-align: top;
text-align: left;
background-color: #FDFCDC;
padding-bottom: 0px;
z-index: 10;
//border: 1px dotted #FDFCDC;

}
a:hover {
color: #0000FF;//#99CC00;
}

#menuoption {
position: absolute;
top: 770px;
right: 250px;
padding-right: 0px;
width: 470px;
height: 10px;
vertical-align: top;
text-align: center;
background-color: ;
padding-bottom: 0px;
z-index: 10;
//border: 1px dotted #FDFCDC;
}



#instruct {
position: absolute;
top: 655px;
left: 10px;
padding-right: 0px;
width: 350px;
height: 90px;
vertical-align: top;
text-align: left;
background-color: #EBEBEB ;
padding-bottom: 0px;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
z-index: 0;
border: 2px solid #FFFAF0;

}
h5 {
color: #FF0000;//#99CC00;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #E6E8ED;
}

#logos {
position: absolute;
top: 605px;
right: 70px;
padding-right: 0px;
width: 185px;
height: 75px;
vertical-align: top;
text-align: center;
background-color: ;
padding-bottom: 0px;
z-index: 10;

}
a.button {
text-decoration: none;
padding: 3px 5px;
background-color: white;
border: outset 3px silver;
font: normal 12px arial, sans-serif;
color: blue;
}
a.button:active {
background-position: right;
color: #777;
outline: blue; /* hide dotted outline in Firefox */
}

a.button:active span {
background-position: bottom right;
padding: 15px 0 10px 15px; /* push text down 4px */
}

a.button:hover {
background-position: bottom right;
color: #172;
outline: red; /* hide dotted outline in Firefox */

</style>
</head>

<body onLoad="initFormEvents()"; "document.onmousemove= document.onkeypress= function()" style="background-color: #C0C0C0" topmargin="6" marginheight="6">
<div style="position: absolute; width: 1116px; height: 100px; z-index: 2; left: 11px; top: 27px; background-color: #00FFFF" id="layer2">
<img border="0" src="transmission-repair.png" width="1117" height="100"></div>
<br>
<p>&nbsp;</p>

<form name="clientForm" action="client_information.php" method="post"> <!--ajax-client_lookup.html-->
<input type="hidden" style=background:transparent; border:0px; name='clientid' >
<?php
include 'datalogin.php';

error_reporting(0);
error_reporting(E_ERROR | E_WARNING | E_PARSE);
//test
//get image details
$uploaddir = "images/clientsimages/";

$get_data = "SELECT i.uploadedfile, i.clientid " . " FROM images AS i, ajax_client AS a " . " WHERE i.clientid = a.clientID " . " AND a.clientID = 'mossa01'";

$get_data_res = mysql_query($get_data) or die(mysql_error() . '<br>sql : '.$get_data);

if (mysql_num_rows($get_data_res) > 0)
{
while ($get_data_info = mysql_fetch_array($get_data_res))
{
$uploadedfile = $uploaddir . $get_data_info["uploadedfile"];

// and, *IF* you need these for other purposes:
//$clientID = $get_data_info["clientid"];
//$platenumber = $get_data_info["clientid"];
// but don't bother with them if you don't need them!

//echo '<image src="' . $uploadedfile . '" />'; // OR SIMILAR!!

}
}

//test
//$name=$_POST['uploadedfile'];
//echo $name;
$filename= "<input type=\"hidden\" style=background:transparent; border:0px; name='uploadedfile' >";
//echo $filename;
$clientimage='images/clientsimages/'.$filename;
//$newfile = $filename.'mb.jpg';
//echo $newfile;
?>
<fieldset style="width: 100%; height: 470">
<legend align="left"><b><font size="4" color="#FF0000">Client information</font></b></legend>
<div style="position: absolute; width: 115px; height: 140px; z-index: 3; left: 430px; top: 230px; background-transparent:; bottom:-7" id="layer3">
<DIV style="position: absolute; left: 4px; top: 7px" id="uploadedfile" ><image name="uploadedfile" src=<?php echo "' $uploadedfile . '"?>' border="1" width="104" height="119" ></DIV>
<!--<image src='' border="1" width="104" height="119" name="uploadedfile"-->
&nbsp;</div>
<table width="1142">
<tr>
<td><label for="clientID">License Plate Number:</label></td>
<td>
<input name="clientID" id="clientID" size="17" maxlength="16" style="background-color: #00FFFF" value="License Plate#"> &nbsp;&nbsp;
<a class="button" href='#'><span>CLICK TO SEARCH</span></a>
</b></td>
<td>
<p align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>
<div style="position: absolute; width: 519px; height: 455px; z-index: 1; left: 621px; top: 192px; background-color:#FFFFFF" id="layer1">

<table border="0" width="100%" height="372">
<tr>
<td height="26">
<p align="center"><font size="4">Vehicle Details<hr color="#C0C0C0" size="1">
</font></td>
</tr>
<tr>
<td VALIGN="top" width="1%" style="border-left: 2px dotted" color="#CCCCCC;">
<p align="right"><label for="theDate">Customer Since:</label>
<input type="text" name="theDate" size="20" style="padding: 0" disabled="true"></p>
<p align="left">
<label for="dhtmlgoodies_category">Make:</label>
<input type="text" name="dhtmlgoodies_category" id="dhtmlgoodies_category" size="14" style="padding: 0" disabled="true">
<label for="dhtmlgoodies_subcategory">Model:</label>
<input type="text" name="dhtmlgoodies_subcategory" size="15" style="padding: 0" disabled="true">
<label for="caryear">Year:</label>
<input type="text" name="caryear" size="5" style="padding: 0" disabled="true"></p>
<label for="previousmileage">Last Recorded Mileage:</label>
<input type="text" name="previousmileage" id="previousmileage" size="20" disabled="true"><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="drivenmileage">Driven Miles
between the last two visits:</label>
<input type="text" name="drivenmileage" id="drivenmileage" size="5" disabled="true">
<br>
<label for="servicearea">We Last Worked on your vehicle in this area:</label>
<input type="text" name="servicearea" size="20" style="padding: 0" disabled="true"><br>
<br>
<label for="servicedesc">Service History:</label>
&nbsp;
<!--<div id="servicedesc" name="servicedesc"></div> -->
<!--<textarea name="servicedesc" id="servicedesc" cols=60 rows=12 disabled="true" style="position: absolute; right: 13; top: 260"></textarea></td>-->
<textarea name="servicedesc" id="servicedesc" cols=60 rows=12 disabled="true" style="position: absolute; right: 13; top: 260"></textarea></td>
</tr>
</table>

</div>
</td>
</tr>
<tr>
<td><label for="firstname">First name:</label></td>
<td>
<input name="firstname" id="firstname" size="20" maxlength="255" disabled="true"></td>
<td>
&nbsp;</td>
</tr>
<tr>
<td><label for="lastname">Last name:</label></td>
<td>
<input name="lastname" id="lastname" size="20" maxlength="255" disabled="true"></td>
<td>
&nbsp;</td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td>
<input name="address" id="address" size="20" maxlength="255" disabled="true"></td>
<td>
&nbsp;</td>
</tr>
<tr>
<td><label for="zipcode">Zip code:</label></td>
<td><input name="zipcode" id="zipcode" size="8" maxlength="5" disabled="true"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td><label for="city">City:</label></td>
<td><input name="city" id="city" size="20" maxlength="255" disabled="true"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
</tr>
<tr>
<td><label for="state">State:</label></td>
<td>
<input name="state" id="state" size="20" maxlength="255" disabled="true"></td>
<td>
&nbsp;</td>
</tr>
<tr>
<td><label for="tel_number">Phone #:</label></td>
<td>
<input name="areacode" id="areacode" size="3" maxlength="3" disabled="true">-<input name="phoneprefix" id="phoneprefix" size="3" maxlength="3" disabled="true">-<input name="phonesufix" id="phonesufix" size="4" maxlength="4" disabled="true"></td>
</tr>

<tr>
<td><label for="email">Email:</label></td>
<td>
<input name="email" id="email" size="42" maxlength="25" disabled="true"></td>
<td>
&nbsp;</td>
</tr>
<tr>
<td><label for="cell_number">Alt. Phone#:</label></td>
<td>
<input name="cellareacode" id="cellareacode" size="3" maxlength="3" disabled="true">-<input name="cellprefix" id="cellprefix" size="3" maxlength="3" disabled="true">-<input name="cellsufix" id="cellsufix" size="4" maxlength="4" disabled="true"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td><label for="commentonclient">Special Comment on Client:</label></td>
<td>
<p align="left">
<textarea name="commentonclient" id="commentonclient" cols=36 rows=6 disabled="true"></textarea>
</tr>
<td>
&nbsp;</tr>
</table>
</form>
<div id="instruct"><h5>INSTRUCTIONS:</h5>TYPE LICENSE PLATE NUMBER AND HIT TAB KEY <p>NOTE: NO CHANGES ARE MADE ON THIS SCREEN. USE EDIT CLIENT FOR SUCH TASK!</p></div>
&nbsp;&nbsp;</fieldset>
<td>&nbsp;</td>
<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div id="menuoption"><a href="home.php"> RETURN TO MAIN</a>
--|-- <a href="addclient.php">ADD NEW CLIENT </a>&nbsp;--|--
<a href="addentry.php">EDIT ClIENT</a>&nbsp;&nbsp;&nbsp;
<br></div>
<div id="logos"><p align="right">&nbsp;<i><font size="2" color="#FFFFFF"><img border="0" src="images/systempowered3.png" ></font></p></div>
</body></html></table>

Rowsdower!
12-22-2010, 02:21 PM
I guess my question is still this: why does the AJAX call have to be made to this same page?

If you understand event handlers and how to make AJAX requests (and it seems as though you do), then all you really need to do in this case is set up a separate PHP page to hit with your second AJAX request so that it returns only the image source that you are looking for. Then you just store that response as a variable and set your image src equal to that text string.

If I understand the pieces of your code that I have, then this will basically consist of taking this part:


<?php
include 'datalogin.php';

error_reporting(0);
error_reporting(E_ERROR | E_WARNING | E_PARSE);
//test
//get image details
$uploaddir = "images/clientsimages/";

$get_data = "SELECT i.uploadedfile, i.clientid " . " FROM images AS i, ajax_client AS a " . " WHERE i.clientid = a.clientID " . " AND a.clientID = 'mossa01'";

$get_data_res = mysql_query($get_data) or die(mysql_error() . '<br>sql : '.$get_data);

if (mysql_num_rows($get_data_res) > 0)
{
while ($get_data_info = mysql_fetch_array($get_data_res))
{
$uploadedfile = $uploaddir . $get_data_info["uploadedfile"];

// and, *IF* you need these for other purposes:
//$clientID = $get_data_info["clientid"];
//$platenumber = $get_data_info["clientid"];
// but don't bother with them if you don't need them!

//echo '<image src="' . $uploadedfile . '" />'; // OR SIMILAR!!


print $uploadedfile; //This is all you need to do to have the AJAX request send the file source to the user...
//You should probably check to make sure that the file exists on your server before you try to send that image source to the user. Otherwise, they will get a blank box from a missing resource.
//You might also want to set up a default image and then, if no database results are returned, present that image source to the user rather than a blank source which would also create a "missing image" box in the page.


}
}
?>

And plopping it into a separate file and using AJAX to send variables there for processing. Unless it is already part of datalogin.php you will of course have to add some code to the PHP above to handle your $_POST or $_GET variables, whichever is appropriate for your approach.

Your problem right now appears to be that you are trying to get your javascript to talk to your PHP in some cases while the page is still loading - which doesn't work. You will need to set the initial page load up to send no image or a default image for "uploadedfile" and then change the source code with an AJAX request to a page other than this same page you are viewing. Technically you could hit the same page with the AJAX request, but the coding to differentiate between a basic page load and an AJAX request - and then filtering what you return to the browser based on that difference - is not worth your time. Just make the image checking script on a different file and hit that instead.

I should also mention that you seem to have quotation marks out of order on some of your attributes. Most notable for me was this case:


<body onLoad="initFormEvents()"; "document.onmousemove= document.onkeypress= function()" style="background-color: #C0C0C0" topmargin="6" marginheight="6">

This makes no sense and might play havoc with your javascript where onload, onclick, or other event handlers are involved. This should be set up more like the following:


<body onLoad="initFormEvents();document.onmousemove= document.onkeypress= function();" style="background-color: #C0C0C0" topmargin="6" marginheight="6">

I believe that function() is what you have set up to send the user to "home.php" after 60 seconds. You should probably set up a proper name for that function and use that instead of "function()".

You might also want to stop by the HTML validator (http://validator.w3.org/) and tidy things up a bit. In cases like this valid HTML is important for more than mere presentational reasons.

mbarandao
12-22-2010, 03:09 PM
Thank you for the thoughtful response, Rowsdower. I will attempt to implement your suggestion today. I do appreciated the detailed explanation.

I'll advise when I have attempted.

Again, thank you!
Best



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum