This form is for a visitor sign in, which you can select the number of visitors with you from 1 - 9.
When selecting "1" and hitting submit I keep getting undefined index for "visitorname1".
PHP Form
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Visitor Sign In</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
//when the webpage has loaded do this
$(document).ready(function() {
//if the value within the dropdown box has changed then run this code
$('#noguests').change(function(){
//get the number of fields required from the dropdown box
var num = $('#noguests').val();
var i = 0; //integer variable for 'for' loop
var html = ''; //string variable for html code for fields
//loop through to add the number of fields specified
for (i=1;i<=num;i++) {
//concatinate number of fields to a variable
html += 'Visitor ' + i + ': <input type="text" name="visitorname' + i + '" id="visitorname' + i + '"/><br/>';
}
//insert this html code into the div with id catList
$('#guestList').html(html);
});
});
</script>
</head>
<body>
<p align="center"><img src="images/logo.jpg" width="300"></p>
<h1 align="center">Landmark Group of Builders :: Visitor Sign In</h1>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><span class="large">Please sign-in below:</span></td>
</tr>
<form id="form1" name="form1" method="post" action="submit_guest.php">
<tr>
<td bgcolor="#EAEAEA" align="right"><b>Visiting</b></td>
<td bgcolor="#EAEAEA"><input name="visiting" type="text" required id="visiting"></td>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="right"><b>No. of Guests</b></td>
<td bgcolor="#EAEAEA">
<select id="noguests" name="noguests">
<option value="0">- SELECT -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td></tr>
<td id="guestList">
</td></tr>
</tr>
<tr>
<td colspan="2" align="right">
<input type="text" name="stat" size="40" value="1" readonly class="hidden"><br><input type="submit" value="Sign In" class="css3button"></td>
</tr>
</form>
</table>
</body>
</html>
UPDATE.php
<?php
$intime = date('Y-m-d H:i:s');
$visitorname1 = $_POST['visitorname1'];
$visting = $_POST['visiting'];
$stat = $_POST['stat'];
$noguests = $_POST['noguests'];
$sql = new mysqli('localhost','x','x1!','x1');
$query = $sql->prepare("INSERT INTO `visitors` (visitorname1, visiting, intime, stat, noguests) VALUES (?,?,?,?,?);");
$query->bind_param('sssii',$_POST['visitorname1'],$_POST['visiting'],$_POST['intime'],$_POST['stat'],$_POST['noguests']);
/* close our connection */
$query ->execute();
if ( $query ) {
echo "<p align='center' class='confirmation'><img src='images/logo.jpg' width='300px'><BR><BR><img src='images/accepted.png'> Thank You! You have been signed in!</p>";
} else {
echo "Your request failed. Please try again.";
}
$sql->close();
?>
I am not sure why I keep getting the undefined as I verified when I add a text box by selecting "1", the id and name of the textbox is "visitorname1".
Any help would be greatly appreciated.
Remove var i = 0; and:
change your:
for (i=1;i<=num;i++) {
to
for (var i = 0;i<=num;i++) {
Because your dynamic inputs have no value attribute.
In the javascript you have the NAME set to name="visitorname" while in the PHP you have $_POST['visitorname1'];
SOLUTION: change the PHP to $_POST['visitorname'];
It's because of using Form tag in a wrong place!
correct your html code like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Visitor Sign In</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
//when the webpage has loaded do this
$(document).ready(function() {
//if the value within the dropdown box has changed then run this code
$('#noguests').change(function(){
//get the number of fields required from the dropdown box
var num = $('#noguests').val();
var i = 0; //integer variable for 'for' loop
var html = ''; //string variable for html code for fields
//loop through to add the number of fields specified
for (i=1;i<=num;i++) {
//concatinate number of fields to a variable
html += 'Visitor ' + i + ': <input type="text" name="visitorname' + i + '" id="visitorname' + i + '"/><br/>';
}
//insert this html code into the div with id catList
$('#guestList').html(html);
});
});
</script>
</head>
<body>
<p align="center"><img src="images/logo.jpg" width="300"></p>
<h1 align="center">Landmark Group of Builders :: Visitor Sign In</h1>
<form id="form1" name="form1" method="post" action="submit_guest.php">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><span class="large">Please sign-in below:</span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="right"><b>Visiting</b></td>
<td bgcolor="#EAEAEA"><input name="visiting" type="text" required id="visiting"></td>
</tr>
<tr>
<td bgcolor="#EAEAEA" align="right"><b>No. of Guests</b></td>
<td bgcolor="#EAEAEA">
<select id="noguests" name="noguests">
<option value="0">- SELECT -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td></tr>
<td id="guestList">
</td></tr>
</tr>
<tr>
<td colspan="2" align="right">
<input type="text" name="stat" size="40" value="1" readonly class="hidden"><br><input type="submit" value="Sign In" class="css3button"></td>
</tr>
</table>
</form>
</body>
</html>
Related
The issue is with the line total += parseInt($(el).val()); If e.g. parseInt($(el).val()) holds the value 200 (which I confirmed with an alert) the value set to Total is NaN.
If I remove the + so that total = parseInt($(el).val()); then total will return the value 200 and not NaN.
Can anyone see what's causing this NaN issue?
Thanks
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
path = (e.target.value);
//open callback function
$('#targetPane').load('path', function() {
//open callback contents
function getTotal() {
var total = 0;
$("input, select").each(function(i, el) {
if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());
alert("total=" + total);
} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());
}
}
});
return total;
}
$('input[type="checkbox"], select').change(function() {
//$(document).on('change', 'input', 'select', function() {
$("#sum").text(getTotal());
});
//close callback contents
}); //close callback function
});
}); //close jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.load Test</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
</head>
<body class="py-4">
<main>
<div class="container">
<div class="row mb-3">
<select name="myCourses" id="courses" autocomplete="off">
<option value="" selected>Select</option>
<option value="includes/inc_1_working.html">Load inc_1.html</option>
<!-- assume more dropdown options -->
</select>
<!-- load include file here -->
<div id="targetPane"></div>
</div>
<!--close row-->
</div>
<!-- close container -->
</main>
</body>
</html>
Loaded in file below: includes/inc_1_working.html
<table width="100%" id="form1">
<tr><div id="test"></div>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n1" value="200" data-rel="div.n1"> Show Price1
</label>
</td>
<td>
<div class="n1 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n2" value="200" data-rel="div.n2"> Show Price
</label>
</td>
<td>
<div class="n2 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n3" value="200" data-rel="div.n3"> Show Price
</label>
</td>
<td>
<div class="n3 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n4" data-rel="div.n4">
<option value="0" selected>Choose...</option>
<option value="10">item 1</option>
<option value="20">item 2</option>
</select>
</label>
</td>
<td>
<div class="n4"></div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n5" data-rel="div.n5">
<option value="0" selected>Choose...</option>
<option value="3">item 1</option>
<option value="4">item 2</option>
</select>
</label>
</td>
<td>
<div class="n5"></div>
</td>
</tr>
<tr>
<td> Total: </td>
<td>
<div id='sum'>0</div>
</td>
</tr>
</table>
remove arrow fuction jquery ready
add old style work for me
Replace parseInt() with Number()
Solution:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.load Test</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
path = (e.target.value);
//open callback function
$('#targetPane').load('path', function(){
//open callback contents
//hide all values
$("#targetPane input, #targetPane select").each(function(i, el) {
$($(el).data("rel")).hide();
});
function getTotal() {
var total = 0;
$("#targetPane input, #targetPane select").each(function(i, el) {
if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());
} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());
}
}
});
return total;
}
$('select #courses').change(function() {
$($(el).data("rel")).hide(getTotal());
});
$('#targetPane input[type="checkbox"], #targetPane select').change(function() {
//$(document).on('change', 'input', 'select', function() {
$("#sum").text(getTotal());
});
//close callback contents
}); //close callback function
});
}); //close jQuery
</script>
<link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
</head>
<body class="py-4">
<main>
<div class="container">
<div class="row mb-3">
<select name="myCourses" id="courses" autocomplete="off">
<option value="0" selected>Select</option>
<option value="includes/inc_1_working.html">Load inc_1.html</option>
<!-- assume more dropdown options -->
</select>
<!-- load include file here -->
<div id="targetPane"></div>
</div> <!--close row-->
</div> <!-- close container -->
</main>
</body>
</html>
I want the visitors to be able to open the search form in a new tab when they selckt the checkbox.
And I have trouble getting TARGET = "_ blank" in the select menu to work.
Thanks in advance!
<html>
<head>
<title></title>
<script language="JavaScript">
function dosearch() {
var sf=document.F;
var submitto = sf.sengines.options[sf.sengines.selectedIndex].value + escape(sf.searchit.value);
window.open(submitto,'bottom');
return false;
}
</script>
</head>
<body onLoad="document.F.searchit.focus();">
<table width="100%" border="0"><tr align="left" valign="top"><td width="200">
<form name="guideform">
In:
<select name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value + document.F.searchit.value">
<option value="downloads.html?downloads=selected&searchit=">Downloads</option>
</select>
</form></td>
<td><form name="F" onSubmit="return dosearch();">
Search:
<select name="sengines">
<option value="http://download.cnet.com/s/" >Download.com</option>
<option value="http://filehippo.com/search?q=" TARGET="_blank">Filehippo</option>
</select>
For:
<input name="searchit" value="" type="text" size="45">
<input type="submit" name="SearchSubmit" value="Search">
<input type="checkbox" name="Newtab" target="_blank">New tab
</form></td>
<td width="1"></td></tr></table>
</body>
</html>
Try:
<option>
Filehippo
</option>
I have looked at many other topics on here that are similar to my problem but none of the answers work for me.
I am trying to call a javascript function when a button is clicked but it does nothing.
I hvae tried changing the call to onclick="javascript:ClearFields();" and onclick="ClearFields()" and it doesn't work either.
I have to use a button (not submit) calling javascript
My jsp code is:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<!-- if the user is logged in then we need to render one version of the page
consequently if the user is logged out we need to render a
different version of the page -->
<script type="text/javascript">
function ClearFields() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("operator").value = "+";
}
</script>
<c:choose>
<c:when test="${empty user}">
<p>
${msg} <br/>
Would you like to log in? <br/>
Sign in or register <br/>
</p>
</c:when>
<c:otherwise>
<p>
Welcome ${user.email}
<p/>
<p><h1>Calculator</h1></p>
<!-- form of basic input types -->
<form action="/" method="post">
<table border="0">
<tr><td>
Number 1: <input type="text" name="num1" value="${ans}"/><br/>
</td><td>
Number 2: <input type="text" name="num2" /><br/>
</td></tr>
<tr><td colspan=2 align=center>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
</td></tr>
<tr><td align=center>
<!-- Button to submit the form to the servlet when clicked -->
<input type="submit" value="Calculate"/><br/>
</td>
<td align=center>
<input type="button" onclick="ClearFields();" value="Clear"/><br/>
<!-- <input type="button" onclick="ClearFields();" value="Clear"/><br/> -->
</td></tr>
<tr><td colspan=2>
<h1> ${msg}</h1>
</td></tr>
</table>
</form>
<p>
You can signout here
</p>
</c:otherwise>
</c:choose>
</body>
</html>
The generated html is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
</head>
<body>
<!-- if the user is logged in then we need to render one version of the page
consequently if the user is logged out we need to render a
different version of the page -->
<script type="text/javascript">
function ClearFields() {
document.getElementById("num1").value = "";
document.getElementById("num2").value = "";
document.getElementById("operator").value = "+";
}
</script>
<p>
Welcome test#example.com
<p/>
<p><h1>Calculator</h1></p>
<!-- form of basic input types -->
<form action="/" method="post">
<table border="0">
<tr><td>
Number 1: <input type="text" name="num1" value=""/><br/>
</td><td>
Number 2: <input type="text" name="num2" /><br/>
</td></tr>
<tr><td colspan=2 align=center>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> / </option>
</select>
</td></tr>
<tr><td align=center>
<!-- Button to submit the form to the servlet when clicked -->
<input type="submit" value="Calculate"/><br/>
</td>
<td align=center>
<input type="button" onclick="ClearFields();" value="Clear"/><br/>
</td></tr>
<tr><td colspan=2>
<h1> Welcome to the Calculator</h1>
</td></tr>
</table>
</form>
<p>
You can signout here
</p>
</body>
</html>
Any ideas where I am going wrong?
Could it just be that the page is no resubmitting? It seems to be.
Your JavaScript:
document.getElementById("num1").value = "";
Your HTML:
<input type="text" name="num1" value=""/>
getElementById gets an element by its id, and your element doesn't have any id. You need to add an id attribute.
I want that when i choose input selected option, to display my desire image above it, in a DIV.
See Code here: http://jsfiddle.net/rami7250/7qkmg/
See Image example here (Unselected): http://oi60.tinypic.com/2isiohi.jpg
<table width="600">
<tr>
<td width="200">
<label for="select-song">Select your favourite song</label>
</td>
<td width="200">
<label for="select-gender">Select gender</label>
</td>
<td width="100">
<label for="your-mood">Your mood</label>
</td>
<td width="100">
</td>
</tr>
<tr>
<td>
<select name="song" id="select-song" class="input-step">
<option value="">Select song</option>
<option value="Katyusha">Katyusha</option>
<option value="Gangnam style">Gangnam style</option>
</select>
</td>
<td>
<select name="gender" id="select-gender" class="input-step">
<option>Select gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
<td>
<select name="gender" id="select-gender" class="input-step">
<option>Select gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
This is just a simple example with only one options to give you an idea
Fiddle
<script type="text/javascript">
$(document).ready(function(){
$('#select-song').on('change',function(){
$('#show img').remove()
var img=$('option:selected').val()
$('<img>').attr('src',img).appendTo('#show')
})
})
</script>
If this solution does not suit your needs, i apologize for making you lose time.
I pass you all code
this is a working online page link: http://www.videmadesign.herobo.com/stak1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>test</title>
<style type="text/css">
.hidden {
display: none;
}
table {
border: 1px dashed #999;
}
table td {
padding: 5px;
border: 1px dashed #999;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--in fiddle you have select domready event from sx tabs but you have no insert in the script-->
<!--if you put the script in the javascript section of fiddle page you can not insert domready event in the script-->
<!--but if you put the script in html section of fiddle page you have to insert domready event in the script-->
<script type="text/javascript">
/*document ready event you forgot*/
$(document).ready(function(){
$('#select-song').on('change',function(){
$('#show img').remove()
var img=$('option:selected').val()
$('<img>').attr('src',img).appendTo('#show')
})
})
</script>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<table width="600">
<tr>
<td width="200">
<label for="select-song">Select your favourite song</label>
</td>
</tr>
<tr>
<td>
<select name="song" id="select-song" class="input-step">
<option value=""></option>
<option value="http://s25.postimg.org/5fhbardwb/mini_botti.jpg">aaa</option>
<option value="http://s25.postimg.org/3oya99wd7/mini_topo.jpg">bbb</option>
<option value="http://s25.postimg.org/3u0pkd1cr/minigatto.jpg">ccc</option>
</select>
</td>
</tr>
</table>
<div id="show"></div>
</body>
</html>
Off the top of my head, I can think of a few suggestions:
1) Add an empty img tag with an id in each of the table cells you'd like the image to appear. So for example, in the "Select your mood" cell, change to the following:
<td width="100">
<label for="your-mood">Your mood</label>
<img id="mood" src="" />
</td>
2) Add some jquery code where you add an event to the select list, isolate which option is selected, and append an image to the div in the table cell. Something along the lines of this:
$('#select-mood').on('change', function() {
var selected = $(this).find('option:selected').val();
$('#mood).attr('src') = selected + '.jpg';
});
I am struggling with a submit button where nothing happens when clicked. I believe the problem is no editvalidation() is being triggered but I am not sure. If this is the case, how can it be triggered? I want the the validation to be displayed above the submit button it self. My question is simply how to get the submit button doing something?
I am getting no errors:
CODE:
<script type="text/javascript">
function editvalidation()
{
if ($("#coursesDrop").val()==""){
$("#courseAlert").html("Please Select a Course from the Course Drop Down Menu");
}
if ($("#coursesDrop").val()!="" && $("#courseadd").children().length==0){
$("#courseAlert").html("You have not Selected any Students you wish to Add into Course");
}
if ($("#coursesDrop").val()!="" && $("#courseadd").children().length!=0){
return true;
}
return false;
}
</script>
<div id='lt-container'>
<form action='addstudentcourse.php' method='post' id='courseForm'>
<p id='warnings'></p>
<p><strong>Courses:</strong> <select name="course" id="coursesDrop">
<option value="">Please Select</option>
<option value='19'>BIO234 - Biology</option>
<option value='1'>INFO101 - Bsc Information Communication Technology</option>
<option value='2'>INFO102 - Bsc Computing</option>
</select> </p>
</form>
<form id='updateForm'>
<p><strong>Course Chosen:</strong></p>
<table>
<tr>
<th></th>
<td><input type='hidden' id='currentCourseId' name='CourseIdcurrent' value='' /> </td>
</tr>
<tr>
<th>Course ID:</th>
<td><input type='text' id='currentCourse' name='Coursecurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Course Name:</th>
<td><input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' /> </td>
</tr>
<tr>
<th>Duration (Years):</th>
<td><input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/> </td>
</tr>
</table>
</form>
<form id='studentExistForm'>
<p><strong>Current Students in Chosen Course:</strong></p>
<p><select name="studenttextarea" id="studentselect" size="10"></select></p>
</form>
</div>
<div id='rt-container'>
<form id='studentRemainForm'>
<p><strong>Available Students to Enrol:</strong></p>
<p><select multiple="multiple" name="remaintextarea" id="studentremain" size="10"></select></p>
<table id='addtbl'>
<tr>
</table>
</form>
<form id='studentAddForm'>
<p><strong>Students to Add to Course:</strong></p>
<p><select multiple="multiple" name="addtextarea" id="studentadd" size="10"></select></p>
<table id='removetbl'>
<tr>
</table>
<div id='studentAlert'></div>
</form>
<p><button id='submitstudents'>Submit Students</button></p>
</div>
<script type="text/javascript">
function showConfirm(){
var courseNoInput = document.getElementById('currentCourse').value;
var courseNameInput = document.getElementById('currentCourseName').value;
if (editvalidation()) {
var confirmMsg=confirm("Are you sure you want to add your selected Students to this Course:" + "\n" + "Course: " + courseNoInput + " - " + courseNameInput);
if (confirmMsg==true)
{
submitform();
}
}
}
$('body').on('click', '#submitstudents', showConfirm);
</script>
I formatted your code and fixed it so that submit button is working.
Also I added alerts on beginning of every function so that you can see that they are called.
You need to correct other code also if you want your script to fully works.
Link to working example: http://simplestudio.rs/yard/submit_button/form.html
Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#submitstudents").click(function() {
showConfirm();
});
});
function showConfirm() {
alert("function showConfirm is called");
var courseNoInput = document.getElementById('currentCourse').value;
var courseNameInput = document.getElementById('currentCourseName').value;
if (editvalidation()) {
var confirmMsg=confirm("Are you sure you want to add your selected Students to this Course:" + "\n" + "Course: " + courseNoInput + " - " + courseNameInput);
if (confirmMsg==true) {
submitform();
}
}
}
function editvalidation() {
alert("function editvalidation is called");
if ($("#coursesDrop").val()==""){
$("#courseAlert").html("Please Select a Course from the Course Drop Down Menu");
}
if ($("#coursesDrop").val()!="" && $("#courseadd").children().length==0){
$("#courseAlert").html("You have not Selected any Students you wish to Add into Course");
}
if ($("#coursesDrop").val()!="" && $("#courseadd").children().length!=0){
return true;
}
return false;
}
</script>
<style>
span {
cursor: pointer;
position: absolute;
}
#divtoshow {
position: absolute;
display: none;
}
</style>
</head>
<body>
<div id='lt-container'>
<form action='addstudentcourse.php' method='post' id='courseForm'>
<p id='warnings'></p>
<p>
<strong>Courses:</strong>
<select name="course" id="coursesDrop">
<option value="">Please Select</option>
<option value='19'>BIO234 - Biology</option>
<option value='1'>INFO101 - Bsc Information Communication Technology</option>
<option value='2'>INFO102 - Bsc Computing</option>
</select>
</p>
</form>
<form id='updateForm'>
<p>
<strong>Course Chosen:</strong>
</p>
<table>
<tr>
<th></th>
<td>
<input type='hidden' id='currentCourseId' name='CourseIdcurrent' value='' />
</td>
</tr>
<tr>
<th>
Course ID:
</th>
<td>
<input type='text' id='currentCourse' name='Coursecurrent' readonly='readonly' value='' />
</td>
</tr>
<tr>
<th>
Course Name:
</th>
<td>
<input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' />
</td>
</tr>
<tr>
<th>
Duration (Years):
</th>
<td>
<input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/>
</td>
</tr>
</table>
</form>
<form id='studentExistForm'>
<p>
<strong>Current Students in Chosen Course:</strong>
</p>
<p>
<select name="studenttextarea" id="studentselect" size="10"></select>
</p>
</form>
</div>
<div id='rt-container'>
<form id='studentRemainForm'>
<p>
<strong>Available Students to Enrol:</strong>
</p>
<p>
<select multiple="multiple" name="remaintextarea" id="studentremain" size="10"></select>
</p>
<table id='addtbl'>
<tr>
</table>
</form>
<form id='studentAddForm'>
<p>
<strong>Students to Add to Course:</strong></p>
</p>
<p>
<select multiple="multiple" name="addtextarea" id="studentadd" size="10"></select>
</p>
<table id='removetbl'>
<tr>
</table>
<div id='studentAlert'></div>
</form>
<p>
<button id='submitstudents'>Submit Students</button>
</p>
</div>
</body>
</html>
if (editvalidation() === true) {
//your code
}
compare function true or false like this ..
$( '#studentAddForm' ).submit();
better submit the form like this..
Script starts running in Google Chrome with jquery 1.8.1. One Problem is, that an element with the id courseAlert is not defined.