Button click not working - javascript

The following code was working very well. Suddenly, the Edit button click stopped working. When the user used to click Edit button, a JSON code executed. But it is not recognizing the click now. Something happened accidentally? Please assist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script src="js/calendar.js" type="text/javascript"></script>
<link href="js/calendar.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/wysiwyg.css" type="text/css">
<script type="text/javascript" src="js/wysiwyg.js"></script>
<script type="text/javascript" src="js/wysiwyg-settings.js"></script>
<!-- JSON implementation to get data through JQuery/AJAX -->
<script type="text/javascript">
$(document).ready(function(){
$("#Edit").click(function(){
$.getJSON("fetchvalues.php?UpdateRecordID=" + $.cookie('UpdateRecordID'),
function(data){
//Fill the Form with the data values
document.getElementById('LDate').value = data[0];
document.getElementById('Places').value = data[1];
document.getElementById('Company').value = data[2];
document.getElementById('Designation').value = data[3];
document.getElementById('ProjectDetails').value = data[4];
document.getElementById('DesiredCandidate').value = data[5];
document.getElementById('HRName').value = data[6];
document.getElementById('HRContact').value = data[7];
document.getElementById('Email').value = data[8];
});
});
});
</script>
<title>Job Listing Entry</title>
</head>
<body>
<table id="main" cols="2">
<tr>
<td>
<Form id="frmNewEntry" method="post" action="insert_listing.php">
<table id="tblEntry" cols="3" style="border-color:lightblue; border-style:solid;">
<tr><td colspan="3" bgcolor="lightblue" align="center"><strong>Real-Time Vacancy Entry</strong></td></tr>
<tr><td>Date:</td><td><input id="LDate" name="LDate" type="text" size="20" maxlength="11"/>[Select Date from the Calendar Control]
<script type="text/javascript">
WYSIWYG.attach('all', full);
calendar.set("LDate");
</script></td>
<td>
<table>
<tr>
<td rowspan="6">
<!-- <iframe src="show_db_vacancy_entries.php" height="800px" width="300px" bordercolor="cyan">
</iframe> -->
</td>
</tr>
</table>
</td>
</tr>
<tr><td>Places:</td><td><input id="Places" name="Places" type="text" size="35" maxlength="30" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
<tr><td>Company:</td><td><input id="Company" name="Company" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);">
<!-- <input type="button" value="Make Initial Capital" align="left" onclick="this.value=MakeInitialCapital(this.value);"></tr> -->
<tr><td>Designation:</td><td><input id="Designation" name="Designation" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
<tr><td>Project Details:</td><td><textarea id="ProjectDetails" name="ProjectDetails" cols="100" rows="10"></textarea></td></tr>
<tr><td>Desired Candidate:</td><td><textarea id="DesiredCandidate" name="DesiredCandidate" rows="3" cols="100"></textarea> <br></td></tr>
<tr><td>HR Name:</td><td><input id="HRName" name="HRName" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"> <br></td></tr>
<tr><td>HR Contact:</td><td><input id="HRContact" name="HRContact" type="text" size="50"> <br></td></tr>
<tr><td>Email:</td><td><input id="Email" name="Email" type="text" size="50"> <br></td></tr>
<tr></tr>
<tr>
<td bgcolor="lightblue">
<input id="Clear" name="Clear" value="Clear" type="button" onclick="ClearFields();">
</td>
<td bgcolor="lightblue">
<input id='Submit' name='Submit' value='Submit' type='submit' />
</td>
</tr>
</table>
</Form>
</td>
<td>
<table id="list" cols="2" style="border:none">
<tr>
<td colspan="2" style="border:none">
<iframe src="show_db_vacancy_entries.php" height="600px" style="border:none;">
</iframe>
</td>
</tr>
<tr>
<td align="left">
<input id="Edit" name="Edit" value="Edit Record" type="button" />
</td>
<td align="right">
<input id="Delete" name="Delete" value="Delete" type="button" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script language="JavaScript" type="text/javascript">
function MakeInitialCapital(str)
{
return str.toLowerCase().replace(/\b[a-z]/g, cnvrt);
function cnvrt() {
return arguments[0].toUpperCase();
}
}
//Convert initials to capital in a certain control
function MakeInitialCapitalControl(controlName)
{
var ctrl = document.getElementById(controlName).value;
if(/^[A-Z]/.test(ctrl.value)) {
ctrl.value = ctrl.value.toLowerCase();
return;
}
/* ctrl.value = ctrl.value.toLowerCase().replace(/\b[a-z]/g, function {
return arguments[0].toUpperCase();
});*/
}
function ClearFields()
{
document.getElementById('Email').value = "";
document.getElementById('HRContact').value = "";
document.getElementById('HRName').value = "";
document.getElementById('DesiredCandidate').value = "";
document.getElementById('ProjectDetails').value = "";
document.getElementById('Designation').value = "";
document.getElementById('Company').value = "";
document.getElementById('Places').value = "";
document.getElementById('LDate').value = "";
}
</script>

I've tested the code, after removing all the external JS and CSS files, and it seems to work fine.
The problem is most likely with the JSON data that you are getting back. Perhaps you did something to the PHP file it is calling, so that the JSON object is malformed, or there is a PHP warning being printed. (Could be a result of a change in the PHP configuration, too)
I would suggest that you try using the page in Firefox with the Firebug addon active (or something equivalent). It will show you exactly what the JSON request is returning, and whether there are any errors with the request.

As Atli said, the code looks fine. Im curious about this $.cookie('UpdateRecordID'), being part of the querystring. What happens if the cookie is not set?
Can you verify a proper response via firebug?

Related

My Post methot in my PHP file and AJAX not working

I have the following problem, I am trying to use JQUERY and AJAX, but when I use the Post method, it does not post to the php file. I get an error undefined array key I know there are many more threads with this question, I've searched them all, watched a lot of tutorials, but nothing helps. The mistake remains. The weirdest thing is when I do a success check to see the value it shows the correct value. My source code is:
SevenTops_Test3.php
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Seven Tops Plovdiv</title>
<link rel="stylesheet" type="text/css" href="Style/mystyle2.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="Script/MyScript2.js"></script>
<script src="jquery-3.6.3.js"></script>
<script src="Raion.js"></script>
<script>
$(document).ready(function () {
$("#Raion").change(function () {
var x = $(this).val();
alert(x),
$.ajax({
url: 'fresh_db_raion3.php',
type: 'POST',
data: { raion : x },
success: function (data) {
alert(x);
// Stuff
},
error: function (data) {
alert("Not Ok");
// Stuff
}
});
});
});
</script>
<script>
$(document).ready(function () {
$("#Query").click(function () {
var x = 5;
alert(x);
$("#lists").load("fresh_db_raion3.php", { raion : x});
});
});
</script>
</head>
<body>
<?php
include 'db_connection_string.php';
include 'fresh_db_raion3.php';
?>
<div id="Top_Button">
<table>
<tr>
<td>
<input type="submit" class="Submit" id="Query" name="query" value="Заявка">
</td>
<td>
<input type="submit" class="Submit" id="Read" value="Преглед" />
</td>
<td>
<input type="submit" class="Submit" id="Delete" value="Изтрий" />
</td>
<td>
<button type="submit" class="Submit" id="Menu">
<img src="Picture/Menu.png" id="Menu_Img" />
</button>
</td>
</tr>
</table>
</div>
<hr />
<div>
<select id="Raion" name="raion" >;
<option selected disabled> Избор</option>
<?php
all_raion();
?>
</select>
</div>
<div id="lists" style="overflow:scroll;">
<?php
db_klient();
?>
</div>
<div id="Down_Control">
<table>
<tr>
<td>
<input type="number" id="number" />
</td>
<td>
<input class="label_down" id="label_down1" value="%" readonly>
</td>
<td>
<input type="checkbox" class="Submit" id="check" />
</td>
<td>
<input type="button" value="Запиши" class="Submit" id="Down_Btn_Insert" />
</td>
<td>
<textarea id="label_down2" readonly>кашон/стек</textarea>
</td>
<td>
<input type="checkbox" class="Submit" id="check1" />
</td>
</tr>
</table>
</div>
</body>
</html>
fresh_db_raion3.php
<?php
include "db_connection_string.php";
$getraion = $_POST['raion'];
echo $getraion;
function all_raion(){
$result_raion = $GLOBALS['db']->query('SELECT * FROM Raion');
$rowas_raion = $result_raion->fetchAll(PDO::FETCH_ASSOC);
foreach ($rowas_raion as $GLOBALS_k => $v)
{
echo '<option value=' . $GLOBALS_k . '>' . $v['Raion_Name'] . '</option>';
}
}
function db_klient(){
print_r( $GLOBALS['getraion']);
echo '<br>';
$result_klient = $GLOBALS['db']->query("SELECT* FROM Klient WHERE Raion_ID=". $GLOBALS['getraion']);
$row_klient = $result_klient->fetchAll(PDO::FETCH_ASSOC);
foreach ($row_klient as $kk => $vv)
{
echo '<input type=radio value=' . $vv['Klient_Name'] . ' name = klient_name>
<label>'. $vv['Klient_Name'] . '</label><br>';
}
}
I know the code must be very lame, but I'm very new..
And the database schema is this:
Raion CREATE TABLE "Raion"("Raion_ID" INTEGER PRIMARY KEY, "Raion_Name" TEXT NOT NULL)
Kategorii CREATE TABLE "Kategorii" ( "Kategorii_ID" INTEGER PRIMARY KEY, "Kategorii_Name" TEXT NOT NULL)
Stoki CREATE TABLE "Stoki" ( "Stoki_ID" INTEGER PRIMARY KEY, "Kategorii_ID" INTEGER NOT NULL, "Stoki_Name" TEXT NOT NULL)
Klient CREATE TABLE "Klient" ("Klient_ID" INTEGER PRIMARY KEY, "Raion_ID" INTEGER NOT NULL, "Klient_Name" TEXT NOT NULL)
youtube tutorials, answers in various topics in here in the forum

Enabling and Disabling buttons in html alternatively

When user open the page, the Update button must be disable and Edit button should be enable and there should be no chance to edit the text fields.
When user clicks on Edit button, the Update button must be enable and Edit button should be disable and the user able to edit only FirstName and LastName but he should not able to do edit the EmpId field.
Please help me in this.
This is some part of my code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function func1(){
document.getElementById("update").disabled=true;
}
function btnUpdate(){
if(document.getElementById("edit").clicked=true;){
document.getElementById("update").disabled=false;
}
}
</script>
</head>
<body onload="func1()">
<table rules="all" border="" style="position: absolute;left: 337px;top: 125px;">
<tr><td id="EmpID">EmpID:</td><td><input type="text" value="MGIS107"></td></tr>
<tr><td id="FirstName">FirstName:</td><td><input type="text" value="Vikas"></td></tr>
<tr><td id="LastName">LastName:</td><td><input type="text" value="Dubbaka"></td></tr>
<input type="button" value="Update" id="update">
<input type="button" value="Edit" id="edit" onclick="btnUpdate()">
</body>
</html>
Try the following way:
var empId = document.getElementById("EmpID");
var fName = document.getElementById("FirstName");
var lName = document.getElementById("LastName");
empId.disabled = true;
function func1(){
document.getElementById("update").disabled = true;
fName.disabled = true;
lName.disabled = true;
}
function btnUpdate(el){
document.getElementById("update").disabled = false;
el.disabled = true;
fName.disabled = false;
lName.disabled = false;
}
<body onload="func1()">
<table rules="all" border="" style="position: absolute;left: 337px;top: 125px;">
<tr><td>EmpID:</td><td><input type="text" id="EmpID" value="MGIS107"></td></tr>
<tr><td>FirstName:</td><td><input type="text" id="FirstName" value="Vikas"></td></tr>
<tr><td>LastName:</td><td><input type="text" id="LastName" value="Dubbaka"></td></tr>
<input type="button" value="Update" id="update">
<input type="button" value="Edit" id="edit" onclick="btnUpdate(this)">
</table>
</body>

input-field not refresh after receiving value

The entire process of collecting data from the first input-field and shipping to second input-field2 is working perfectly but so that the value actually goes to the second input-field i must delete some letter from first input-field and re-enter some number so that the value actually goes to second-input.
Gif of doubt.
$(document).ready(function () {
$(function () {
var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');
function onChange() {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
};
$('#postal_code')
.change(onChange)
.keyup(onChange);
});
});
First input represents this field postal_code & Second input represents this field cepAddressRouteTransporter.
<form action="transporter/route" method="post" role="form">
<table id="address">
<tr>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code" name="postal_code">
</td>
</tr>
</table>
<div class="input-field col s6">
<i class="material-icons prefix">directions</i>
<input placeholder="Ex: 18214-780" id="cepAddressRouteTransporter" name="cepAddressRouteTransporter" type="text" class="validate">
<label for="cepAddressRouteTransporter">CEP:</label>
</div>
</form>
Thanks for help!
you have to call your function onChange when the DOM is ready
onChange();
when you update the value, trigger the DOM event.
$('#postal_code').trigger('change');
$(function() {
var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');
function onChange() {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
};
$('#postal_code').change(onChange).keyup(onChange);
// fire as soon as DOM is ready
onChange();
var t = window.setInterval(function(){
var n = Math.floor(Math.random() * 100000);
$('#postal_code').val(n);
// when you update the value, trigger the DOM event
$('#postal_code').trigger('change');
},1000);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<form action="transporter/route" method="post" role="form">
<table id="address">
<tr>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code" name="postal_code" value="90210">
</td>
</tr>
</table>
<div class="input-field col s6">
<i class="material-icons prefix">directions</i>
<input placeholder="Ex: 18214-780" id="cepAddressRouteTransporter" name="cepAddressRouteTransporter" type="text" class="validate">
<label for="cepAddressRouteTransporter">CEP:</label>
</div>
</form>
</body>
</html>
#code_monk Thanks for your help, i've reshaped your recommendation and add a few new things.
$(function () {
var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');
function onChange() {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
};
$cepAddressRouteTransporterGoogleMaps.change(onChange).keyup(onChange);
$cepAddressRouteTransporter.change(onChange).keyup(onChange);
onChange();
var refresh = window.setInterval(function () {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
}, 3000);
});

Html with Javascript validation

The following program does not work as expected. I want to check the username and password, if they are correct then i need to navigate my page to the mentioned html.
Even though i gave the correct username and password i am getting incorrect values. Please correct the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>License Management System-Login</title>
</head>
<body bgcolor="00CCCC">
<h1 style="text-align:center">License Management System</h1>
<h3 style="text-align:center">Login</h3>
<div align="center">
<form method="post">
<table>
<tr>
<td>User Name:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Login" onclick="validate()"/></td>
</tr>
</table>
</form>
</div>
</body>
<script type="text/javascript">
function validate(){
var username = document.getElementsByName("username").value;
var password = document.getElementsByName("password").value;
if ( username === "admin" && password === "admin"){
alert ("Login successfully");
window.location.assign("/License_Mgnt_System/FirstPage.html");//redirecting to other page
return true;
}
else{
alert("Enter the correct details");
return false;
}
}
</script>
</html>
getElementsByName returns a collection. You need to add [0] to get the value of username and password.
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
Your getElementsByName systax is not correct. use below code and you will get proper value. :)
Solution
<!DOCTYPE html>
<html>
<head>
<title>License Management System-Login</title>
<script type="text/javascript">
function validate() {
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
if (username === "admin" && password === "admin") {
alert("Login successfully");
window.location.assign("/License_Mgnt_System/FirstPage.html");//redirecting to other page
return true;
}
else {
alert("Enter the correct details");
return false;
}
}
</script>
</head>
<body bgcolor="00CCCC">
<h1 style="text-align:center">License Management System</h1>
<h3 style="text-align:center">Login</h3>
<div align="center">
<form method="post">
<table>
<tr>
<td>User Name:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Login" onclick="validate()"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Use getElementById("id")
and add id attributes to the controls. Remove name attributes.

JavaScript uncaught reference error using onclick attribute in input form tag

JavaScript Function
function submitToServer(formObject)
{
if(validateUserName(formObject["userName"]) && validatePassword(formObject["password"]))
{
formObject.submit();
}
}
HTML FORM FIELD
<form method="POST" action="SignIntoPortal">
<table>
<tr>
<td> User Name : </td>
<td>
<input type="text" id="userName" name="userName" onblur="validateUserName(this)">
<span id="userName_help" />
</td>
</tr>
<tr>
<td> Password : </td>
<td>
<input type="password" id="password" name="password" onblur="validatePassword(this)">
<span id="password_help" />
</td>
</tr>
<br>
</table>
<input type="button" name="submitButton" id="submitButton" value="Submit" onclick="submitToServer(this.form);">
</input>
</form>
The above is my code, which validates data and submits the form. but i keep getting
Uncaught ReferenceError: submitToServer is not defined
error, which I am unable to resolve. what could be the reason?
But, when I tried it with different form it worked with different names and fields.
EDIT
the difference between the code that worked and this is that, the former code does not use table it works smooth. Does scope change with table ?
You can find the code here CODE FIDDLE
You can get .html file here
SignIn.html
<html>
<head>
<title>Sign into Shopping Zone</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-8">
<style>
body
{
font: 14px verdana;
}
h1
{
font: arial-black;
color: blue;
}
</style>
<script type="javascript" language="text/javascript">
function submitToServer(formObject)
{
if(validateUserName(formObject["userName"]) && validatePassword(formObject["password"]))
{
formObject.submit();
}
}
function validateUserName(inputField)
{
if(inputField.value.length == 0)
{
document.getElementById("userName_help").innerHTML = "Please enter value";
return false;
}
else
{
document.getElementById("userName_help").innerHTML = "";
return true;
}
}
function validatePassword(inputField)
{
if(inputField.value.length == 0)
{
document.getElementById("password_help").innerHTML = "Please enter value";
return false;
}
else
{
document.getElementById("password_help").innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<h1><b><i>Shopping Zone</i></b></h1>
<p> Kindly Provide Login info
</p>
<!-- SignIn Form Data for Passing to SignIntoPortal-->
<form method="POST" action="SignIntoPortal">
<table>
<tr>
<td> User Name : </td> <td><input type="text" id="userName" name="userName" onblur="validateUserName(this)"><span id="userName_help" /></td>
</tr>
<tr>
<td> Password : </td> <td><input type="password" id="password" name="password" onblur="validatePassword(this)"><span id="password_help" /></td>
</tr>
<br>
</table>
<input type="button" name="submitButton" id="submitButton" value="Submit" onclick="submitToServer(this.form)"></input>
</form>
</body>
</html>
in the script header, your 'type' and 'language' attributes are mixed up. type should be 'text/javascript' and language should be 'javascript' although the language attribute is not required
<script type="text/javascript" language="javascript">

Categories

Resources