can't call function alert fires with undefined variable
by pizzipie from LinuxQuestions.org on (#5PQ0Z)
I'm experimenting with a function to dynamically produce an input form. Before the function is called my alert() fires so the program won't ever call the function. I have tried putting the script with the function in the <head> tag and just before the <?body> tag. No difference.
Code:<!DOCTYPE html>
<html>
<head>
<title> Contacts2 v1.0 21 Sep 16, 2021 - querytest.php</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- ============== styles ================ -->
<!--<link rel="stylesheet " type="text/css" href="css/c2main.css" />-->
<!-- ============== scripts1 ================ -->
<script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script>
<script type="text/javascript" >
function getName() {
$(".container").show();
$(".container").append("<form id='revform' method='post' action='#'>");
$("#revform").append("<label class='Label1' for='name'>Name</label>")
.append("<input type='text' id='name' name='name'>")
.append("<input type='submit' id='sub' name='sub'>")
.append("</form");
$("#revform").submit(function(event) {
event.preventDefault();
return $('#name').val();
});
} // getName
</script>
</head>
<!-- =============== html ================== -->
<body>
<div id="wrapper">
<div class="check" id="selQchk">
<input id="ad_Checkbox1" class="ads_Checkbox " type="checkbox" value="All Home"/> All Home<br>
<input id="ad_Checkbox2" class="ads_Checkbox " type="checkbox" value="Search Home"/> Search Home<br>
<input id="ad_Checkbox3" class="ads_Checkbox " type="checkbox" value="All Work" /> All Work<br>
<input id="ad_Checkbox4" class="ads_Checkbox " type="checkbox" value="Search Work" /> Search Work<br>
<input id="ad_Checkbox5" class="ads_Checkbox " type="checkbox" value="Backup Database" /> Backup DB<br>
<input id="ad_Checkbox6" class="ads_Checkbox " type="checkbox" value="Restore Database" /> Restore DB<br>
<input type="button" class="cbut hov" id="again" name="again" value="Select Again" />
<input type="button" class="cbut hov" id="exit" name="exit" value="Go Back" />
</div> <!-- check -->
</div> <!--wrapper-->
<div class="container">
</div>
<script type="text/javascript" >
// ====================== .SUBMIT ======================================
var selectquery="";
var query=""
$(document).ready(function () {
$('#again').click(function () {location.href='querytest.php'});
$('#exit').click(function () {location.href='../index.html'});
$(".container").hide();
$('input[type="checkbox"]').on('change', function() { // get value from checkbox
$('input[type="checkbox"]').not(this).prop('checked', false);
selectquery= $('input[type="checkbox"]:checked').val();
if(selectquery=="All Home") {
query="SELECT * FROM `home` ORDER BY `name`;"
alert("Line 81..."+query);
}
else if(selectquery=="Search Home") {
// NEVER GETS TO THIS CALL
var name=getName();
query="SELECT `name` FROM `home` LIKE \"%"+name+"%\" ORDER BY `name`;"
// FIRES THIS IMMEDIATELY - with "query" undefined
alert("Line 86..."+query);
}
}); // checkbox
}); // ready
</script>
</body>
</html>Going 'nuts'.
Thanks for help in solving this!
R
Code:<!DOCTYPE html>
<html>
<head>
<title> Contacts2 v1.0 21 Sep 16, 2021 - querytest.php</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- ============== styles ================ -->
<!--<link rel="stylesheet " type="text/css" href="css/c2main.css" />-->
<!-- ============== scripts1 ================ -->
<script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script>
<script type="text/javascript" >
function getName() {
$(".container").show();
$(".container").append("<form id='revform' method='post' action='#'>");
$("#revform").append("<label class='Label1' for='name'>Name</label>")
.append("<input type='text' id='name' name='name'>")
.append("<input type='submit' id='sub' name='sub'>")
.append("</form");
$("#revform").submit(function(event) {
event.preventDefault();
return $('#name').val();
});
} // getName
</script>
</head>
<!-- =============== html ================== -->
<body>
<div id="wrapper">
<div class="check" id="selQchk">
<input id="ad_Checkbox1" class="ads_Checkbox " type="checkbox" value="All Home"/> All Home<br>
<input id="ad_Checkbox2" class="ads_Checkbox " type="checkbox" value="Search Home"/> Search Home<br>
<input id="ad_Checkbox3" class="ads_Checkbox " type="checkbox" value="All Work" /> All Work<br>
<input id="ad_Checkbox4" class="ads_Checkbox " type="checkbox" value="Search Work" /> Search Work<br>
<input id="ad_Checkbox5" class="ads_Checkbox " type="checkbox" value="Backup Database" /> Backup DB<br>
<input id="ad_Checkbox6" class="ads_Checkbox " type="checkbox" value="Restore Database" /> Restore DB<br>
<input type="button" class="cbut hov" id="again" name="again" value="Select Again" />
<input type="button" class="cbut hov" id="exit" name="exit" value="Go Back" />
</div> <!-- check -->
</div> <!--wrapper-->
<div class="container">
</div>
<script type="text/javascript" >
// ====================== .SUBMIT ======================================
var selectquery="";
var query=""
$(document).ready(function () {
$('#again').click(function () {location.href='querytest.php'});
$('#exit').click(function () {location.href='../index.html'});
$(".container").hide();
$('input[type="checkbox"]').on('change', function() { // get value from checkbox
$('input[type="checkbox"]').not(this).prop('checked', false);
selectquery= $('input[type="checkbox"]:checked').val();
if(selectquery=="All Home") {
query="SELECT * FROM `home` ORDER BY `name`;"
alert("Line 81..."+query);
}
else if(selectquery=="Search Home") {
// NEVER GETS TO THIS CALL
var name=getName();
query="SELECT `name` FROM `home` LIKE \"%"+name+"%\" ORDER BY `name`;"
// FIRES THIS IMMEDIATELY - with "query" undefined
alert("Line 86..."+query);
}
}); // checkbox
}); // ready
</script>
</body>
</html>Going 'nuts'.
Thanks for help in solving this!
R