CODEWITHSUNDEEP
javascriptphpjqueryhtml
R. Kelly
R. Kelly

Reputation: 93

How to pass values from dynamic jQuery fields to PHP

I am generating fields in a table with jQuery and can't figure out how to retrieve those values on (post) submit to insert into a database.

Here's a jsFiddle to demonstrate how I'm generating the fields:

https://jsfiddle.net/hnj6ed1y/26/

I am a beginner with PHP, so I don't have much code to work with other than this. I tried using the DOM getElementById, but got stuck with loading HTML since I'm using a PHP file.

if(isset($_POST['back']) || isset($_POST['next'])){

    if(isset($_POST['next'])){
        $url = "$nextpage";

    $dom = new DOMDocument();
    $dom->validate();
    $divs = $dom->getElementsById('report_cause1');
    foreach ($divs as $div) {
        foreach ($div->attributes as $attr) {
            $name = $attr->nodeName;
            $value = $attr->nodeValue;
            echo "Attribute '$name' :: '$value'<br />";
        }
    }
    }
    else {
        $url = "$previouspage"; 
    }

    //header("location:$url");
    //exit();
}

Here's the jQuery/JavaScript:

var count_2 = 5;
var table_count2 = 1;

$(document).ready(function () {

    $('#btnAdd').click(function () {
        count_2 = count_2 + 2;
        table_count2 = table_count2 + 1;
        $('#Table tr:last').after('<tr><td>' + table_count2 + '</td>' +
            '<td>' +
            '<select name=\"report_cause' + count_2 + '\" id=\"report_cause' + count_2 + '\" class=\"report_cause\">' +
            '<option value=\'default\'>-</option>' +
            '<option value=\'temp_not_rec\'>Temperatures not recorded</option>' +
            '<option value=\'other\'>Other, Not Listed</option>' +
            '</select>' +
            '<p class=\"cause_details\" style=\"display:none\">' +
            '<input type=\"text\" name=\"cause_detail_info' + count_2 + '\" id=\"cause_detail_info' + count_2 + '\" placeholder=\"Type cause here\" size=\"48\" maxlength=\"50\" class=\"textbox required\" value=\"\" />' +
            '</p>' +
            '</td>' +
            '<td>' +
            '<p class=\"null_temp\">' +
            '<input type=\"text\" name=\"temp' + count_2 + '\" id=\"temp' + count_2 + '\" placeholder=\"Temp\" size=\"5\" maxlength=\"5\" value=\"\" />' +
            '</td></tr>');
    });
});

HTML:

    <table style="width: 70%" id="Table" name="Table">
        <tr>
            <th>#</th>
            <th>Cause</th>
            <th>Temp</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <select name='report_cause2' id='report_cause2' class="report_cause">
                    <option value='default'>-</option>
                    <option value='temp_not_rec'>Temperatures not recorded</option>
                    <option value='other'>Other, Not Listed</option>
                </select>
            </td>
            <td>
                <p class="null_temp">
                    <input type="text" name="temp1" id="temp1" placeholder="Temp" size="5" maxlength="5" value="" />
                </p>
            </td>
        </tr>
    </table>
    <input type="button" id="btnAdd" name="btnAdd" value="Add More" class="button" />
<input type="button" name="back" value="Back" class="button" onclick="goBack()" />
<input type="submit" name="next" value="Next" class="button" />

CSS:

#Table {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse:collapse;
}
#Table td, #Table th {
    font-size:1em;
    border:1px solid #98bf21;
    padding:3px 7px 2px 7px;
}
#Table th {
    font-size:1.4em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#fff;
}
#Table tr.alt td {
    color:#000;
    background-color:#EAF2D3;
}

Thank you all in advance!

Upvotes: 2

Views: 66

Answers (2)

R T
R T

Reputation: 1087

Theoretically your form elements should be held in the $_POST array and be accessed with the commands $_POST['report_cause2'] and $_POST['cause_detail_info2'] as long as you have your fields wrapped in a <form> element with an action="<your php script>" and a method="POST".

Upvotes: 2

madalinivascu
madalinivascu

Reputation: 32354

wrap you table & inputs in a form tag see more :http://www.w3schools.com/tags/tag_form.asp

than use the global variable $_POST to get the values of the fields see: http://php.net/manual/ro/reserved.variables.post.php

Upvotes: 1

Related Questions