CODEWITHSUNDEEP
javascriptphphtml
user3773928
user3773928

Reputation: 53

Getting value from html in php

How can I get the value from the html in php? How can I change the ".$x." in php to result which is var click in the JavaScript. Currently, it only display the value ".x." when I click the next button.

php file

<?php

$con=mysqli_connect("localhost","root","password","DB");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$x = 1;

$sql="select * from sentence where id = ".$x." limit 10";

if ($result=mysqli_query($con,$sql))
{
 // Fetch one and one row
while ($row=mysqli_fetch_row($result))
{
$output = $row[1];
}
 // Free result set
 mysqli_free_result($result);
}

mysqli_close($con);
?>

Javascript

function next() {

if(typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
        sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
        sessionStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML =  sessionStorage.clickcount;
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web     
storage...";
}

}
var click = sessionStorage.clickcount;

function nextnext(){
alert(click);
}

Html

 <center><button onclick='next()'>NEXT</button></center>
 <div id="result"></div>

Upvotes: 1

Views: 134

Answers (3)

user3773928
user3773928

Reputation: 53

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scramble Game</title>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">        
</script>
</head>

<body>
<header>
<h1>Drag in order to create a sentence</h1>
<div id="cardContainer" draggable="true"></div>


<?php

$con=mysqli_connect("localhost","root","password","database");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
 }
$x = 1;

$sql="select * from sentence where id = ".$x." limit 10";

if ($result=mysqli_query($con,$sql))
 {
// Fetch one and one row
while ($row=mysqli_fetch_row($result))
{
$output = $row[1];
}
 // Free result set
 mysqli_free_result($result);
}

mysqli_close($con);
?>

<div id="adiv" style="font:24px bold; display:block"><p id="demo"></p></div>

<script>

js_var = "<?php echo $output ?>";
var c = ['c1','c2','c3','c4','c5','c6','c7','c8','c9','c10'];
var div_id = ['id1','id2','id3','id4','id5','id6','id7','id8','id9','id10'];
var box_id = ['box1','box2','box3','box4','box5','box6','box7','box8','box9','box10'];
var original = js_var.split("#");
var balls90= js_var.split("#");

var org_txt="";
for (i=0;i<balls90.length;i++){
org_txt=org_txt.concat(original[i]);
}

document.getElementById("demo").innerHTML =  org_txt;


setTimeout(fade_out, 5000);

function fade_out() {
$("#adiv").fadeOut().empty();
}

//look at this function next() {

if(typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
        sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
        sessionStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML =  sessionStorage.clickcount;
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web 
  storage...";
}

}
var click = sessionStorage.clickcount;


function nextnext(){
alert(click);
}


function getNumbers() {
var player1 = new Array();
balls90.sort(function() {
    return Math.random() - .25;
    document.getElementById("btn_shuffle").onclick = function(){displayDate()};
});


 for (var i = 0; i < balls90.length; i++) {
     document.writeln('<div id='+box_id[i]+' class=box droppable=true ondrop=drop(event)     
ondragover=allowDrop(event)></div>');
 }


for (var i = 0; i < balls90.length; i++) {
    player1.push(balls90[i]);

    document.writeln('<div id='+div_id[i]+' draggable=true droppable=true     
ondragstart=drag(event)>'+balls90[i]+'</div>');
  }
}

getNumbers();


function dragWord(dragEvent){
dragEvent.dataTransfer.setData("text/html",     
dragEvent.target.textContent+"|"+dragEvent.target.parentNode.id);
}


function dropWord(dropEvent){
var dropData = dropEvent.dataTransfer.getData("text/html");
var dropItems = dropData.split("|");
var prevElem = document.getElementById(dropItems[1]);
prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent;
dropEvent.target.textContent = dropItems[0];
dropEvent.preventDefault();
}

function allowDrop(ev) {
ev.preventDefault();
}  


function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
var match = 0;
//if(){//if 4 boxes are not empty

 var result = true;
 for (var i=0; i<original.length; ++i) {
 if (original[i] !== $("#box"+(i+1)).text()) {
 result = false;
 break;
}
}

if(result) {
alert("correct");

} 
}

</script>
<center><button onclick='next()'>NEXT</button></center>
<div id="result"></div>

</body>
</html>

Upvotes: 0

wallop
wallop

Reputation: 2581

you need to either use a post/get or ajax call to send value from client(in ur words - html) to php Your question is not clear. If below is not what you are expecting let me know. I will correct the answer try this:

<form method="GET" action="urPHPFIle.php">
<input type="hidden" value="x_value" name="x" />
<input type="click" value="send" />
</form>

on clicking above the $_GET['x'] value will be equal to x_Value or the value you enter in value attribute of input

<?php

$con=mysqli_connect("localhost","root","password","DB");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$x = 1;

$sql="select * from sentence where id = ".$_GET['x']." limit 10";

if ($result=mysqli_query($con,$sql))
{
 // Fetch one and one row
while ($row=mysqli_fetch_row($result))
{
$output = $row[1];
}
 // Free result set
 mysqli_free_result($result);
}

mysqli_close($con);
?>

Upvotes: 1

practice2perfect
practice2perfect

Reputation: 507

do an ajax call 

$.ajax({
   url: "filename.php",
   type: "POST",
   data: { cnt : count},
}).done(function( msg ) {
    // to do here after ajax call 
});

from PHP file

$x = $_POST['cnt'];

there are many ways to do it,.. like storing it in hidden field and posting it. etc.. explore them also

Upvotes: 0

Related Questions