javascript variable to php script

Question

In my index.php, I have an update button as below.

<form action="update.php" method="post" >
  <button type="submit">Update</button>
</form>

I have defined a javascript function to override the default form action. The javascript function is as below.

<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
  e.preventDefault();
  alert("HI");
  $.ajax({
        type: 'post',
        url: 'update.php',
        data: {
            source1: "some text",
        },
        success: function( data ) {
            console.log( data );
        }
    });
});
});
</script>

After I click on the update button, I am getting the alert. However, I am not redirected to update.php page as expected. I am trying to send some values in the ajax request which can be used for processing in the update.php page.

You won't be redirected because you don't have a redirect script. You can't use PHP redirect in an AJAX call. And why do you use AJAX if you want to be redirected? — putvande, Jan 23 '14 at 14:03
How are you accessing the data in `update.php`? How is this question any different to any of the **Related** questions over there? ---> — naththedeveloper, Jan 23 '14 at 14:03
You won't be redirected using ajax, that's the point of ajax. — superphonic, Jan 23 '14 at 14:05
>>I am not redirected to update.php<< your e.preventDefault(); skips the loading of the form and in your further code i cant find any redirecting ... — donald123, Jan 23 '14 at 14:05
be more specific please : do you want to be redirected in update.php , but you're still using ajax and preventDefault which keep you in the same page . If you want to be redirected why do you use an ajax call? — KB9, Jan 23 '14 at 14:07
I need to access the javascript variable in update.php file. So, I am using ajax to send the variable value to update.php file. However, after sending the value, I do not need the control back in my javascript function. — ram esh, Jan 23 '14 at 14:39

score 1 · Accepted Answer · answered Jan 23 '14 at 14:15

You are not redirected because PHP redirects do not affect the browser when run as an AJAX call. You'll need to specify a JavaScript redirect in the success function:

$.ajax({
    type: 'post',
    url: 'update.php',
    data: {
        source1: "some text",
    },
    success: function( data ) {
        document.location.href = 'update.php'
    }
});

However, I don't believe that this is what you want. You seem to want to add new form data on submitting the form, in which it might be better to prevent the default behaviour, add any additional data with hidden input fields, and then re-submit the form:

  $(function ()
  {

    $('form').submit(function (e)
    {

      if ($(this).is(':not([data-submit="true"])'))
      {

        $('form').append('<input type="hidden" name="foo" value="bar">')

        $('form').data('submit', 'true').submit()

        e.preventDefault()

        return false

      }

    }
    )

  }
  )

</script>

I need to call the update.php function on success. I am able to call update.php from ajax now. However, I am accessing the javascript variable using POST in update.php file. It is not getting displayed on my update.php file. — ram esh, Jan 23 '14 at 14:43
For data to appear in the `$_POST` variable it needs to be posted with the form. Hence my example of adding a hidden input field that contains the value. — Michael, Jan 23 '14 at 14:48

javascript variable to php script

1 Answers1

Linked