Get input value for AJAX

Question

I found a code that sends an information via AJAX, but I need that, in addition to sending this information, it also send the value from another camp(input). I need to read the value of input name as stated in ajaxpro.php.

index php.

<form action="ass.php" id="form" method="post">
    <label for="nome"> Nome </label>
    <input onkeydown="mascaraNome( this )" onkeyup="mascaraNome( this )" name="nome" type="text" placeholder="Nome" size="30"/><br/><br/>
    <label for="funcao"> Função </label>
    <input onkeydown="mascaraFuncao( this )" onkeyup="mascaraFuncao( this )" name="funcao" type="text" placeholder="Função" size="30"/><br/><br/>
    <label for="telefone"> Telefone </label>
    <input onkeydown="mascaraTel( this )" onkeyup="mascaraTel( this )" name="telefone" id="telefone" type="text" placeholder="Telefone" size="30"/><br/><br/>
    <label for="email"> E-mail </label>
    <input onkeydown="mascaraEmail( this )" onkeyup="mascaraEmail( this )" name="email" type="text" placeholder="E-mail" size="30"/><br/><br/>
    <label for="cel"> Celular </label>
    <input onkeydown="mascaraCel( this )" onkeyup="mascaraCel( this )" name="cel" type="text" placeholder="Celular" size="30"/><br/>                                
    <input type="checkbox" name="whats"> Possui Whatsapp?<br/>
    <label for="filial"> Filial </label><br/>
    <select name="filial" required>
        <option value="" disabled selected>Seleciona a filial...</option>
        <option value="piracicaba">Piracicaba</option>
        <option value="botucatu">Botucatu</option>
        <option value="lencois">Lençóis Paulista</option>
        <option value="jau">Jaú</option>
    </select>
    <br>
    </div>
    <input type="text" name="name" id="name" hidden><br/><br/>
</form>
</div>      
<div class="row">
    <div class="col-md-3" style="padding-top:30px;">
        <strong>Select Image:</strong><br/>
        <input type="file" name="upload" id="upload"><br/>
        <button id="testinho" class="btn btn-success upload-result" name="testinho" id="testinho">CONFIRMAR RECORTE</button><br/><br/>
    </div>
    <div class="col-md-4 text-center">
        <div id="upload-demo" style="width:350px"></div>
    </div>
    <div class="col-md-4" style="">
        <div id="upload-demo-i" style="background:#e1e1e1;width:150px;padding:30px;height:150px;margin-top:30px"></div>
    </div>
</div>
<button type="submit" style="float: right;" onClick="submitform()" class="btn btn-success upload-result" /> CRIAR ASSINATURA </button>
</div>
</div>
</div>

Script js

$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 100,
        height: 100,
        type: 'circle'
    },
    boundary: {
        width: 150,
        height: 150
    }
});

$('#upload').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });
    }
    reader.readAsDataURL(this.files[0]);
});

$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'

    }).then(function (resp) {
        $.ajax({
            url: "/assinatura/ajaxpro.php",
            type: "POST",
            data: {"image":resp},
            success: function (data) {
                html = '<img src="' + resp + '" />';
                $("#upload-demo-i").html(html);

            }
        });
    });
});

ajaxpro.php

<?php
$data = $_POST['image'];
$teste = $_POST['name']; // PRECISO RECUPERAR DADOS DESTE CAMPO !!!!!

list($type, $data) = explode(';', $data);

list(, $data)      = explode(',', $data);

$data = base64_decode($data);

$imageName = time() . '.png';

file_put_contents('upload/'.$imageName, $data);

?>

Answer 1

You are sending in AJAX only the value of image in the field data. To send another value just add to the object of data another key by the name of name and the value of the field input#name:

data: {"image":resp, "name": $("#name").val()}

The $("#name").val() will capture the value of input#name and send together in the POST.