When I try to add a jQuery click animation to my submit button it starts the animation however, quickly resets because the form submits and refreshes the page. If the form is wrapped by a div, the animation works fine but then the form doesn't submit after the animation is complete. How can I have it submit the form after the animation has completed and keep the animation from reseting after form-submission. I'm new to PHP and jQuery and can't figure out how to do it. Here is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body
{
background-color: lightgrey;
height: 100%;
width: 100%;
overflow: hidden;
}
.PSolCanvas
{
transform: translate(-50%, -40%);
z-index: 1;
position: absolute;
left: 50%;
top: 88.5%;
background-color: transparent;
min-height: 100%;
}
.PSol
{
width: 120px;
height: 120px;
margin: 0 auto;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
font: 15px arial;
color: black;
border: 1px solid lightgray;
background: #20AC20;
}
</style>
<script rel = "javascript" type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".PSol").click(function() {
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"});
});
});
</script>
</head>
<body>
<?php
$username = "username";
$password = "password";
$host = "host";
$db = $username;
if(isset($_POST['PSol']))
{
$connection = mysqli_connect($host, $username, $password, $db);
$sql = "UPDATE table SET column='' WHERE id = 1";
if (mysqli_query($connection, $sql)) {
echo "Record successfully changed.";
}
else{
echo "Error: " . $sql . "<br>" . mysqli_error($connection);
}
mysqli_close($connection);
echo "<p>Disconnected from server: ".$host."</p>";
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "post" class = "PSolCanvas">
<input type = "submit" name = "PSol" class = "PSol" value = "P"/>
</form>
</body>
</html>
You will want to try doing a callback on the animation so the submit will happen when it's done. Something like:
<script type='text/javascript'>
$(document).ready(function(){
$(".PSol").click(function(e) {
// You will want to prevent the natural submission of the form
e.preventDefault();
// Notice the function attached to the `.animate()`.
// This will fire after the animation is done.
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},function(){
$('.PSolCanvas').submit();
});
});
});
</script>
EDIT: Here is an ajax version, I have made it a little complex because you may want to reuse the ajax elsewhere in your site, but you really only need the content inside the this.ajax part. The order of the script is important since this particular example calls itself (calling another page for the ajax would be better). Everything else (separating things into their own pages) is just suggestion:
/config.php
<?php
// Make some defines
define("DB_USERNAME",'username');
define("DB_PASSWORD",'password');
define("DB_HOST",'host');
define("DB_DATABASE",'database');
/functions/myfunctions.php
<?php
// Make some functions to make things cleaner/universal
function connection()
{
return mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_DATABASE);
}
// Make a function that you can reuse
function updateTable($val,$con)
{
return (mysqli_query($con, "UPDATE table SET column='' WHERE id = {$val}"));
}
/index.php (whatever this page is called)
<?php
// Include above assets
require_once(__DIR__.'/config.php');
require_once(__DIR__.'/functions/myfunctions.php');
// This should run only on the ajax call
if(!empty($_POST['PSol'])) {
// Get the connection
$con = connection();
// Set common text
$disc = "<p>Disconnected from server: ".DB_HOST."</p>";
// Run the update
if(updateTable(1,$con))
// If success
$response = json_encode(array('msg'=>"Record successfully changed. {$disc}"));
else
// If fail
$response = json_encode(array('msg'=>"Error: {$sql}<br>".mysqli_error($con).$disc));
// Close connection
mysqli_close($con);
// Stop further processing of page
// If you don't stop processing, you will send back the rest of the
// page below and will malform your json
die($response);
}
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body
{
background-color: lightgrey;
height: 100%;
width: 100%;
overflow: hidden;
}
.PSolCanvas
{
transform: translate(-50%, -40%);
z-index: 1;
position: absolute;
left: 50%;
top: 88.5%;
background-color: transparent;
min-height: 100%;
}
.PSol
{
width: 120px;
height: 120px;
margin: 0 auto;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
font: 15px arial;
color: black;
border: 1px solid lightgray;
background: #20AC20;
}
</style>
<script rel = "javascript" type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// This is an object to contain your ajax app
var AjaxEngine = function()
{
// Set some common containers
var url;
var useURL;
// This function will set where to point the ajax call
this.useUrl = function(url)
{
useURL = url;
return this;
}
// This is the actual jQuery ajax call
this.ajax = function(useData,func)
{
// Create jQuery ajax
$.ajax({
// Use our previously-set url
url: useURL,
// This is the data to send to our page
data: useData,
// Send the data by POST method
type: 'post',
// When the post is successful
success: function(response){
// Use an anonymous function
func(response);
}
});
}
}
$(".PSol").click(function(e) {
// Set the form
var thisForm = $('.PSolCanvas');
// Get the values from the form
var useData = thisForm.serialize();
// Stop from submission
e.preventDefault();
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},function(){
// Create instance of our ajax object
var Ajaxer = new AjaxEngine();
// Set the url (in this case we are getting the action=""
// from the form tag)
// The "useData" param is the form data
// The second param is the function we want to run when
// the ajax successful
Ajaxer.useUrl(thisForm.attr('action')).ajax(useData,
function(response) {
// Try, just incase the code produces an error and
// malforms the json response
try {
// Parse the return json_encode()
var json = JSON.parse(response);
// Send the message to the container
$('#writespot').html(json.msg);
}
catch (Exception) {
// This will catch any error, so
// make sure your console is open to review
console.log(Exception.message);
console.log(response);
}
});
});
});
});
</script>
</head>
<body>
<!-- This is where the response message will be written to -->
<div id="writespot"></div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="PSolCanvas">
<input type="submit" name="PSol" value="P" class="PSol" />
<input type="hidden" name="PSol" value="P"/>
</form>
</body>
</html>
You want to submit the form after the animation has run. To do that you need to prevent the default 'submit' and then add your own using a callback function on the jQuery animate call.This will only call the .submit() after the animation has finished. Something like (Please note I haven't had a chance to check this code but it should give you the general idea:
$(document).ready(function(){
$(".PSol").click(function(e) {
e.preventDefault();
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},
function() {
$("form").submit();
}
);
});
});
Related
I'm studying ReactJS and I'm trying to do a simple online "shopping list" app. Using a form, I submit an input text, I save it in the state, then I show the saved message in the page. However, when I close the page I lose every message I added. So, I would like to use PHP to save the state in a JSON file instead of in the state, and update the state with the JSON file. In this way, even if I close my browser, I don't lose anything.
I want to use PHP because I use it in my website and I have read that React can't write in file, so I thought to use PHP to write in a JSON file, but I don't know how to do. Can you help me, please? This is the code of my app.
.messaggio {
background-color: #d5f4b5;
border-radius: 5px;
padding: 10px;
margin: 5px 5px 5px 30px;
display: inline-block;
font-size: 15px;
}
.grey {
background-color: whitesmoke !important;
}
.orario {
margin-top: 2px;
font-size: 11px;
color: grey;
}
#chatbox, form {
max-width: 400px;
}
#messaggi{
text-align: right;
}
input[type=text] {
width: 300px;
margin-left: 10px;
}
input[type=submit]{
width: 60px;
background-color: silver;
border-radius: 4px;
border: 0px;
padding: 5px;
color: white;
margin-left: 5px;
}
input[type=submit]:hover {
background-color: grey;
}
<html>
<head>
</head>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Messaggio(props) {
const classe = props.colore ? "messaggio " + props.colore : "messaggio";
return(
<div className={classe}>{props.children}</div>
);
}
function Messaggi(props) {
const messaggi = props.messaggi;
const puntini = props.scrivendo ? (<Messaggio colore="grey"><i>...</i></Messaggio>) : '';
const lista = messaggi.map((messaggio,key) =>
<div key={key}>
<Messaggio>
<div>{messaggio.testo}</div>
<div className="orario">{messaggio.ora}</div></Messaggio>
</div>
);
return(
<div id="messaggi">
{lista}
{puntini}
</div>
);
}
function Inserimento(props) {
return(
<form onSubmit={props.onSubmit}>
<label>
<input type="text"
value={props.testo}
onChange={props.onChange}/>
</label>
<input type="submit" value="Invia" />
</form>
);
}
class Chatbox extends React.Component {
constructor(props) {
super(props);
this.handleChangeMessaggio = this.handleChangeMessaggio.bind(this);
this.handleSubmitMessaggio = this.handleSubmitMessaggio.bind(this);
this.state = {
messaggi: [],
testo: '',
}
}
handleChangeMessaggio(e) {
this.setState({
testo: e.target.value
});
}
handleSubmitMessaggio(e) {
const ora = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const testo = this.state.testo;
const newMsg = {testo:testo,ora:ora};
const messaggi = this.state.messaggi;
this.setState({
messaggi: messaggi.concat(newMsg),
testo: ''
});
e.preventDefault();
}
render(){
const messaggi = this.state.messaggi;
const scrivendo = this.state.testo === '' ? false : true;
return(
<div id="chatbox">
<Messaggi messaggi={messaggi} scrivendo={scrivendo} />
{scrivendo}
<Inserimento
onSubmit={this.handleSubmitMessaggio}
onChange={this.handleChangeMessaggio}
testo={this.state.testo}/>
</div>
);
}
}
ReactDOM.render(
<Chatbox />,
document.getElementById('root')
);
</script>
</body>
</html>
onSubmit should store your data somewhere on server (file/db) - use fetch() for example;
Please read more about the componentDidMount function - using that function you can load the state from server side using browser fetch(...) function. In the fetch promise fetch().then( ... you can assign the current state using setState())
I want to share how I used your replies to find the solution.
I added a POST send, using XMLHttpRequest in the submit function (handleSubmitMessaggio):
var data = new FormData();
var updated_state = messaggi.concat(newMsg);
data.append('value', JSON.stringify(updated_state));
var xhr = new XMLHttpRequest();
xhr.open('POST', window.location, true);
xhr.send(data);
Then I added a code to get POST value in PHP and write it in a json.
$json = str_replace('\"', '"', $_POST["value"]);
//write json to file
if (isset($_POST["value"])){
file_put_contents("messages.json", $json);
}
Finally, I added a componentDidMount function where I call a function that use fetch method to load the json and update the state with it.
componentDidMount() {
this.timerMsgs = setInterval(
() => this.updateMsgs(),
500
);
}
updateMsgs() {
fetch("messages.json?_=" + Date.now())
.then(res => res.json())
.then(
(result) => {
this.setState({
messaggi: result
});
},
(error) => {
this.setState({
error
});
}
)
}
Thank you to everyone who replied! ^_^
This is my code
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
try {
$pdo = new PDO("mysql:host=localhost;dbname=hospital", "root", "");
// Set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("ERROR: Could not connect. " . $e->getMessage());
}
// Attempt search query execution
try {
if (isset($_REQUEST['term'])) {
// create prepared statement
$sql = "SELECT am_first_name, am_middle_name,am_last_name FROM
admission_master WHERE am_ip_no LIKE :term";
$stmt = $pdo->prepare($sql);
$term = $_REQUEST['term'] . '%';
// bind parameters to statement
$stmt->bindParam(':term', $term);
// execute the prepared statement
$stmt->execute();
if ($stmt->rowCount() > 0) {
while ($row = $stmt->fetch()) {
// echo "<p>" . $row['am_ip_no'] . "</p>";
echo "<p>" . $row['am_first_name'] . "</p>";
echo "<p>" . $row['am_middle_name'] . "</p>";
echo "<p>" . $row['am_last_name'] . "</p>";
}
} else {
echo "<p>No matches found</p>";
}
}
} catch (PDOException $e) {
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
// Close statement
unset($stmt);
// Close connection
unset($pdo);
?>
Font End Code Is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#h input[type="text"]').on("keyup input", function () {
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if (inputVal.length) {
$.get("sqlsearch.php", {term: inputVal}).done(function (data) {
// Display the returned data in browser
resultDropdown.html(data);
});
} else {
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function () {
$(this).parents(".search-
box").find('input[type="text"]').val($(this).text());
$(this).parents("#autoFill").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<body>
<div class="search-box" id="h">
<input type="text" placeholder="Search ..." />
<div class="result"></div>
</div>
<div id="autoFill">
<input type="text" placeholder="name automatically ..." />
<div class="res"></div>
</div>
</body>
</html>
How To search name from the database using id from ajax and set that name to the next field in the form automatically this means ajax response.
I am trying to figure out how to display an image while PHP runs and disappears after.
I grabbed this code from a site, but the image only shows very briefly at the very end of the PHP loading. It doesn't show when the page initially opens and it only seems to run once.
I have read many and many of websites and threads on here, but I can't figure out what is missing in this simple example. Is there a better way to do this? Or is this it and I just need to fix it?
THANK YOU in advance!
<html>
<head>
<title>Home</title>
<style>
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_51.gif) center no-repeat #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
</head>
<body>
<div id="loader" class="se-pre-con"></div>
<?php
include 'content/screen.php';
?>
</body>
</html>
SOLVED! I found and modified this AJAX code that worked for exactly what I was looking for (same page load with multiple options on what to load (by links). Thanks for all of the helpful messages directing me on the right path! This community is awesome!
<head>
<title>Demo</title>
<style>
#fade {
display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ababab;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .70;
filter: alpha(opacity=80);
}
#modal {
display: none;
position: absolute;
top: 45%;
left: 45%;
width: 64px;
height: 64px;
padding:30px 15px 0px;
border: 3px solid #ababab;
box-shadow:1px 1px 10px #ababab;
border-radius:20px;
background-color: white;
z-index: 1002;
text-align:center;
overflow: auto;
}
</style>
<script>
function openModal() {
document.getElementById('modal').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
function loadAjax(page) {
document.getElementById('results').innerHTML = '';
openModal();
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
closeModal();
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "content/"+page+".php", true);
xhr.send(null);
}
}
</script>
</head>
<body>
<div id="content">
Click to load page 1<br/><br/>
Click to load page 2<br/><br/>
<div id="results"><!-- Results are displayed here --></div>
<div id="fade"></div>
<div id="modal">
<img id="loader" src="loading.gif" />
</div>
</div>
</body>
</html>
It has all to do with the output buffering PHP applies.
This Stack Overflow link explains why it doesn't work as expected, a possible way to make it work and why you shouldn't make it work that way.
PHP always (unless specifically told not to) buffers the output before printing it. That means that when you actually print, PHP just stores the output text in the memory. After everything is printed, the contents stored in the memory gets printed and the memory gets flushed. It is not only PHP that does that. Almost all the I/O libraries across many languages and platforms has this feature, which is generally enabled by default.
Here is a relevant link that shows all the possible options to bypass or disable this feature. I personally think that you shouldn't disable it because the image will still need to be loaded and you won't be able to control the latency between PHP loading and image loading. I think in this situation maybe a solution that involved Ajax is more suitable for your needs.
Are you trying to show a loading animation/image for the PHP operation? If yes, then you should definitely do it with Ajax on a separate action.
Edit: sorry about not pasting the link: How to disable output buffering in PHP
Here's how to apply Show image while page is loading to your situation.
Replace your php tag with a div like this:
<div id="main"></div>
Then change your fadeout script like this:
<script>
$(document).ready(function() {
$("#main").load("content/screen.php", function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
});
});
</script>
<html>
<head>
<style>
.messboxcontent { display:none; background: rgba(0,0,0,.4); width: 400px; height: 100px; margin: 50px auto; padding: 15px;}
.mess_name {display: inline-block; cursor: pointer ; vertical-align: middle; width:165px; height:35px; background:blue; bottom:0px; left:144px; margin-right: 16px}
#msg_holder {overflow-x:scroll ;overflow-y: hidden; white-space: nowrap; position:fixed;height:110px; width:100%; background-color:yellow; bottom:0px;}
</style>
<script type="text/javascript" src="jquery.js" ></script>
<script>
$(document).ready( function() {
done();
});
function done() {
setTimeout( function() {
update();
done();
}, 20000);
}
function update() {
$.getJSON("fetch.php", function(data) {
$.each(data.result, function(){
var message = this['message'];
var name = this['name'];
call(name, message);
});
});
};
function call(name, message){
$("#msg_holder").append("<div class='mess_name'>" + name + "<div>");
$(".mess_test").click( function() {
$('div.messboxcontent').html(' name : '+ name + ' Message : ' + message);
$('div.messboxcontent').fadeIn();
return false;
});
}
</script>
</head>
<body>
<div class="messboxcontent"></div>
<div id="msg_holder"></div>
</doby>
</html>
and this is fetch.php file
{"result":[{"message":"this is haha","name":"haha"},{"message":"this is koka","name":"koka"}]}
when ever i click on a blue box that Contain any name, it show up the latest message and name. what i want is when i click on the box that contain haha as a name i want the box that contain message: this is haha,
You need to use append rather than html.
$('div.box').append( message );
I am writing again on a little import script which I have to split because of the data amount.
So I have a start.php with the fancy ajax action and the dbactions.php doing all the hard work.
The script first initializes the data, checks for doubles and creates a session with ids.
Then it should go through the ids in batches.
On first call the start.php has no errors, and the first part of the script runs well, in creates the user session with an array over 12k ids.
But when I output the result of the second initialize, it gives the the error message of
Uncaught SyntaxError: Unexpected token }
See screenshot attached:
The dbactions.php itself gives no error despite the missing $do variable, and the start.php at first load also not.
The start.php looks like this:
<?php
header('Content-Type: text/html; charset=utf-8');
session_start();
$_SESSION['start_counter'] = 0;
$_SESSION['batches'] = 1;
$_SESSION['array_counter'] = 0;
$_SESSION['batchcount'] = 0;
$_SESSION['newsletter'] = 0;
?>
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DB-actions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function DoSomething(what){
var request = $.ajax({
url: "dbactions.php?do=" + what,
type: "GET",
dataType: "html"
});
$('#godosomething').attr('disabled','true');
$('#doing').show();
$('#callmsg').empty();
$('body').addClass('grey');
request.done(function(msg) {
$('#doing').hide();
$("body").removeClass("grey");
$("#callmsg").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
<style type="text/css">
padding, margin: 0;
body { padding:20px 0;}
p { padding-bottom:3px;}
#callmsg { margin:50px 0; }
#insertmsg { margin:50px 0; }
#doing { display:none; position:absolute; bottom:48%; right:48%; border: 1px solid green; padding: 20px; background-color:green; color: white;}
.grey { background-color: grey; opacity: 0.5;}
.green { color:green; }
</style>
</head>
<body>
<h1>Start the import</h1>
<button type="button" onclick="DoSomething('initialize')" id="godosomething">Go baby</button>
<div id="callmsg"></div>
<div id="doing">I am working, please wait...</div>
</body>
</html>
I know there are several threads about it, the suggestions where, that the charset is wrong (not as excepted from ajax), but I have this on each file:
header('Content-Type: text/html; charset=utf-8');
And there was a suggestion about the ' and the " marks, I tried to change them in the output, but it did not help.
I thought also of the long output of the print_r, but disabling it didn't help.
This is the second output:
echo '<h2>Batch successfull</h2>';
$_SESSION['start_counter'] = $_SESSION['start_counter'] + $numberofqueries;
$_SESSION['batches']++;
echo "<p>Next? <button type='button' onclick" . "='DoSomething('makearray')" ."id='godosomething'>Go baby</button></p>";
echo '<p>Batch'.$_SESSION['batches'].' from '.$_SESSION['batchcount'].'</p>';
echo '<pre>';
print_r($_SESSION['users']);
echo '</pre>';
ADDITIONAL EDIT
I uncommented the whole second output until the h2 echo, and it still give me the same error.
How can this be? So the error comes not from the second output?
you are not qouting this correctly.
'DoSomething('makearray')'
should be:
"DoSomething('makearray')"
And in php:
echo "<p>Start first? <button type='button' onclick" . "='DoSomething('makearray')" ."id='godosomething'>Go baby</button></p>";
Your CSS is invalid. Try this.
<style type="text/css">
padding { margin: 0;}
body { padding:20px 0;}
p { padding-bottom:3px;}
#callmsg { margin:50px 0; }
#insertmsg { margin:50px 0; }
#doing { display:none; position:absolute; bottom:48%; right:48%; border: 1px solid green; padding: 20px; background-color:green; color: white;}
.grey { background-color: grey; opacity: 0.5;}
.green { color:green; }
</style>
You have an error on your second button.
Change this
<button type="button" onclick="DoSomething(" makearray")"="" id="godosomething">Go baby</button>
To this
<button type="button" onclick="DoSomething('makearray')" id="godosomething">Go baby</button>
Change This -
echo "<p>Next? <button type='button' onclick" . "='DoSomething('makearray')" ."id='godosomething'>Go baby</button></p>";
To-
echo "<p>Next? <button type='button' onclick=DoSomething('makearray') id='godosomething'>Go baby</button></p>";
And let me know if it clicks or not.
EDIT--
Remove any dummy spaces/content from your file.
Change <!DOCTYPE> to <!DOCTYPE html>