Ajax script is not updating PHP file and his var value

Question

This is simple form, on click i need calculated value to be displayed in file process.php, but this is not working for me. It seems that "click" on "=" don't do anything, in process.php there is default value "0", no results.

 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script src="//code.jquery.com/jquery-1.12.0.min.js">
$('#button').click(function() {
    var val1 = $('#text1').val();
    var val2 = $('#text2').val();
    $.ajax({
        type: 'POST',
        url: 'demo/process.php',
        data: { text1: val1, text2: val2 },
        success: function(response) {
            $('#result').html(response);
        }
    });
});
</script>

<input type="text" id="text1"> +
<input type="text" id="text2">
<button id="button"> = </button>

<div id="result"></div>
</body>
</html>

AND PHP

<?php
$text1 = $_POST['text1'];
$text2 = $_POST['text2'];
echo $text1 + $text2;
?>

the issue is that the javascript is running before the button is in the DOM - move your javascript AFTER the button, OR, wrap your code in jQueries ubiquitous document ready wrapper — Jaromanda X
– Jaromanda X, Commented Feb 6, 2017 at 1:53
Check developer tools network tab to see what is being sent and received in the request — Jaromanda X
– Jaromanda X, Commented Feb 6, 2017 at 2:25
in "body" first i put html code for button, below that i put script — FabianCannes
– FabianCannes, Commented Feb 6, 2017 at 2:25

Manoj Sharma · Accepted Answer · 2017-02-06 05:39:28Z

1

first of all, are you using a php server?

if you do then try this (yes i used a different library):

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    </head>
    <body>
        <form>
            <input type="text" id="text1" /> 
            <input type="text" id="text2" />
            <button type="button" id="button"> = </button>
        </form>

        <div id="result"></div>    
        <script type="text/javascript">
            $('#button').click(function() {
                var val1 = $('#text1').val();
                var val2 = $('#text2').val();

                $.post( "demo/process.php", {text1: val1, text2: val2} ,     function(data){
                    $('#result').html(data);
                });
            });
        </script>
    </body>
</html>

in php:

<?php
$text1 = $_POST['text1'];
$text2 = $_POST['text2'];
echo $text1 + $text2;
?>

Tip: Always specify the type attribute for a element. Different browsers use different default types for the element.

edited Feb 6, 2017 at 5:39

Manoj Sharma

1,4552 gold badges13 silver badges20 bronze badges

answered Feb 6, 2017 at 1:50

Thibaut

1803 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jaromanda X Over a year ago

why would you suggest a GET instead of a POST? besieds, #button will still be undefined regardless of the code running in the click callback

Thibaut Over a year ago

@JaromandaX this would work with POST as well, but why not get as you redirect to a different page?

Jaromanda X Over a year ago

there is no form in the question .. what are you talking about?

Collectives™ on Stack Overflow

Ajax script is not updating PHP file and his var value

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related