?
Solved

Assign a value generated by a jquery timer to a hidden form variable.

Posted on 2016-09-16
11
Medium Priority
?
87 Views
Last Modified: 2016-09-20
Thank you all in advance!

I would like to assign a value generated by a jquery timer to a hidden form variable and then store it in a MySQL db in the cloud.

The timer works great but the time value is not being passed to the db. A new row is created but the form data is not being written into the column.

Heres the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>TimeSubmitTest</title>

</head><body>
<form method="post" action="inserttime.php" name="Time Submit Test"><br>
<input id="start" name="start" value="" type="hidden"> <input id="end" name="end" value="" type="hidden"> <input id="myButton" value="Start" type="button"> <span id="result"></span>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="timer.js"></script><br>
<input name="start" type="hidden"><br><br><input name="end" type="hidden"><br><br><br><br>
<br>
<input name="Submit" value="Submit" type="submit">

$("#start").val(start);
$("#end").val(end);



</form>
<form method="post" action="inserttime.php" name="Time Submit Test"></form></body></html>

Open in new window


Heres the php action page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>insert.php</title>

<?php $user_name = "*******";
$password = "*****";
$database = "***********";
$server = "***********";
mysql_connect("$server","$user_name","$password");
mysql_select_db("$database");
$order = "INSERT INTO tbl_AuditCntrol (start,end)
VALUES
('$_POST[start]','$_POST[end]')";
$result = mysql_query($order);
if($result){
echo("<h1>
	<br>Your Audit Data Was Submitted Successfully!
	</h1>");
} else{
echo("<br>Input data is fail");
}
?>
</head><body>
<br>
</body></html>

Open in new window

0
Comment
Question by:Victor Nares
  • 4
  • 3
  • 2
  • +1
11 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 41802199
could you post timer.js
why do you have javascript with no tag line 14 and 15 ?
0
 
LVL 9

Expert Comment

by:Mukesh Yadav
ID: 41802201
There are two problems

1st is this $("#start").val(start);$("#end").val(end); should be wrapped in script tag
<script>$("#start").val(start);$("#end").val(end);</script>

Open in new window


2nd is the way of accessing values from array id not right:
$order = "INSERT INTO tbl_AuditCntrol (start,end) VALUES ($_POST['start'], $_POST['end'])";

Open in new window


And your sql query is sql injectable so try PDO or mysqli if can't implement any of them atleast use mysql_real_escape_string function.
0
 

Author Comment

by:Victor Nares
ID: 41802224
timer.js :

$('#myButton').click(function() {
  var d = new Date();
  var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
  if ($(this).val() === "Start") {
    $('#start').val(time);
    $(this).val("End");
  } else if ($(this).val() === "End") {
    $('#end').val(time);
    $(this).val("Done");
    $('#result').text("Start time: " + $('#start').val() + " and End time: " + $('#end').val());
  }
});

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 9

Expert Comment

by:Mukesh Yadav
ID: 41802230
What is this?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 41802245
rename(or remove its name) your submit button :

<input name="mySubmit" value="Submit" type="submit" />

Open in new window


also, line 20, I see a duplicate form, remove it if it was not a bad copy/paste
0
 

Author Comment

by:Victor Nares
ID: 41802432
Still no luck:

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Time Submit Form Test</title>

</head><body>
<form method="post" action="submittime.php" name="SubmitTime"><br>
<input id="start" name="start" value="" type="hidden"> <input id="end" name="end" value="" type="hidden"> <input id="myButton" value="Start" type="button"> <span id="result"></span>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="timer.js"></script><br>
<input name="start" type="hidden"><br>
<br>
<input name="end" type="hidden"><br>
<br>
<br>
<br>
<script>$("#start").val(start);$("#end").val(end);</script>
<input name="mySubmit" value="Submit" type="submit">
</form>
</body></html>

Open in new window


and the php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>insert.php</title>

<?php $user_name = "vnares_optum";
$password = "o******";
$database = "*****";
$server = "********";
mysql_connect("$server","$user_name","$password");
mysql_select_db("$database");

$order = "INSERT INTO tbl_AuditCntrol (start,end) VALUES ($_POST['start'], $_POST['end'])";
 



if($result){
echo("<h1>
	<br>Your Audit Data Was Submitted Succesfully!
	</h1>");
} else{
echo("<br>Input data is fail");
}
?>
</head><body>
<br>
</body></html>

Open in new window

0
 
LVL 83

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 41802473
if you replace the method from post to get, are you seeing the start and end and their respective value in the url after clicking the submit button ?

<form method="get" action="submittime.php" name="SubmitTime"><br>
0
 
LVL 83

Expert Comment

by:leakim971
ID: 41802483
another thing is I don't see quotes around : $_POST['start'] and $_POST['end']

what about :
$order = "INSERT INTO tbl_AuditCntrol (start,end) VALUES ('" . $_POST['start'] ."','" . $_POST['end'] . "')";

Open in new window

0
 
LVL 61

Accepted Solution

by:
Julian Hansen earned 1000 total points
ID: 41802694
Here is a working solution using mysqli
HTML (superfluous elements removed)
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>TimeSubmitTest</title>
</head>
<body>
<form method="post" action="inserttime.php" name="Time Submit Test"><br>
  <input id="start" name="start" value="" type="hidden"> <input id="end" name="end" value="" type="hidden" />
  <input id="myButton" value="Start" type="button" /> <span id="result"></span>
  <br/>
  <input name="Submit" value="Submit" type="submit">
</form>

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function() {
  $('#myButton').click(function() {
    var d = new Date();
    // Leading 0's
    var time = ("00" + d.getHours()).substr(-2) + 
          ":" + 
          ("00" + d.getMinutes()).substr(-2) + 
          ":" + 
          ("00" + d.getSeconds()).substr(-2);
          
    if ($(this).val() === "Start") {
      $('#start').val(time);
      $(this).val("End");
    } 
    else {
      $('#end').val(time);
      $(this).val("Done");
      $('#result').text("Start time: " + $('#start').val() + " and End time: " + $('#end').val());
    }
  });

});
</script>
</body>
</html>

Open in new window

PHP
(NB You had a missing closing } in your PHP code which would have generated an error)
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>insert.php</title>
<?php
$user_name = "*****";
$password = "*****";
$database = "*****";
$server = "*****";
// GET YOUR DATA
$start = empty($_POST['start']) ? false : $_POST['start'];
$end = empty($_POST['end']) ? false : $_POST['end'];

// ASSUME INVALID
$result = "Invalid input";
// IF DATA IS VALID
if ($start && $end) {
  // NB: MySQL LIB HAS BEEN DEPRECATED - DON'T USE IT
  // OPEN CONNECTION TO DB USING MySQLi
  $mysqli = new mysqli($server,$user_name,$password, $database);

  // SANITIZE DATA
  $start = $mysqli->real_escape_string($start);
  $end = $mysqli->real_escape_string($end);

  // CREATE QUERY  
  $order = "INSERT INTO tbl_AuditCntrol (start,end) VALUES ('{$start}','{$end}')";
  $result = $mysqli->query($order);
  // IF QUERY SUCCESSFULL
  if($result){
    // WE ARE IN THE <head> SO DON'T OUTPUT DIRECTLY
    // CREATE RESULT MESSAGE USING HEREDOC AND SAVE
    // IN $result FOR OUTPUT IN THE <body>
    $result = <<< RESULT
<h1>
  <br>Your Audit Data Was Submitted Successfully!
</h1>
RESULT;
  } 
  // QUERY FAILED: SET RESULT MESSAGE
  else {
    $result = "<br>Input data failed";
  }
} // THIS BRACKET WAS MISSING IN YOUR CODE
?>
</head>
<body>
<?php echo $result;?>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:Victor Nares
ID: 41807352
Once I reviewed the working code provided by Julian, realized their are three languages at work here...and I'll have to review each:

HTML- Form tags not properly set in my code.
PHP- Using deprecated Code to update MySQL db in my code.
JQuery- Generating and Subsequently Assigning values to variables and passing them over.

Switching Action to GET from POST was a great way to trouble shoot what was being passed to the action page. Thank you leakim971!
0
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 41807385
Another option that you can use that does not require changing from POST to GET is to create a reflect.php script. This script will show you everything that was sent to it including files.
reflect.php
<?php
 header('Access-Control-Allow-Origin: *');  

echo "POST\n";
echo "<pre>" . print_r($_POST, true) . "</pre>";
echo "GET\n";
echo "<pre>" . print_r($_GET, true) . "</pre>";
if ($_FILES) {
  echo "FILES\n";
  echo <<< TABLE
  <table class="table">
    <tr>
      <th>ID</th><th>Name</th><th>Type</th><th>Size</th>
TABLE;
  foreach($_FILES as $id => $file) {
    echo <<< ROW
    <tr>
      <td>{$id}</td><td>{$file['name']}</td><td>{$file['type']}</td><td>{$file['size']}</td>
    </tr>

ROW;
    unlink($file['tmp_name']);
  }
}
echo <<< TABLE
  </table>
TABLE;

Open in new window

1

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question