SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Save the text boxes values

    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. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code HTML4Strict:
    <!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):
    Code PHP:
    <?php
     
    if( isset($_POST['divs'])) {
    	$divs = explode(',', $_POST['divs']);
    	foreach( $divs as $div ) {
    		echo 'Rev\'d ' . $div .'<br />';
    	}
    }
     
    ?>

  5. #5
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.
    I do really appreciate it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •