pass array with ajax to php file

Question

I have a form with a textbox. If I enter number 3 for example in that textbox then 3 textboxes appear that I've made with Javascript..like this:

this is the html code:

<span>Cate intrebari va contine chestionarul?</span>
        <input type='text' id='nrintrebari'/>
    </td>
    <td>
    <input type='button'  value='Creaza intrebari' onclick='generate()'/>
    <input type='button' value='Save'  id='btn_intrebari'/> 
    </td>
</tr>
</table>

<br><br>

<div id='sim'>

</div>

and this is the javascript code that creates the textboxes:

var a=0;

function generate()
{
  var tot = document.getElementById("nrintrebari").value;
var tbl = document.getElementById("sim");

for(var i =1;i<=tot;i++)
{
  a++;
  tbl.innerHTML  = tbl.innerHTML  +'Intrebare nr.'+ a +' <input type="text"  size="100" maxlength= "200" name="intrebare[]" style="height:30px; background-color:#B8B8B8; " > <br><br><br> ';
}

}

If I want to pass the data from the textboxes to a php file I'll do a foreach like this:

 foreach($_POST['intrebare'] AS $textbox)
{   
    $sql="INSERT INTO intrebari values ('','".$_SESSION['cod']."','$textbox','1')";

    if (!mysql_query($sql))
      {
        die('Error: ' . mysql_error());
      }

}

All is well but this is done with refresh of the page. I want to do this without refreshing the page so I've decided to use Ajax. Like this:

$(document).ready(function () {
    $('#btn').click(function () {
        $.ajax({
            type: "POST",
            url: 'pag1.php',
            data: "intrebare[]=" + $('#intrebare[]').val(),
            success: function (data) {
                $('#status').html(data);
            }
        });
    });
});

I'm using the name of the textbox that i named and declared as an array in the Javascript code: intrebare[] but when I hit the button nothing happens. If I declare the textbox simple, not like an array as intrebare then the value is passed. How can I send the data through Ajax like an array?

Answer 1

do not use "intrebare[] ...

u can only use "intrebare"

Also another way is var str = $("form").serialize(); that will get the values from the form, if u want to use a form.

Answer 2

<form method="POST" id="textvalues">
<span>Cate intrebari va contine chestionarul?</span>
    <input type='text' id='nrintrebari'/>
</td>
<td>
<input type='button'  value='Creaza intrebari' onclick='generate()'/>
<input type='button' value='Save'  id='btn_intrebari'/> 
</td>
</tr>
</table>

<br><br>

<div id='sim'>

</div>
</form>

$(document).ready(function () {
    $('#btn').click(function () {
        $.ajax({
            type: "POST",
            url: 'pag1.php',
            data: "intrebare[]=" + $('#intrebare[]').val(),
            success: function (data) {
                $('#status').html(data);
            }
        });
    });
});

you can send values in this way also to your php page

Answer 3

you can not use a name as "#whatevername" Use ID of the control for this. and given you can not have controls with same ID (we can, but not recommended) you can give a class to all the text boxes and get all the values from all the controls.

var a = 0;
function generate() {
var tot = $("#nrintrebari").val();
var tbl = $("#sim");    
for (var i = 1; i <= tot; i++) {
    a++;
    tbl.append('Intrebare nr.' + a + '<input type="text" size="100" maxlength= "200" class="intrebare" style="height:30px; background-color:#B8B8B8; " >');
}   
}

Also this is not a perfect approach to append controls, text in a table/div. but it can help you in some way.

Get values like this.

var values = [];
$(".interbare").each(function () {
values.push($(this).val());
});

Now you can pass values array to any page or service, as a string (values.join(',')) or as an array.

Hope this will work.