umer farooq umer farooq - 4 months ago 9
MySQL Question

How to write the html code inside the javascript tags which already have php inside it

I am writing the code as simple as if we add a department the department adds back in SQL in xamp MYSQL. I have framework as bootstrap. when I press the button if the department is already entered before there should be some kind of message to the user that department is already in Database. for which I decided to use bootstrap/Alerts. for button I have to use the java-script and for Database work I have to use the php inside it but I cannot use the html within java-script the echo doesnot work i guess. here is part causing the trouble:

<!-- main block starts -->
<div class="row">
<div class="col-md-12 card-600 bg-skyblue text-center">

<!-- When the button clicks -->
<script type="text/javascript ">

$(Document).ready(function(){
$("button").click(function(){
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "root", "password", "task1");

// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}

// Escape user inputs for security
$dep_name = mysqli_real_escape_string($link, $_POST['name']);


// attempt insert query execution
$sql = "Select dep from department where dep LIKE '%$dep_name%'";
//
if(mysqli_query($link, $sql))
{
echo 'ERROR: Could not able to execute $sql. ' . mysqli_error($link);
echo '<div class="alert alert-danger">';
echo '<strong>Error! </strong> The department Entered already exist.';
echo '</div>';

} else{
$sql_2 = "INSERT INTO department(dep) VALUES ('$dep_name')";
$link = $con->query($sql_2);
echo ' <div class="alert alert-success">';
echo ' <strong>Success!</strong> Department Added Succesfully.';
echo '</div>';


}

// close connection
mysqli_close($link);
?>
});
});

</script>
<!-- Javascript ends -->

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

<h2 class="text-center"><strong>Welcome to Bolt Reactor Organization Management System - Departments</strong></h2>
<input type="text" name="name" value="" style="padding:12px;min-width:344px;" placeholder="Insert the name of Department">
<!-- <input type="submit" name="submit" value="Submit"> -->
<input id="#btn1"type="submit" class="btn btn-info" value="Add Department" style="padding:12px;background-color:grey;"></input>
<!-- <button type="submit" name="submit" class="btn"><a href="org.php" style="color:white;"></a></button> -->


</form>

</div>
</div>
<!-- End -->

Answer

You can't run PHP code in Javascript. Moreover, you should be making an AJAX call to a route where you're running this code; it would make your life much easier. You should try as much as possible to separate your output from your business logic.

You'd send a request to the route, then output the response, whatever that may be. (It could be an error if there's something already present, or the 'success!' div you're trying to output in the PHP.