Dynamic Fields js/php to MySql need to submit dynamically to the database

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • CRAYON34
    New Member
    • Aug 2014
    • 10

    Dynamic Fields js/php to MySql need to submit dynamically to the database

    I can not get the values from the javascript add row to go dynamically as a row into MySql only the form values show up as the form below as one row. I made it as an array, but no such luck, I have tried this code around a multitude of ways. I don't know what I am doing wrong, kindly write out the correct way.



    Code:
    <!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>Dynamic Fields js/php to MySql need to submit dynamically to the database</title>
    	<?php
    	require ('database.php'); 
    	?>
    	 <script type="text/javascript">
    	 var counter     =     1;
    	 var collector     =     "";
    	 
    	 function addfields(indx)
    	 {
    		 var tbl = document.getElementById('table_id');
    		 var newtr = document.createElement('tr');
    		 counter = counter + indx;
    	 
    		 newtr.setAttribute('id','tr'+counter);
    	 
    		 newtr.innerHTML = '<td><input type="checkbox" name="checkb'+counter+'" id="checkb'+counter+'" value="'+counter+'" onclick="checkme('+counter+')"></td><td><input type="text" name="text1[]"></td><td><textarea name="textarea1[]"></textarea></td>';
    	 
    		 tbl.appendChild(newtr);
    	 }
    	 
    	 function checkme(dx)
    	{
    		  collector += dx+",";
    	}
    	 
    	 function deletetherow(indx)
    	 {
    		 var col = collector.split(",");
    	 
    		 for (var i = 0; i < col.length; i++) 
    		 {
    			 var remvelem = document.getElementById('tr'+col[i]);
    			 var chckbx = document.getElementById("checkb"+col[i]);
    			 if(remvelem && chckbx.checked)
    			 {
    				 var tbl = document.getElementById('table_id');
    				tbl.removeChild(remvelem);
    			}
    		 }
    	 }
    	</script>
    	</head>
    	<body>
    	<form enctype="multipart/form-data" id="1" style="background-color:#ffffff;" action="<?php echo $_SERVER['PHP_SELF']; ?>"></form> 
    	<table id="table_id" >
    	  <tr id="tr1" class="trmain">
    	  <td>
    	  </td>
    	   <td>
    	   <input type="text" name="text1[]">
    		</td>
    		  <td>
    			<textarea name="textarea1[]"></textarea>
    		   </td>  
    		 </tr>
    	 </table>
    	<input type="button" value="Add" onClick="addfields(1);" />&nbsp;
    	<input type="button" value="Delete" onClick="deletetherow()" />
    	<input type="submit" value="Send" id="submit"  name="submit"/>
    	
    	<?php
    	if(isset($_POST['submit'])) {
    	for ($i=0; $i < count($_POST['text1']); $i++ )
    	{
    	$ced = stripslashes($_POST['text1'][$i]);
    	$erg = stripslashes($_POST['textarea1'][$i]);
    	}
    	
    	
    	$bnt = mysql_query("INSERT INTO tablename (first, second) VALUES ('$ced', '$erg')")or die('Error: '. mysql_error() );
    	$result = mysql_query($bnt);
    	}
    	
    	?>
    	 
    	</body>
    	</html>
    Last edited by Rabbit; Aug 24 '14, 12:08 AM. Reason: Please use [code] and [/code] tags when posting code or formatted data.
  • Exequiel
    Contributor
    • Jul 2012
    • 288

    #2
    I suggest you need to use ajax in order to get all the values of the fields in the row, You need to loop your insertion, I can't explain it very well, I will create a sample program for you and you can customize it. Sorry if i replied so much late. I'm so busy this past few days, I'm creating a system for the company and edit some system for machine operation, using rockwell software.

    Comment

    • CRAYON34
      New Member
      • Aug 2014
      • 10

      #3
      I understand, and will await your reply. I have beat my head around this a lot. As in my other posts to you my other script worked as such but textarea issues, so merged and no luck as with child cells no good for textarea as re-populates innnerHTML. I really don't see why there isn't easy way dynamically. Okay, please be descriptive on your Ajax method as I am new with that language.

      Comment

      • Exequiel
        Contributor
        • Jul 2012
        • 288

        #4
        This is what i've got now
        Code:
        var required_fieldz = false; //put this on the top of your initialized variables.
        Copy paste this functions
        Note 1: make sure you put required to the fields that you want to be required.

        Note 2: Download a jquery package and include it to your page, for you to use some of functions i call and to use ajax also.

        Go to this site to download jquery package. http://jquery.com/download/ and choose this Download the compressed, production jQuery 1.11.1 to download.
        Code:
        //how to save to database.
        function savedata()
        {
        	$("form#myform").serialize();//get all fields in the form
        	getrequiredfields("myform");//go to function getrequiredfields("myform") with id to check some fields that are not field up	
        	
        	if(required_fieldz == false)
        	{
        		//all fields field up. use ajax to insert and loop your insertion
        		alert("insert");
        	}
        	else
        	{
        		//some fileds not yet field up
        		alert("no");	
        	}
        }
        
        //check the required fields in the form 
        function getrequiredfields(formid)
        {
        	var x = false;
        	var y = false;
        	var z = false;
        	
        	$.each($('form#'+formid).serializeArray(), function(i, field)
        	{	
        		if($('input[name='+field.name+']').attr('required')=="required" || $('textarea[name='+field.name+']').attr('required')=="required" || $('select[name='+field.name+']').attr('required')=="required"){
        			if($('input[name='+field.name+']').val()=='')
        			{
        				$('input[name='+field.name+']').css('box-shadow','0px 0px 2px 2px #F00');
        				//alert(field.name);
        				x = true;
        			}
        			else
        			{
        				$('input[name='+field.name+']').css('box-shadow','');
        				x = false;
        			}
        			
        			
        			if($('textarea[name='+field.name+']').val()=='')
        			{
        				//alert(field.name);
        				$('textarea[name='+field.name+']').css('box-shadow','0px 0px 2px 2px #F00');
        				
        				y = true;
        			}
        			else
        			{
        				$('textarea[name='+field.name+']').css('box-shadow','');
        				y = false;
        			}
        			
        			if($('select[name='+field.name+']').val()=='')
        			{
        				//alert(field.name);
        				$('select[name='+field.name+']').css('box-shadow','0px 0px 2px 2px #F00');
        				
        				z = true;
        			}
        			else
        			{
        				$('select[name='+field.name+']').css('box-shadow','');
        				z = false;
        			}
        			
        			if( x == true || y == true || z == true )
        			{
        				required_fieldz = true;
        			}
        			else
        			{
        				required_fieldz = false;
        			}
        		}//
        	});	
        }

        Comment

        • Exequiel
          Contributor
          • Jul 2012
          • 288

          #5
          I don't code yet to the insertion of your data, i will post it if i'm finish, you can post comment if you already implement the code. :)

          Comment

          • Exequiel
            Contributor
            • Jul 2012
            • 288

            #6
            by the way put this to your submit button in your form onclick="saveda ta();" example <input type="submit" name="saveme" id="saveme" value="Save me" onclick="saveda ta();"> and take note put your form id to getrequiredfiel ds("myform"); in savedata() function just replace the myform

            Comment

            • CRAYON34
              New Member
              • Aug 2014
              • 10

              #7
              I am a bit confused with all of this. I did implement the code. I usually use the CDN url from Google for jquery as in this case, whenever I have used it (jquery). I put required in the fields I wanted required already and as mentioned with HTML 5 its' cross browser with something like this fallback http://stackoverflow.com/questions/3...ttribute-html5 and have seen work in all browsers. But, I still tried to implement this code. Now, on submit, nothing happens. I put required as just mentioned in the fields and the
              Code:
              newtr.innerHTML =
              where needed. It works like that. Anyway, if you meant something else let me know.
              Where jquery is
              Code:
              $("form#myform")
              the myform is what the name of the form was set to and the
              Code:
              ('form#'+formid)
              was in same instance gave my form the id of formid. I replaced wherever needed. I tried without also, still no result on submit, nothing happens. I don't follow you "and take note put your form id to getrequiredfiel ds("myform"); in savedata() function just replace the myform" as I did rename that with form id but still nothing on submit.

              Since I have the html required attribute then all I am really worried about is getting the data dynamically into the MySQL database as separate rows. This is the milestone now that I can't break through, we'll and that what you gave me for the required is not working for me. I can post you a mini version if your not follow me of what have done.

              Comment

              • Exequiel
                Contributor
                • Jul 2012
                • 288

                #8
                coppy paste again the entire getrequiredfiel ds() function, i made updates there.
                in savedata() function in the line with getrequiredfiel ds("myform"); the myform there is the id of your form, just replace it with the id that you put to your form. The $("form#myform" ).serialize(); we will use this later,

                Comment

                • Exequiel
                  Contributor
                  • Jul 2012
                  • 288

                  #9
                  it must be work, did you put this to your submit button as its function ?
                  Code:
                  onclick="savedata();"

                  Comment

                  • Exequiel
                    Contributor
                    • Jul 2012
                    • 288

                    #10
                    I made the sample system already. Whats your email address? I will send the files.

                    Comment

                    • Exequiel
                      Contributor
                      • Jul 2012
                      • 288

                      #11
                      You can now download the files here. http://www.mediafire.com/download/bk...8aav/bytes.rar

                      Comment

                      Working...