Solved

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

Posted on 2016-09-16
11
48 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 82

Expert Comment

by:leakim971
Comment Utility
could you post timer.js
why do you have javascript with no tag line 14 and 15 ?
0
 
LVL 6

Expert Comment

by:Mukesh Yadav
Comment Utility
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
Comment Utility
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
 
LVL 6

Expert Comment

by:Mukesh Yadav
Comment Utility
What is this?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:Victor Nares
Comment Utility
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 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
Comment Utility
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 82

Expert Comment

by:leakim971
Comment Utility
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 51

Accepted Solution

by:
Julian Hansen earned 250 total points
Comment Utility
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
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now