Get variable placed in DIV to post to a new page

The following code works with cardswipe-master (see Github) to parse a credit card from a magnetic stripe reader.

I need to get the content placed in this DIV to post to another page where I can parse the string using PHP:

<li><div type="text" id="line1" class="data"></li>

Open in new window


All code for page provided below:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<title>Cardswipe Demonstration</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="src/jquery.cardswipe.js"></script>

	<style type="text/css">
		.data { font-family: "Lucida Console", Monaco, monospace }
	</style>
</head>
<body>
	<h1>Cardswipe</h1>

	<h2>Scan result:</h2>
	
			<li><div type="text" id="line1" class="data"></li>

	<h2>Form on the Page</h2>
	<p>Scanning a card will not interfere with form fields. Type a few characters into the field below and start a scan.</p>
	<form>
		<label>Form input field: <input type="text" name="field1" class="data" /></label>
	</form>

	<script type="text/javascript">

		var success = function (data) {
			$("#status").text("Success!");
			$("#line1").text(data.line1);
		}

		var error = function () {
			$("#status").text("Failed!");
			$(".line").text("");
		}

		// Initialize the plugin with default parser and callbacks.
		//
		// Set debug to true to watch the characters get captured and the state machine transitions
		// in the javascript console. This requires a browser that supports the console.log function.
		//
		// Set firstLineOnly to true to invoke the parser after scanning the first line. This will speed up the
		// time from the start of the scan to invoking your success callback.
		$.cardswipe({
			firstLineOnly: true,
			success: success,
			error: error,
			debug: true
		});

	</script>
</body>
</html>

Open in new window

hypervisorAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rgranlundCommented:
This may help
$url = 'https://www.YOURSITE.com/';
$content = file_get_contents($url);
$first = explode( '<div id="line1">' , $content );
$second = explode("</div>" , $first[1] );

echo $second_step[0];

Open in new window

Ray PaseurCommented:
<li><div type="text" id="line1" class="data"></li>

Open in new window

All by itself, this is not valid HTML because the <div> is opened but never closed.  Is there maybe some more to this question that you can tell us about?
hypervisorAuthor Commented:
Just missing the </div> to close it.

I'm trying to get the contents of that div into a PHP variable (or alternatively post it to another page).
Ray PaseurCommented:
Makes sense.  How does the contents of that <div> get there in the first place?  As a general rule, PHP runs on the server, generates the HTML document and sends the document to the client browser.  So in the usual case, the PHP script would already know about the contents of the <div> before the <div> was incorporated into the HTML document.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mark BradyPrincipal Data EngineerCommented:
Here is a very simple example I threw together to show you how you can interact with a php page from a web page. This example using jquery.min library to send the request to the server, then alert the response. Pretty basic really but it will give you an idea.

Php file (I saved this as v0.php)
<?php
$contents = isset($_POST['contents']) ? $_POST['contents'] : 'Missing contents';
echo 'Good afternoon and welcome back ' . $contents;
?>

Open in new window


A basic web page to handle the call and response (includes your div)
<html>
	<head>
		<title>Tester</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script type="text/javascript" language="javascript">			
									
			function test() {
				// get the value of the div				
				var div_contents = document.getElementById('line1').innerHTML;
				var url = 'http://localhost/v0.php';
				$.post( 
                  url,
                  { contents: div_contents },
                  function(response) {
				  alert(response);
				  }
               );
			}			
		</script>
	</head>
	<body>
		<li><div type="text" id="line1" class="data">John Smith</div></li>
		<input type="button" value="Submit to server" onclick="test()" />
	</body>
</html>

Open in new window

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.