Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2016-09-16
11
Medium Priority
?
85 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
11 Comments
 
LVL 82

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 9

Expert Comment

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

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 82

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 82

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 59

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 59

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

610 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