CODEWITHSUNDEEP
phpjqueryajax
user455318
user455318

Reputation: 3346

submit with php array

My objective with this code is when an user click in edit button, is sent this all=<?php echo $arr; ?> to the page edit.php .

This code simply does nothing (no ajax call in firebug).

<?php 
$arr = array("one", "two", "three")
?>
    <div id="content">
    <input class="edit" type="submit" value="Edit" /> 
    </div>

    <script type="text/javascript">
    $(document).ready(function () {
        $(".edit").submit(function () {
            $.ajax({
                url: "edit.php",
                type: "post",
                dataType: "html",
                data: "<?php echo json_encode( $arr ); ?>",
                success: function (data) {
                    $('#ad').html(data);
                }
            });
        });
    });

    </script>

Upvotes: 0

Views: 110

Answers (6)

JAAulde
JAAulde

Reputation: 19550

Edit As @MilanJaric showed, you do need to operate on the click of the submit button. In addition, however, you should prevent the default action of the click as well. End Edit

You need to echo the data json_encoded and wrapped in quotes: 

<div id="content">
  <input class="edit" type="submit" value="Edit" /> 
</div>

<script type="text/javascript">
  $( function()
  {
    $( '.edit' ).click( function( e )
    {
      $.ajax( {
        url: 'edit.php;,
        type: 'post',
        dataType: 'html',
        data: '<?php echo json_encode( $arr ); ?>',
        /* It's hard to tell based on your code, but if you wanted a var at the server named "all" use this instead of the above line:
        data: {
          all: '<?php echo json_encode( $arr ); ?>'
        },
        */
        success: function( data )
        {
          $( '#ad' ).html( data );
        }
      } );

      e.preventDefault();
    } );
  } );
</script>

IMO, however, it gets real ugly to echo PHP inside your JS especially if you have to do a lot of it, so when the need arises, I use an IIFE to inject PHP data into the code as a JS var. This allows me to isolate all PHP echoing within the parens of the invocation of the IIFE:

<?php 
  $arr = array("one", "two", "three")
?>

<div id="content">
  <input class="edit" type="submit" value="Edit" /> 
</div>

<script type="text/javascript">
  ( function( arr )
  {
    $( function()
    {
      $( '.edit' ).click( function( e )
      {
        $.ajax( {
          url: 'edit.php;,
          type: 'post',
          dataType: 'html',
          data: arr,
          /* It's hard to tell based on your code, but if you wanted a var at the server named "all" use this instead of the above line:
          data: {
            all: arr
          },
          */
          success: function( data )
          {
            $( '#ad' ).html( data );
          }
        } );

        e.preventDefault();
      } );
    } );
  }(
    '<?php echo json_encode( $arr ); ?>'
  ) );
</script>

Upvotes: 2

Matt
Matt

Reputation: 9433

The JavaScript submit event only occurs on a <form> not on individual <input>s.

You need the following HTML:

<div id="content">
    <form id="whatever">
        <input class="edit" type="submit" value="Edit" /> 
    </form>
</div>

And in the JavaScript change:

$( '.edit' ).submit( function()

to

$( '#whatever' ).submit( function()

Upvotes: 1

curtisdf
curtisdf

Reputation: 4210

In addition to what the other folks pointed out regarding the need to json_encode() your $arr, the jQuery documentation for .submit() points out the following:

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements.

So I believe the reason the AJAX isn't even being submitted is that your <input> element is not within a <form> element. Try the following:

<?php 
$arr = array("one", "two", "three");
?>

<form id="content">
<input class="edit" type="submit" value="Edit" /> 
</form>

<script type="text/javascript">
$(document).ready(function () {
    $(".edit").submit(function () {
        $.ajax({
            url: "edit.php",
            type: "post",
            dataType: "html",
            data: "all=<?php echo json_encode($arr); ?>",
            success: function (data) {
                $('#ad').html(data);
            }
        });
    });
});

</script>

Upvotes: 2

Gerard Nijboer
Gerard Nijboer

Reputation: 512

You're echoing an Array, which will make PHP echo something like Array(), in stead of the true values. Try var_dump($arr); to dump the array, and eventually try serialising the array, easier to retrieve its state later. If the ajax call does work with static data, then this is where you should start looking.

Upvotes: 0

Damian Jarosch
Damian Jarosch

Reputation: 176

Use a json_encode to encode php array to json string http://php.net/manual/en/function.json-encode.php

Upvotes: 0

Milan Jaric
Milan Jaric

Reputation: 5646

<script type="text/javascript">
$(document).ready(function () {
    $(".edit").click(function () {
        $.ajax({
            url: "edit.php",
            type: "post",
            dataType: "html",
            data: "all=<?php echo $arr; ?>",
            success: function (data) {
                $('#ad').html(data);
            }
        });
    });
});

</script>

Upvotes: 0

Related Questions