How to submit the form with div ids as values in jquery php

Question

how to send div name with id as name and value to php on form submit without using ajax

    foreach ($_SESSION['companyuser']['roles'] as $key => $value){
       echo "
        <div class='col-sm-3 choosecmp'>
           <form action='controller/fileName.php' method='POST' id='formID'>
                <div name='companyId' id='".$value['cmp_id']."'>
                    <div class='col-lg-12'><img src=".substr($value['company_logo'],3)." width='50px' height='50px'></div>
                    <div class='col-lg-12' style='min-height:50px;height:auto'>".$value['cmp_name']."</div>
                    <button class='btn btn-default btndefault' type='submit' name='action' value='validatecompanyid'></button>
                </div>
            </form>
        </div>
        ";
    }

Generating HTML code using PHP foreach

How to send the data with div id on form submit when click on div Here is my jquery code

    $(".choosecmp").click(function(e){
        var cmpId = this.id;
        $(this).find('.btndefault').click();
        // $('form#formID').submit();  // with direct form submit

    }); 

I tried with above code to submit form using button and direct form submition. But here there is no input elements, so i want to send div id as post name and values.

Answer 1

You can add hidden fields in your form to send the data you want :

<?php
foreach ($_SESSION['companyuser']['roles'] as $key => $value){
   echo "
    <div class='col-sm-3 choosecmp'>
       <form action='controller/fileName.php' method='POST' id='formID'>
            <input type='hidden' name='divId' value='".$value['cmp_id']."' />
            <div name='companyId' id='".$value['cmp_id']."'>
                <div class='col-lg-12'><img src=".substr($value['company_logo'],3)." width='50px' height='50px'></div>
                <div class='col-lg-12' style='min-height:50px;height:auto'>".$value['cmp_name']."</div>
                <button class='btn btn-default btndefault' type='submit' name='action' value='validatecompanyid'></button>
            </div>
        </form>
    </div>
    ";
}

I add the following line :

<input type='hidden' name='divId' value='".$value['cmp_id']."' />

Just after your form opening to carry the div id as well

An other way would be to add the company id in the form url :

<form action='controller/fileName.php?companyId=" . $value['cmp_id'] . "' method='POST' id='formID'>

So that you can retrieve this value with a get :

$companyId = (int) $_GET['companyId'];

Answer 2

Add a hidden input field in your form with the value you want to commit and manage the submmision with jQuery:

    foreach ($_SESSION['companyuser']['roles'] as $key => $value){
       echo "
        <div class='col-sm-3 choosecmp'>
           <form action='controller/fileName.php' method='POST' id='formID'>
                <div name='companyId' id='".$value['cmp_id']."'>
                    <div class='col-lg-12'><img src=".substr($value['company_logo'],3)." width='50px' height='50px'></div>
                    <div class='col-lg-12' style='min-height:50px;height:auto'>".$value['cmp_name']."</div>
                    <input type='hidden' name='companyId' value='" . $value['cmp_id'] . "' />
                    <button class='btn btn-default btndefault' type='submit' name='action' value='validatecompanyid'></button>
                </div>
            </form>
        </div>
        ";
    }

jQuery:

$(".choosecmp").click(function(e){
    $('#formID').submit();
});

Answer 3

Without using ajax there aren't many options, you will need to submit actual input fields. One way to do this would be to add hidden input fields to the div that contain the variable. You could do this in the PHP:

foreach ($_SESSION['companyuser']['roles'] as $key => $value){
    echo "
    <div class='col-sm-3 choosecmp'>
       <form action='controller/fileName.php' method='POST' id='formID'>
            <div name='companyId' id='".$value['cmp_id']."'>
                <div class='col-lg-12'><img src=".substr($value['company_logo'],3)." width='50px' height='50px'></div>
                <div class='col-lg-12' style='min-height:50px;height:auto'>".$value['cmp_name']."</div>
                <button class='btn btn-default btndefault' type='submit' name='action' value='validatecompanyid'></button>
            </div>
            <input type='hidden' name='companyId' value='".$value['cmp_id']."' />
        </form>
    </div>
    ";
}

Or you could dynamically add them using javascript when the div is clicked:

$(".choosecmp").click(function(e){
    var form = $('form#formID');

    // Loop through the divs that have a name and id, and add the input
    form.find('div[name][id]').each(function(element) {
        var id = element.attr('id');
        var name = element.attr('name');
        var input = $('<input />');

        input.attr({'type': 'hidden', 'name': name, 'value': id});
        element.after(input);
    });

    form.submit();
});