Submitting data from dynamically created form

[Agony]

So the form fields are dynamically created based off the database results with a for loop.

 

3 text inputs per row - with a value from the database.

 

Now the problem is that submitting the form this way wouldn't work - the name fields would be same and only last one would be submitted.

Turning the name filed into an array - so each is different - doesn't work ether. It will submit everything in the whole form without any way to identify which "row" was edited.

 

Multiple forms and each row with its on submit button is too bulky and ugly.

for ($i = 0; $i < $csize; $i++){    $out .= "<tr>";    $out .= "<td  style='width: 230px; padding: 7px;'>";    $out .= "<input type='text' name='category"' size='40' value='".$category[$i]['category']."'/></td>";    $out .= "<td  style='width: 230px; padding: 7px;'>";    $out .= "<input type='text' name='id' size='40' value='".$category[$i]['id']."'/></td>";    $out .= "<td  style='width: 230px; padding: 7px;'>";    $out .= "<input type='text' name='permission' size='40' value='".$category[$i]['permission']."'/></td>";    $out .= "<input type='hidden' name='org_id' value='".$category[$i]['id']."'/></td>";    $out .= "<td><a class='icon_link ".BASE_COLOR." 'href='".$_SERVER['REQUEST_URI']."&page=delete&id=".$category[$i]['id']."'><i class='icon-trash icon-large'     title='Delete Category'></i></a></td>";                          $out .= "</tr>";}

Would there be any alternative to this kind of setup? Surely the modern web has something that doesn't require you to have to submit after every row if u have some data like that to update.

 

[justsomeguy]

One option would be to use checkboxes to indicate which rows you want to update. You could use some Javascript to automatically check the box if the fields change. You'll need to give each element a unique name though. One option for that would be to make the checkboxes an array of the IDs that are being updated, and then append the ID to each form element. Get the IDs from the checkboxes, and use the IDs to get the values they entered.

[davej]

Multiple forms and each row with its on submit button is too bulky and ugly.

[...]

Would there be any alternative to this kind of setup? Surely the modern web has something that doesn't require you to have to submit after every row if u have some data like that to update.

 

I don't understand. Why would you need to tell the Php code what fields had been changed? The Php code can compare all the fields are determine which ones have changed.

[Agony]

i don't need to tell php what changed - i only want to post the ones that changed.

But if the name is as an array it would still post the whole form with all the generated "rows".

The changed results would then be used to update the database.

 

To compare it all i would ether have to pull the whole table from db and compare each result with the array i get from $_POST - all of which requires extra loops and after that i can use the new compared array to loop through and update DB for each changed value. That's a lot of extra bandwidth and delay and cpu usage for a simple task.

 

Posting only rows that did get changed would save from the first half of comparing everything to the database.

[dsonesuk]

Use for loop value to append to attribute name values

name='category0'

name='category1'

name='category2'

 

store total in hidden input

 

<input type="hidden" name="total_group_inputs" value="<?php echo $csize; ?>">

 

when form submitted retrieve 'total_group_inputs' value and create for loop to retrieve values.

[davej]

i don't need to tell php what changed - i only want to post the ones that changed.

But if the name is as an array it would still post the whole form with all the generated "rows".

The changed results would then be used to update the database.

 

To compare it all i would ether have to pull the whole table from db and compare each result with the array i get from $_POST - all of which requires extra loops and after that i can use the new compared array to loop through and update DB for each changed value. That's a lot of extra bandwidth and delay and cpu usage for a simple task.

 

I still don't understand. What simple task? Don't you need to display the entire form to the user? I'm guessing yes. So you retrieve the entire form from the database and put it on the screen -- or if you're really worried about bandwidth then send it to the client as an array via Ajax. Then Javascript builds the table and puts the form on the screen. The user makes any needed changes and clicks submit. Javascript then processes the fields and compares them to the original array and sends only the fields that have changed back to the Php code.

[Agony]

im not using JavaScript or ajax. Its an html form.

 

The data is pulled through a global/shared function and then the for loop populates the form with rows from that data.

[davej]

If you want to minimize bandwidth then you may want to use Ajax, but of course there is a tradeoff because the code to support Ajax may be larger than your form.

[Agony]

how would ajax be less bandwidth wise? it submits the same amount of data and i need to reload the same form page after update anyways to show updated data.

[dsonesuk]

You show data for submission, submit through ajax, update, then return updated results back to originating form, overwriting the original values.

[davej]

Ajax might not use less bandwidth, but Ajax is often used to reduce bandwidth. It only needs to submit the data that the user changed.

[Agony]

so i submit it over ajax.

$.ajax({   url: 'xx.php?blahblah',   type: 'post',   data: {'category': category, 'id': id},});

But how would i in that case only submit the changed values and refresh the table in return with new ones?my row 3 input names would all be arrays.

<input type='text' name='category[]' size='40' value='".$category[$i]['category']."'/>

And thee can be any unspecified number of those in the whole final table.I have very little experience with jquery/javascript so im not sure where to start with all of this.

 

EDIT:I did find that you can detect change of a textbox by using:

$('input[name="Value"]').on('input',function(e){});

But that only helps partially - i don't have static input names. They can be id1, id2, id3 id 400 etc - since its declared as id[] - and since the number of results varies i cannot predict what it will be.

Edited May 16, 2014 by Agony

[davej]

What is the overall order of events? Does the user need to log in? Does the user need to select the desired form? How large is the form?

[Agony]

login/session management is completely separate, the whole project is modular.

 

The form can be from just 10 rows in the beginning to 20+ if the user needs more.this far iv got to this:

        var results = $('[name^=id]').map(function(){               var $this = $(this);            var $defaultid = this.defaultValue;                        $($this).on('focusout',function(e){                var $id = $($this).val();                if ($id != $defaultid){                    console.log($id);                    console.log($defaultid);                    $($this).css('background-color', '#FFA07A');                                 $.ajax                ({                    url: 'index.php?action=ticket_ajax',                    type: 'post',                    data: {'id': $id, 'defaultid': $defaultid, 'page' : 'update'},                    success : function(data) {                    console.log(data);                    }                                  });                                };            });          });

one of those for each "name" field - so 3 in total.But im having issue with ajax - when i return the json it seem to have sent the default value instead.

1 999 {"id":"999","defaultid":"999"} 

1 is the new value 999 is default(random testing values).If i use console.log($id); before and it shows the $id has new value - but the same variable with ajax has default value. whats up with that?

[davej]

But the user might fill out the form and then decide they need ten more rows whose current values need to be retrieved from the database?

 

I am not a jQuery person so I can't intelligently comment on your code example above.

[Agony]

it displays all the rows currently in the database - when user adds new ones, they have default values.

 

Tho the jscript above - why would ajax get a diff value fir $id then the console.log shows just before it?

Edited May 16, 2014 by Agony

[Agony]

apparently it was a php issue i completely missed:

$id = isset( $_POST['id'] ) ? $_POST['defaultid'] : "";