#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2018
    Posts
    11
    Rep Power
    0

    Submitting dynamically created forms


    I have a form where a user will be inputting one to many rows/lines of data into a form. While inputting a row/line the user may have a need to obtain information about a value within a single row without submitting the entire form. I understand, as shown, this can be done using ajax. The user may never have a need to perform this individual row action and may simply fill out the entire form and submit all information in the form with one single action. I have been able to achieve this with the following code however it is very static and the user will have the ability to add rows to the form themselves dynamically. I may have the need to have several hundred rows. Does anyone have a better approach for accomplishing this or any advice on how to make the current logic more dynamic? It is worth noting I know very little about javascript or ajax.

    Code:
    <head>
    	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    	<script>
    		function line1()
    		{
    			var name1=document.getElementById('name1').value;
    			var button1=document.getElementById('button1').value;
    			var dataString1='name1='+ name1 + '&button1='+button1;
    			$.ajax({
    				type:"POST",
    				url: "submit.php",
    				data:dataString1,
    				cache:false,
    				success: function(html){
    					$('#msg1').html(html);
    			}
    			})
    			return false;
    		}
    		
    		function line2()
    		{
    			var name2=document.getElementById('name2').value;
    			var button2=document.getElementById('button2').value;
    			var dataString2='name2='+ name2 + '&button2='+button2;
    			$.ajax({
    				type:"POST",
    				url: "submit.php",
    				data:dataString2,
    				cache:false,
    				success: function(html){
    					$('#msg2').html(html);
    			}
    			})
    			return false;
    		}
    		
    		function submitAll()
    		{
    			var name1=document.getElementById('name1').value;
    			var name2=document.getElementById('name2').value;
    			var buttonAll=document.getElementById('buttonAll').value;
    			var dataStringAll='name1='+name1+'&name2='+name2+'&buttonAll='+buttonAll;
    			$.ajax({
    				type:"POST",
    				url: "submit.php",
    				data:dataStringAll,
    				cache:false,
    				success: function(html){
    					$('#msgAll').html(html);
    			}
    			})
    			return false;
    		}
    	</script>
    </head>
    <body>
    	
    <form>
    Row 1<input type="text" id="name1">
    	<button value="1" id="button1" onclick="return line1()">Details</button>
    <p id="msg1"></p>
    Row 2<input type="text" id="name2">
    	<button type="submit" value="2" id="button2" onclick="return line2()">Details</button>
    <p id="msg2"></p>
    	<button type="submit" value="All" id="buttonAll" onclick="return submitAll()">Submit Form</button>
    <p id="msgAll"></p>
    </form>

    submit.php
    PHP Code:
    $name1 $_POST['name1'];
    $name2 $_POST['name2'];
    $button1 $_POST['button1'];
    $button2 $_POST['button2'];
    $buttonAll $_POST['buttonAll'];

    echo 
    $name1."<br>";
    echo 
    $name2."<br>";
    echo 
    $button1."<br>";
    echo 
    $button2."<br>";

    if(
    $buttonAll == 'All'){
        echo 
    "Entire Form was submitted";

  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    8
    Rep Power
    0
    A lot of people have looked at your post and me too (briefly). What you really need to do is take the time to read one of many many good articles out there on the web and learn a bit about ajax and whatever other concepts you need to get started with all this. What you've asked in this question is for someone to complete a task for you or to write an article just for this specific problem. But really, your article is already out there. Not sure where you are, but it just takes a little investment of time and I'm sure you will be on your way. Good luck.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2016
    Posts
    142
    Rep Power
    66
    If you have several 10's or 100's of pieces of new data to enter and the data is already in a digital format or it would be more efficient to enter it en-mass using a text editor, spreadsheet, or just type it into a single textarea in a form, you should just create and upload a file containing the data or type (copy/paste) it directly into one field, and let the server-side code parse the data and use it. This will save a lot of the clicking and typing that would be needed to enter the data into individual form fields. If the server-side parsing of the data finds errors (duplicates, invalid format or value), it can produce a form with the values in individual form fields for corrections to be made. This form can then be submitted.

    If you have a smaller amount of new data to enter, you can initially output a small number of empty rows of form fields, with a button to dynamically add a new row using javascript. There are countless examples posted on the web on how to dynamically add form fields. However, I recommend that you use a 'template' method, where the first row of form fields are contained within a <div></div>, that becomes a template to use and the dynamic add a row javascript copies the html from this div and appends it to the rest of the fields. This will allow the code to work for any form field definition, since it is making a copy of whatever has been output on the page as the first row of fields. The alternative is to hard-code, inside the javascript, the html making up the form fields. This method will require that you find and edit the javascript every time you make a change to the form fields.

    It's not clear what your 'details' button is for, but if it is doing something like check if the entered data already exists, you can either do this en-mass once the form has been submitted or you can 'automatically' do this as the data is being typed in the form field using ajax auto-suggest code (there are countless examples on the web on how to do this.)

    The key to eliminating the hard-coded 1, 2, ... ids in the javascript is to use the jquery this selector to reference the current html element.

    For the final "submit all" ajax code, you can capture all the form data using the jquery .serialize method. There's no need to know or list all the form fields in the code.

    The form fields should have name attributes that are arrays - name='name[]', rather than sequentially numbered names. This will cause the data to be submitted as arrays and you can use php's array functions to operate on the data.

    It's not clear why you are including the button name and value as part of the individual ajax data, since entering multiple pieces of new data is most likely 'position neutral'. If you don't need a piece of data, don't write code for it.
    Last edited by DSmabismad; February 27th, 2018 at 08:51 AM.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2018
    Posts
    11
    Rep Power
    0
    Thank you DSmabismad. Using the jquery this selector is what I was looking for. I will read up on that and see if I can figure it out. As you said, I will also be using arrays for the submission of the form. Also, the button name was something that I had done while trying to figure out the code initially. You are correct. It needs to be removed. Thank you for starting me on a good path.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2018
    Posts
    11
    Rep Power
    0
    I have gone through quite a few JavaScript tutorials and I have done the same with ajax and I am still struggling with how to pass specific data inside a form. The problem that I am having is only the first row of information is being passed. I realize that if I were to wrap each row in its own form I would then see information pertaining to that specific row/item but that is not an option because the entire form would need to be submitted once complete. I have reviwed the this attribute but it seems that the information would be realative to the button not the text that was entered into the item text box.

    Code:
    <form>		
    <input type="text" name="qty[]"><input type="text" id="item[]"><button id="0" class="commonClass" onclick="lineInfo()">></button>
    <br>
    <input type="text" name="qty[]"><input type="text" id="item[]"><button id="1" class="commonClass" onclick="lineInfo()">></button>
    <br>
    <input type="text" name="qty[]"><input type="text" id="item[]"><button id="2" class="commonClass" onclick="lineInfo()">></button>
    </form>
    Code:
    function lineInfo()
    		{
    			var item=document.getElementById('item[]').value;
    			var dataString='item='+ item;
    			$.ajax({
    				type:"POST",
    				url: "submit.php",
    				data:dataString,
    				cache:false,
    				success: function(html){
    					$('#msg1').html(html);
    			}
    			})
    			return false;
    		}
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2018
    Posts
    11
    Rep Power
    0
    I figured out a solution myself. I turned the text box into a clickable event once the user enters information into the text box and styled the text inside the text box to look like a hyperlink. This allowed me to completely remove the button.

    <td width="3%">1</td><td><input name="actual[]" id="actual[]" type="text" placeholder="Quantity" /></td>
    <td><input class="linkTextBox" type="text" name="itemID[]" onclick="showItemID(this.value)"></td>
    <td><input name="target[]" id="target[]" type="text" placeholder="Description" /></td>

IMN logo majestic logo threadwatch logo seochat tools logo