PHP and Mysql dynamic input fields by append - how to construct the query for mysql

Question

I am a total noob with php and mysql so I hope you guys can help me. I have a form that has a button where a user can add a set of input fields dynamically. I am using append to generate the fields. I was reading a tutorial about it so i understood that part. Here is the site where I based my append script on ,link here. My problem is how do I construct the foreach loop for the sql query if I have a set of fields and not just one input field like that website is showing as an example? Here is what my append looks like (I am just showing 4 fields but in total there is 16 fields per set of the append.) I want to upload the post data to a sql db. I've been searching the site but I was only seeing samples of foreach loop for a single input field not like the set that I have.

Thanks very much and I hope someone can give me an idea on how to proceed on this.

<script type="text/javascript">
    var count = 0;
    $(function(){
    $('p#add_field').click(function(){
    count += 1;
    $('#row-fluid').append(

        '<div class="span12" style="border-bottom:1px lightgray solid; padding:10px 0px;">'
            +'<div class="row-fluid"> '                         

                +'<div class="span1">'
                +'<label>&nbsp;</label>'
                +'<label class="radio"><input type="radio" id="process_where' + count + '" name="process_where[]' + '" value="Online" onClick="checkProcessType(this.value)" >Online</label>'   
                +'<label class="radio"><input type="radio" id="process_where' + count + '" name="process_where[]' + '" value="In-store" onClick="checkProcessType(this.value)" >In-store</label>'                       +'</div>'

                +'<div class="span1">'
                +'<label>&nbsp;</label>'
                +'<label class="radio"><input type="radio" id="status' + count + '" name="status[]' + '" value="Actual" onClick="checkStatus(this.value)" >Actual</label>   '
                +'<label class="radio"><input type="radio" id="status' + count + '" name="status[]' + '" value="Ghost" onClick="checkStatus(this.value)" >Ghost</label>'
                +'</div>'

                +'<div class="span1">'
                +'<label>Type</label>'
                +'<select id="upg' + count + '" name="upg[]' + '" onChange="checkExp(this.value)" class="input-small" >'
                +' <option value="" selected="&nbsp;" >&nbsp;</option>'
                +'<option value="Exp" >Exp</option>'
                +'<option value="Post" >Post</option>'
                +'<option value="Upgrade" >Upg</option>'
                +'<option value="Retail" >Retail</option>'
                +'</select>'
                +'</div>'

                +'<div id="upg' + count + '" class="span2">'
                +'<label>Full Date</label>'
                +'<input name="upg_date[]' + '" id="upg_date' + count + '" type="text" id="upg_date" placeholder="YYYY-MM-DD" class="input-small" />'
                +'<img id="jscalendar' + count + '" type="image" src="img/calendar.png" style="border-width:0px; width:16px; height:16px; background-color:#FFF; margin-bottom:-7px;" onclick="createPopCalendar3()">'
                +'</div>'

Vikas Umrao · Accepted Answer · 2012-11-02 15:39:39Z

1

And Change your php submission page like this:

if(is_array($_POST[counter]))
{
$count=count($_POST[counter]);

for($i=0;$i<=$count;$i++)
{


$process_where=$_POST["process_where".$i.""];
$status=$_POST["status".$i.""];
$upg=$_POST["upg".$i.""];
$upg_date=$_POST["upg_date".i.""];

if($process_where !="")
{
//Query Run Here
  $query="insert into tablename (process_where,status,upg,upg_date) values ('".$process_where."','".$status."','".$upg."','".$upg_date."')";
 mysql_query($query) or die(mysql_error());
}




}

}

edited Nov 2, 2012 at 15:39

answered Nov 2, 2012 at 8:16

Vikas Umrao

2,5801 gold badge17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Renee Cribe Over a year ago

Hi @VikasU For some reason I can only echo $count if I remove the whole for ($i) loop and the value is correct that the $count is counting the number of times I appended the input set.

Vikas Umrao Over a year ago

I have edited the code now check the value of $count and loop

Renee Cribe Over a year ago

Yey it works!! Thanks very much @VikasU. So it was just missing the "i" in the for loop condition for the increment?

Vikas Umrao · Accepted Answer · 2012-11-01 11:38:39Z

0

You can do like this.On form submission check this code:

if(is_array($_POST[process_where]))
{


foreach($_POST[process_where] as $key=>$val)
{

$process_where=$_POST[process_where][$key];
$status=$_POST[status][$key];
$upg=$_POST[upg][$key];
$upg_date=$_POST[upg_date][$key];

//Query Run Here
  $query="insert into tablename (process_where,status,upg,upg_date) values ('".$process_where."','".$status."','".$upg."','".$upg_date."')";
 mysql_query($query) or die(mysql_error());




}

}

edited Nov 1, 2012 at 11:38

answered Nov 1, 2012 at 11:28

Vikas Umrao

2,5801 gold badge17 silver badges23 bronze badges

2 Comments

Renee Cribe Over a year ago

Thanks Vikas. It seems simple enough and I actually understood what you have posted. I'll test it out as soon as I get home.

Renee Cribe Over a year ago

Thanks Vikas it works well my only issue now is that for those first two radio boxes "process_where" and "status" when I append another set whatever radio button i select on the first set it won't let me select any of the 2nd set or it will check the button on the 2nd set but leave the radio buttons on the first set unchecked. Any help would be appreciated

Vikas Umrao · Accepted Answer · 2012-11-02 06:36:14Z

0

Change your javascript as:

<script type="text/javascript">
    var count = 0;
    $(function(){
    $('p#add_field').click(function(){
    count += 1;
    $('#row-fluid').append(

        '<div class="span12" style="border-bottom:1px lightgray solid; padding:10px 0px;">'
            +'<div class="row-fluid"> '                         

                +'<div class="span1">'
                +'<label>&nbsp;</label>'
                +'<label class="radio"><input type="radio" id="process_where' + count + '" name="process_where' + count +'" value="Online" onClick="checkProcessType(this.value)" >Online</label>'   
                +'<label class="radio"><input type="radio" id="process_where' + count + '" name="process_where' + count +'" value="In-store" onClick="checkProcessType(this.value)" >In-store</label>'                       +'</div>'

                +'<div class="span1">'
                +'<label>&nbsp;</label>'
                +'<label class="radio"><input type="radio" id="status' + count + '" name="status' + count +'" value="Actual" onClick="checkStatus(this.value)" >Actual</label>   '
                +'<label class="radio"><input type="radio" id="status' + count + '" name="status' + count +'" value="Ghost" onClick="checkStatus(this.value)" >Ghost</label>'
                +'</div>'

                +'<div class="span1">'
                +'<label>Type</label>'
                +'<select id="upg' + count + '" name="upg' + count +'" onChange="checkExp(this.value)" class="input-small" >'
                +' <option value="" selected="&nbsp;" >&nbsp;</option>'
                +'<option value="Exp" >Exp</option>'
                +'<option value="Post" >Post</option>'
                +'<option value="Upgrade" >Upg</option>'
                +'<option value="Retail" >Retail</option>'
                +'</select>'
                +'</div>'

                +'<div id="upg' + count + '" class="span2">'
                +'<label>Full Date</label>'
                +'<input name="upg_date' + count +'" id="upg_date' + count + '" type="text" id="upg_date" placeholder="YYYY-MM-DD" class="input-small" />'
                +'<img id="jscalendar' + count + '" type="image" src="img/calendar.png" style="border-width:0px; width:16px; height:16px; background-color:#FFF; margin-bottom:-7px;" onclick="createPopCalendar3()">'
                +'<input type="hidden" name="counter[]" value="1"></div>'

And Change your php submission page like this:

if(is_array($_POST[counter]))
{


foreach($_POST[counter] as $key=>$val)
{


$process_where=$_POST["process_where".$key.""];
$status=$_POST["status".$key.""];
$upg=$_POST["upg".$key.""];
$upg_date=$_POST["upg_date".$key.""];

if($process_where !="")
{
//Query Run Here
  $query="insert into tablename (process_where,status,upg,upg_date) values ('".$process_where."','".$status."','".$upg."','".$upg_date."')";
 mysql_query($query) or die(mysql_error());
}




}

}

answered Nov 2, 2012 at 6:36

Vikas Umrao

2,5801 gold badge17 silver badges23 bronze badges

7 Comments

Renee Cribe Over a year ago

Thanks again @Vikas Umrao, the new append script definitely fixed the issue with the radio buttons but when I submit the data to the db only the first append set gets submitted. I understood the logic of the changes you made but quick question what does this condition mean if($process_where !="")

Vikas Umrao Over a year ago

Please check the value of check count,it is increasing or not ? i think it is not increasing.......make it increase on click on one row....

Vikas Umrao Over a year ago

Add One field in the form say <input type='hidden' id='counter_increase' value='0'> .Place this field before </form> tag.Then replace var count = 0; from var count=document.getElementById('counter_increase').value(); document.getElementById('counter_increase').value=1*count+1*1;

Renee Cribe Over a year ago

Thank you for replying. The check count is increasing. I checked using firebug and the name/value of the field becomes process_where1, process_where2 and so on for every set

Renee Cribe Over a year ago

Hi Vikas, I didn't understand your last comment about adding one field before the </form> tag.Can you please elaborate a bit more on that? Thanks very much.

|

John Kugelman · Accepted Answer · 2012-11-02 16:01:52Z

0

to simplify it, if I do this nothing prints.

if(is_array($_POST[counter]))
{
$count=count($_POST[counter]);
echo $count;

    for($i=0;$i<=$count;$i++)
{   

    echo "The number is " . $i . "<br />";

}

}

But if I do this, $count prints just fine.

if(is_array($_POST[counter]))
{
$count=count($_POST[counter]);
echo $count;

}

edited Nov 2, 2012 at 16:01

John Kugelman

364k70 gold badges555 silver badges600 bronze badges

answered Nov 2, 2012 at 15:39

Renee Cribe

3251 gold badge4 silver badges14 bronze badges

Comments

Vikas Umrao · Accepted Answer · 2012-11-02 16:02:01Z

0

Please upload the edited version after submission

if(is_array($_POST[counter]))
{
$count=count($_POST[counter]);

for($i=0;$i<=$count;$i++)
{


$process_where=$_POST["process_where".$i.""];
$status=$_POST["status".$i.""];
$upg=$_POST["upg".$i.""];
$upg_date=$_POST["upg_date".i.""];

if($process_where !="")
{
//Query Run Here
  $query="insert into tablename (process_where,status,upg,upg_date) values ('".$process_where."','".$status."','".$upg."','".$upg_date."')";
 mysql_query($query) or die(mysql_error());
}




}

}

answered Nov 2, 2012 at 16:02

Vikas Umrao

2,5801 gold badge17 silver badges23 bronze badges

Collectives™ on Stack Overflow

PHP and Mysql dynamic input fields by append - how to construct the query for mysql

5 Answers 5

3 Comments

2 Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related