Page 1 of 1

post input fields withou form tag or regular submit button?

Posted: Wed May 26, 2010 9:42 am
by iansane
Hi,

I have a form that posts back to it's self and includes the form with the php vars. This works great for posting form data without redirecting the page.

However, now I'm trying to just post 4 particular fields in the form without actually submitting the form. It opens a popup and populates a new form for entering data based on what is in those 4 fields on the original form.

The below code works perfectly in that it submits the form var and then is able to echo it in a popup.

Ideally, the user would enter customer info and a bunch of other stuff, but when it comes to this one section with 4 parts they just enter the quantity and click on the "add part numbers" button. Then the popup comes up with another form populated based on the quantity that was entered in the main form. Then the user continues to fill in other data and then submits the entire form.

All is good accept you can't have a form inside a form. Other than that, the code below is good.

So my question is, How can I send those 4 fields to my testVars.php page without having them in a form tag?

Thanks for any suggestions.

Here's a quick sample code.

testPage.php:

Code: Select all

<?php
include 'testVars.php';

?>


<html>
<head><title>page</title>
<script type="text/javascript">
// pop-up  and submit function so they can both be called from submit button at the same time
var newWin = null;
function closeWin(){
	if (newWin != null){
		if(!newWin.closed)
			newWin.close();
	}
}
function popUp() {
closeWin();
var strURL = "popup.php";
var strType = 'elastic';
var strHeight = '400';
var strWidth = '275';
var strOptions="";
if (strType=="console") strOptions="resizable,height="+strHeight+",width="+strWidth;
if (strType=="fixed") strOptions="status,height="+strHeight+",width="+strWidth;
if (strType=="elastic") strOptions="toolbar,menubar,scrollbars,resizable,location,height="+strHeight+",width="+strWidth;
newWin = window.open(strURL, 'newWin', strOptions);
newWin.focus();
}
function submitForm()
{
    document.forms["myform"].submit();
}


</script>
</head>
<body>
<!--need outer form here-->
<!--several fields here not needed till final submit button-->




<form id="myform" action="page.php" method="POST">
<input type="text" name="myVar" size="25" maxlength="25"></input>
</form>
<input type="button" value="add part numbers" onclick="submitForm();popUp();"></input>





<!--more fields for final submit-->
<!--closing form tag and submit button for rest of form-->


</body>

</html>

testVars.php:

Code: Select all

<?php
session_start();
?>


<?php
/*retrieved from form "page.php"*/

$thisVar = $_POST['myVar'];

/*session variable to pass over to popup.php*/
/*including this file in both "page.php" and "popup.php" didn't work
so I'm using http_session_vars*/
$HTTP_SESSION_VARS['formdata'] = $thisVar;


/*collect the rest of the form vars when final submit*/

?>
testPopup.php:

Code: Select all

<?php

session_start();
/*retrieving data from the session variable*/
/*can create shorter  session var or use "$SESSIONS" in real scenario
for easier coding*/

$newVar = $HTTP_SESSION_VARS['formdata'];
echo $newVar;
?>

Re: post input fields withou form tag or regular submit butt

Posted: Wed May 26, 2010 3:51 pm
by iansane
I found this ajax tutorial and was able to modify it to put the textbox value into $HTTP_SESSION_VARS without redirecting or refreshing the page.

http://www.ajaxf1.com/tutorial/ajax-php.html?page=3

Just have to modify further to let me pass the name of the textbox as a parameter to the function so I can repeat it 4 times (hopefully in one "onclick" button) or make a function that calls the other function 4 times with different id's so I can just call the main function once.

Either way I've come to the conclusion that both javascript and ajax are required for this kind of thing. Sure didn't realize I'd be trying to learn 3 different languages when I started this but it is an adventure. :-)

I'll post the working code when I get it done tonight or tomorrow cause I'm seeing the question all over the place (how to send html or javascript vars to php without redirect or page refresh) and this seems to be a possible solution.

Re: post input fields withou form tag or regular submit butt

Posted: Thu May 27, 2010 12:06 am
by iansane
Ok here it is with javascript, ajax, and php. Sending variables from html form with no redirect or page refresh. Feel free to comment or tell me how to clean or shorten this process up some.

test2form.php:

Code: Select all

<?php
session_start();

?>  
   


   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
      <html xmlns="http://www.w3.org/1999/xhtml">
   
      <head>
   
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
      <title>Ajax - PHP example</title>
   
      </head>
   
       
   
      <body>
  
       
  
      <script language="javascript" type="text/javascript">
  
  
  
      // Get the HTTP Object
  
      function getHTTPObject(){
  
      if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
  
      else if (window.XMLHttpRequest) return new XMLHttpRequest();
  
      else {
  
      alert("Your browser does not support AJAX.");
  
      return null;
  
      }
  
      }
  
       
  
      // Change the value of the outputText field

      function setOutput(){
  
      if(httpObject.readyState == 4){
      
      document.getElementById('outputText').value = httpObject.responseText;
  
      }

       
  
      }
  
       
  
      // Implement business logic
  
      function doWork(ID){
  
      httpObject = getHTTPObject();
  
      if (httpObject != null) {
	 
      var httpObjectString = "test2php.php?" + ID + "=";
  
      httpObject.open("GET", httpObjectString + document.getElementById(ID).value, true);
  
      httpObject.send(null);
  
      /*httpObject.onreadystatechange = setOutput;*/
  
      }
  
      }
  
       
  
      var httpObject = null;
  
       // pop-up  and submit function so they can both be called from submit button at the same time
var newWin = null;
function closeWin(){
	if (newWin != null){
		if(!newWin.closed)
			newWin.close();
	}
}
function popUp() {
closeWin();
var strURL = "test2popup.php";
var strType = 'elastic';
var strHeight = '400';
var strWidth = '275';
var strOptions="";
if (strType=="console") strOptions="resizable,height="+strHeight+",width="+strWidth;
if (strType=="fixed") strOptions="status,height="+strHeight+",width="+strWidth;
if (strType=="elastic") strOptions="toolbar,menubar,scrollbars,resizable,location,height="+strHeight+",width="+strWidth;
newWin = window.open(strURL, 'newWin', strOptions);
newWin.focus();
}
    
</script>
  
       
  
      <form name="testForm">
  
     Input text1: <input type="text" name="inputText1" id="inputText1" />
     Input text2: <input type="text" name="inputText2" id="inputText2" />
     
  <input type="button" value="test" onclick="doWork('inputText1');doWork('inputText2');popUp();"></input>

      </form>



      </body>
  
      </html>
test2phpvars.php:

Code: Select all

 <?php

      if (isset($_GET['inputText1'])){
      $testVar1 = $_GET['inputText1'];
      session_start();
	$HTTP_SESSION_VARS['test1'] = $testVar1;
}

      if (isset($_GET['inputText2'])){
      $testVar2 = $_GET['inputText2'];
      session_start();
	$HTTP_SESSION_VARS['test2'] = $testVar2;
}

?>
test2popup.php:

Code: Select all

<?php
session_start();
?>

<?php

$var1 = $HTTP_SESSION_VARS['test1'];
$var2 = $HTTP_SESSION_VARS['test2'];


echo 'testing input 1<br />';
echo $var1;
echo '<br />';
echo 'testing input 2<br />';
echo $var2;

?>