Using Javascript to get around nested forms

JavaScript
1

Hey all,

I have a form that contains a series of records in it with a check box named as “primary_key_for_table_name” I use these checkboxes to affect multiple entries in the database such as delete or move. I would like to now have another nested form inside of this form, multiple nested forms actually but obviously you can’t have a nested form.

So I was thinking I would make another form with hidden fields in it and when checkboxes are checked I would change a hidden form element in the hidden form but I’m not sure if you can do that with an array.

Something like

<form>
  <input type="hidden" name="nest_primary_keys_for_table_name[]" />
</form>

How would I put an array of numbers into that hidden field and have it submit as an array? Is that possible? Am I going about this the worng way? Your help greatly appreciated.

2

Hi,

Wouldn’t it make more sense to have a bunch of checkboxes and pass them through to the PHP script, as is. Then you could do whatever is needed on the server (as opposed to playing around with hidden fields on the client-side).

Could you maybe provide a small sample of HTML demonstrating the checkboxes, as well as an example of how you need the data on the server?

1 Like
3

Yes, but how can I have two nested forms. The first main form does just have a series of checkboxes that submit as an array like multiple input checkboxes

The issue I’m having is that I also want to be able to submit thing like

<input type="checkbox" name="forum_posts[]" value="xx" />

but in a different form. I think I get what you’re saying though, just make one big form that can submit all of the data to a script that can process different things? I have my reasons for not wanting to do that. I’m trying to keep the code like components and keeping the submit data to a minimum.

4

You can definitely have a separate form with a unique identifier on the form

<form id="tableKeys">
  <input type="hidden" name="primary_keys" />
</form>

and then update the field inside there with something like the following:

var form = document.getElementById('tableKeys'),
    arrayOfNumbers = [1, 2, 5, 4, 3], // get this array from elsewhere of course
    
form.elements.primary_keys.value = JSON.stringify(arrayOfNumbers);
1 Like
5

That’s basically what I came up with. I made a function that will take checkboxes (not even in a form but unique with an ID looped out by PHP) and take those values and turn them in a comma separated string and insert them into a hidden form field. PHP will then process the string array into an actual array with explode() and the commence as normal.

    <script type="text/javascript">
    function multi_tool_submit(name_of_check_boxes, id_of_primary_keys_form_field, id_of_form_to_submit)
    {
      // Get the array of checkboxes
      var check_boxes = document.getElementsByName(name_of_check_boxes);
      // Define the string we will use to pass the checked values 
      var csv_string = '';
      // Assign checked values into the csv_string
      for(x = 0; x < check_boxes.length; x++)
      {
        if(check_boxes[x].checked == true)
        {
          csv_string += check_boxes[x].value + ',';
        }
      }
      // Assign csv_string to hidden form field of primary keys
      document.getElementById(id_of_primary_keys_form_field).value = csv_string;
    }
    </script>

Thanks for the advice man. It really helped me think about the problem differently which turned out to not be a big issue at all.

6

That will not help much when your visitor has JavaScript turned off or is using a browser that doesn’t have JavaScript.

7

The site relies heavily on Javascript and for users who disable it or don’t have it they aren’t my target audience. But those are good things to point out.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.