lorenzopieri lorenzopieri - 1 year ago 62
Ajax Question

$.getJSON Use data argument to modify text on HTML element

I am having a bit of trouble with this bit of code. I am to take the values of 4 inputs, pass them to a PHP API using jQuery, compute a password with the PHP API file I have created and return that password as the data argument as a json_encoded. Below you will find the code:

PHPPasswordGenerator.php

<?php
header("Content-Type: application/json; charset: UTF-8;");
$letters = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
$special = array('!','?',"'",'"','£','$','%','&','/','(',')','=','@','#','§','[',']','{','}');
$minLetters = array();
$maxLetters = array();
$numbers = array();
$specialCharacters = array();
$final = '';
$min = $_REQUEST["typeA"];
$max = $_REQUEST["typeB"];
$num = $_REQUEST["typeC"];
$spec = $_REQUEST["typeD"];

if(isset($min) or isset($max) or isset($num) or isset($special)){
for($i = 0; $i < $min; $i++){
array_push($minLetters, $letters[rand(0,count($letters)-1)]);
}
for($i = 0; $i < $max; $i++){
array_push($maxLetters, strtoupper($letters[rand(0,count($letters)-1)]));
}
for($i = 0; $i < $num; $i++){
array_push($numbers, rand(0,9));
}
for($i = 0; $i < $spec; $i++){
array_push($specialCharacters, $special[rand(0,count($special)-1)]);
}

$final .= implode('',$minLetters) . implode('',$maxLetters) . implode('',$numbers) . implode('',$specialCharacters);
}
print(json_encode($final));
?>


jQuery Code

$(document).ready(function(){
//Chiamata AJAX sui dati generati dal generatore di Password in PHP
$("#generator").on("click", function(){
//Mentre il focus è sull'input, modifica il valore val()
$.getJSON("passwordgenerator.php",
{
typeA : $("#typeA").val(),
typeB : $("#typeB").val(),
typeC : $("#typeC").val(),
typeD : $("#typeD").val()
},
function(data){
console.log("Success: " + data);
$("#generated").append("<h3></h3>").html(data);
}).fail(function(err){console.log(err)});
});
});


This is part of the body

<form>
<label for="A">Lettere Minuscole</label><input type="text" name="typeA" id="typeA">
<label for="B">Lettere Maiuscole</label><input type="text" name="typeB" id="typeB">
<label for="C">Numeri</label><input type="text" name="typeC" id="typeC">
<label for="D">Caratteri Speciali</label><input type="text" name="typeD" id="typeD">
<button id="generator">Generate Password</button>
</form>

<div id="generated"></div>


Now, the thing is: whenever I put a number inside the inputs and send it to the PHP file, the
$final
variable is json_encoded and sent back to the javascript file. If I do something like
console.log(data)
, I actually get to see a randomly generated password with the specs I wanted it to be, but then I try to do something like:

$("#generated").text(data);


but the data doesn't go inside generated. I also tried to use html(data), but to no use. I did a
console.log(typeof data);
to see that it really was a string, as I wanted, and it actually is.

Answer Source

So, the thing is I had to use val() and $.getJSON() at all costs, because the professor wanted so! The problem: I was using a form. The data passed as expected, but when I tried to append the data to an HTML element, since this event would occur in the same time the default form event would occur, the data would not get appended.

Removing the element was all it took. I could have also prevented default, yes.

Thank everyone for the nice help! :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download