Home/ Questions/Q 8828241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:33:40+00:00

I have a jquery form spinner script that generates text fields based on user

  • 0

I have a jquery form spinner script that generates text fields based on user input and it’s working fine. But i need to figure out how to name these fields so I can fetch the variable values with php $_POST..

Pls Note: There are five input text fields generated per row depending on whatever number entered by the user and these fields are name, phone, email, sex and position.
Below are names I like to give each input field: 

cand_name, cand_phone, cand_email, cand_sex, cand_pos

Pls find the jquery form spinner script at the link below

http://o2decor.com/form_scripts/jquery.fspin.js

Below is a link to the html 

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Form Spinner Test</title>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jquery.fspin.js"></script>
        <script type="text/javascript">
            $(function(){
                //you have to use the ID not the name of the fields we're interested in
                jQ_Form_Spinner('#container','#myrel',jQ_Form_Spinner_data);
            });
        </script>
    </head>

<body>


<form action="course_reg.php" method="post">
<p>
<label><strong>No of Candidates</strong></label>
<label><input type="text" id="myrel" name="cand_no" placeholder="Type Your Number of Candidates" /></label>
  <div class="clear"></div>
</p>

<div style="width:660px; float: left; border: 1px solid #ccc; padding:3px 3px;" id='container'>

</div>


</form>

Below is the link to view the form page running the jscript (it’s working perfectly)

http://o2decor.com/form_scripts/form.php

Sorry I could not paste the jquery codes here, stackoverflow would not accept my question cos i didnt format the code well or something… Would appreciate if anyone can help out with this problem…Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have a look at this DEMO.

    The JavaScript below (form.php) renames the fields when the form is submitted with the following naming convention: candidate[X][Y] — where X is the row number and Y is the field name.

    So, for example, the phone field in the first row will be named candidate[0][phone] and the email field in the second row will be named candidate[1][email].

    <script>
$(function(){
    var fields = ['name', 'phone', 'email', 'sex', 'pos'];
    $('form').on('submit', function(e){
        $('#container tbody tr').each(function(i){
            $(this).find('td').each(function(j){
                var field = fields[j];
                $(this).find(':input').attr('name', 'candidate[' + i + '][' + field + ']');
            });
        });
    });
});
</script>

    What you get on the PHP-side (course_reg.php) is a single variable ($_POST['candidate']) that contains all the data in a structured format as a multi-dimensional array.

    array(2) {
  [0]=>
  array(5) {
    ["name"]=>
    string(8) "Jane Doe"
    ["phone"]=>
    string(12) "123-555-4567"
    ["email"]=>
    string(18) "jane.doe@email.add"
    ["sex"]=>
    string(6) "female"
    ["pos"]=>
    string(3) "CEO"
  }
  [1]=>
  array(5) {
    ["name"]=>
    string(8) "John Doe"
    ["phone"]=>
    string(12) "234-555-6789"
    ["email"]=>
    string(18) "john.doe@email.add"
    ["sex"]=>
    string(4) "male"
    ["pos"]=>
    string(3) "CTO"
  }
}

    What the populated form looked like with the above data: https://i.stack.imgur.com/peA63.gif

    You can read-in this data using the PHP below.
    (Note: This is just a demo. I’m leaving the security stuff up to you.)

    <?php

$candidates = array();

foreach ($_POST['candidate'] as $i => $can)
{
    $candidates[$i] = array();

    foreach ($can as $key => $value)
    {
        $candidates[$i][$key] = $value;
    }
}

echo '<pre>';
var_dump($candidates);

    Of course, var_dump($candidates) will produce the exact same output as var_dump($_POST['candidate']), since we’re maintaining the same structure.

    How you want to structure the data is up to you.

    Update:

    I created this ZIP archive that contains form.php and course_reg.php: [Download]

    1. Upload the two files on to your server.
    2. Access form.php through your web browser.
    3. Populate the form.
    4. Hit the “Submit” button.
    5. course_reg.php should now display the populated data.

    Let me know how it goes.

    • 0