How to send data with ajax to php

Question

I am using this form:

<form class="" method="post" action="">
   <input type="hidden" class="old_name" name="old_name" value="<?php echo $dir . '/' . $file; ?>" />               
   <input  type="text" class="new_name form-control" name="new_name" value="" />
   <input type="submit" class="submitmodal rename btn " value="Rename" />                       
</form>

This is my ajax:

// RENAME
$(document).on("click", ".rename", function() {
    var old_name = $(this).val(); //getting value of old name
    var new_name = $(".new_name").val(); //getting value of new name

       $.ajax({
            url:"actions.php",
            method:"POST",
            data:{ old_name:old_name, new_name:new_name },
            success:function(data) {
                $('.echo').html(data);  

            }
       });

});

And this the php part actions.php to check if he gets the values:

if( isset($_POST['new_name']) ){
echo $_POST['old_name'] . '<br />' . $_POST['new_name'];

I do not get an echo at all in the <div class="echo"></div> . What is wrong with the code?

Answer 1

This is a tested solution. If not working please specify the problem (share error messages)

PHP

if( isset($_POST['new_name']) ){
    echo $_POST['old_name'] . ' / ' . $_POST['new_name'];
}

HTML

<form class="" method="post" action="">
    <input type="hidden" class="old_name" name="old_name" value="This is the Old Name" />
    <input  type="text" class="new_name form-control" name="new_name" value="This is the New Name" />
    <button type="submit" class="rename btn" value="Rename">Submit Form</button>
</form>

JQuery

$(function(){ // this configuration will occur after full html is loaded
    $("form").submit(function(e){
        e.preventDefault(); // prevent form default submit action
        var old_name = $(".old_name").val(); //<--use class .old_name
        var new_name = $(".new_name").val();

        $.ajax({
            url:"php/@principal.php",
            method:"POST",
            data:{ old_name:old_name, new_name:new_name },
            success:function(data) {
                console.log(data);
            }
        });
    });
});

Note the result will be displayed in your browser console console.log(data)

Answer 2

There are a few problems with your example

The form has no action. It will post back to itself.
Your submit handler does not call e.preventDefault()
You shouldn't class selectors for the form fields and button. Use ids and id selectors. They are meant to be unique.

Here's a fully working example:

<?php
$dir = '/somedir/';
$file = 'somefile.txt';
if (isset($_POST['old_name']) && isset($_POST['new_name']) ) {
    echo $_POST['old_name'] . '<br />' . $_POST['new_name'];
    exit();
}
?>
<!doctype html>
<html lang="">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <form id="renameForm" method="POST" action="ajax.php">
        <input type="hidden" class="old_name" id="old_name" name="old_name" value="<?php echo $dir . '/' . $file; ?>" />
        <input type="text" class="new_name form-control" id="new_name" name="new_name" value="" />
        <input type="submit" class="submitmodal rename btn " value="Rename" />
    </form>
    <div id="echo">

    </div>
    <script>
        $("#renameForm").submit(function(e) {
            e.preventDefault();
            var old_name = $("#old_name").val(); //getting value of old name
            var new_name = $("#new_name").val(); //getting value of new name

            $.ajax({
                url: $(this).attr("action"),
                method: $(this).attr("method"),
                data: {
                    old_name: old_name,
                    new_name: new_name
                }
            }).done(function(response){ //
                $("#echo").html(response);
            });
        });
    </script>
</body>

</html>

How to send data with ajax to php

Question

2 answers

solution1
1 ACCPTED 2019-04-25 22:00:33

solution2
1 2019-04-25 22:32:44

How to send data with ajax to php

Question

2 answers

solution1 1 ACCPTED 2019-04-25 22:00:33

solution2 1 2019-04-25 22:32:44

solution1
1 ACCPTED 2019-04-25 22:00:33

solution2
1 2019-04-25 22:32:44