Save the text boxes values

JavaScript
1

I am doing a website project and I am currently designing product page.

I have created the text boxes dynamically(as many boxes as the user wants) and he can drag and drop the text boxes in the page.

I need to create a dynamic line from one text boxes to other text boxes and delete the test boxes which the user does not want. I have created the dynamic graphic line.

I know the values of the text boxes can be saved using php in the backend.

But is there any way the values with the dynamically created boxes(with <div></div> elements, not with the text boxes) with values and graphics line can be saved online and the user when log-in again can retrieve the work that he saved? Can we code this either in javascript/php?

2

But is there any way the values with the dynamically created boxes(with <div></div> elements, not with the text boxes) with values and graphics line can be saved online and the user when log-in again can retrieve the work that he saved? Can we code this either in javascript/php?

Not really sure I get what you mean, but you can store the innerHTML from the divs to PHP. You may have to give each div an identifier then use Ajax to save the information. I believe (guessing really) in the setup you describe, once the information is placed, the “lines” should show, so there wouldn’t be a need to save anything.

3

Thanks for your information.

So can we call the div id like the same way we call text boxes id with post or get method? I have made the page in such a way that the div elements will be the same (so the div id will be the same)since the user can click the button to enter the text as many times as he wants and he then drag and drop the div elements in the workspace and draw a graphic line from one div elements to another and delete
the div elements that the user does not want.

So do we need to create an array for the div elements? I have made the page where the user can enter text in the div elements and drag and drop and delete the div elements he does not need and draw a graphic line dynamically. I could not find a way to save the data in
the backend.

I have no knowledge about AJAX. Can we do this in Php?

I have made a graphic lines so that the user can draw the graphics line dynamically from one div elements to another div elements.
Is there a way to save these graphics line in Php or Javascript so that when the user login again, the user can view the text in the
Div elements with the graphics line he drew the previous time from one div elements to another.

Looking forward for your reply.

4

Here is an example using AJAX (with jQuery). Here when the form is submitted, the values from the .dynamicDiv’s are put into an array and sent to the PHP script for processing. Here, I added a callback from the script and a return false; to show it was received and processed by PHP to further illustrate the JS -> PHP, then PHP-> JS.

HTML page:

<!DOCTYPE html>
<html>
	<body>
		<div id="notice"></div>
		<form name="testForm">
			<input type="text" />
			<input type="submit" value="Submit" />
		</form>
		<div id="dynDivs">
			<div class="dynamicDiv">Test 1</div>		
		</div>
		<script src="../lib/js/jquery.min.js"></script>
		<script>
			// Load the additional dynamicDivs
			$('#dynDivs').append('<div class="dynamicDiv">Test 2</div>');
			$('#dynDivs').append('<div class="dynamicDiv">Test 3</div>');
			$('#dynDivs').append('<div class="dynamicDiv">Test 4</div>');
			$('#dynDivs').append('<div class="dynamicDiv">Test 5</div>');			
		
			// Store the dynamicDiv's HTML into an array
			var array = [];
			$('.dynamicDiv').each(function(i) {
				array.push($(this).html());
			});
			
			// When the form is submitted, do an AJAX request and show the result from the server
			$('form[name="testForm"]').submit(function() {
				$.post(
					'test.php', 
					'divs=' + array,
					function(data) {
						$('#notice').html(data);
					}
				);
				return false;
			});
		</script>
	</body>
</html>

PHP (for test purposes only):


<?php

if( isset($_POST['divs'])) {
	$divs = explode(',', $_POST['divs']);
	foreach( $divs as $div ) {
		echo 'Rev\\'d ' . $div .'<br />';
	}
}

?>
5

Thanks for your reply.
I do really appreciate it.