HTML button has to be pressed twice to get the table - javascript

This is my HTML:
<form id="form1" method="POST" action="" enctype="">
<table>
<tr>
<td>
<br>
MySQL
</td>
<td>
User <br>
<input type="text" name="user" id="user" required>
</td>
<td>
Password <br>
<input type="text" name="pwd" id="pwd" required>
</td>
<td>
Database <br>
<input type="text" name="db" id="db" required>
</td>
<td>
<br>
<button type="submit" id="goBtn">Go</button>
</td>
</tr>
</table>
</form>
And this is the jquery and Ajax call:
$(document).ready(function(){
$("#form1").on('submit', function(e){
e.preventDefault();
// const user = $("#user").val();
// const pwd = $("#pwd").val();
// const db = $("#db").val();
console.log("MESSSADRFE")
var text = document.getElementById("showDatabaseTableForm");
if (text.style.display === "none"){
text.style.display = "block";
} else{
text.style.display = "none";
}
var login = {
user: $("#user").val(),
pwd: $("#pwd").val(),
db: $("#db").val()
}
$.ajax({url: 'http://127.0.0.1:5000/qbe/?query={login(user:"'+$("#user").val()+ '",pwd:"'+
$("#pwd").val()+ '",db:"'+$("#db").val()+ '"){table}}',
"headers": {
"accept": "application/json",
"Access-Control-Allow-Origin":"*"
},
type:'POST',
data: login,
success: function(result){
data = result.data.login;
var htmlCode = "<table><tr>";
arr = [];
for(var i = 0; i < data.length; i++){
var item = Object.values(data[i]);
//arr.push(item);
console.log(item);
htmlCode+= '<td><b>'+item+":"+'</b></td>'
htmlCode +='<td><select id="dropdwn">'+
'<option value="0">0</option>';
for (var j = 1; j< 3; j++){
htmlCode+='<option id="first" value="'+item+'">'+j+'</option>';
console.log(j);
}
//htmlCode += '</td>';
}
htmlCode += "</select></td></tr><table>";
htmlCode +='<input type="button" value="Get Skeletons" onclick="getInfo()"><input type="reset" value="Reset Skeletons">'
$("#showDatabaseTableForm").html(htmlCode);
},
error: function(error){
alert("ERROR");
console.log(console.error);
}
});
});
});
The first time I click on the button 'Go', nothing happens, the second time, it displays the result. Can help someone help me fix the jquery code? I want to be able to click the button once.
Thank you

I could be wrong here, but what is the purpose of this?
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
Feels like the first time you click the button you hide the element, then the second time around, as the display is "none", you show it.

Related

How can I make the user add a new field using a button using javascript?

I have a script posted down below, and I want the user to add a new field, when the new field gets added I want a new var to be added.
Live example:
User clicks on the "add new field"
var gets added below var Reason2 called Reason3, Reason4, etc.
"Reason Three: " +Reason3+ gets added below Reason Two on line 51.
I don't have an idea of how to do the above honestly.
<!DOCTYPE html>
<html lang="en">
<form name="TRF" method="post">
<p style="color:white">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1 class="text-center">Accepted Format</h1>
<hr>
<div class="row">
<h6 class="text-uppercase"><strong><center>Accepted Format</center></strong></h6>
<table style="width:100%" id="theTable">
<tr>
<td>Applicant's Name:</td>
<td><input type="text" name="accname" size="75" placeholder="" required></td>
</tr>
<tr>
<td>Reason 1:</td>
<td><input type="text" name="R1" size="75" placeholder="" required></td>
</tr>
<tr>
<td id="bla">Reason 2:</td>
<td><input type="text" name="R2" size="75" placeholder="" required></td>
</tr>
</table>
<h3>CODE:</h3>
<textarea id="box" cols="100" rows="10"></textarea>
<p><a class="btn btn-success btn-lg" onclick="generateCode2()" role="button">GENERATE CODE</a></p>
</div>
<button id="newField">
add new field
</button>
</center>
</div>
</div>
</div>
</div>
<html>
<head>
<script>
function generateCode2() {
var AccoutName = document.forms["TRF"]["accname"].value;
var Reason1 = document.forms["TRF"]["R1"].value;
var Reason2 = document.forms["TRF"]["R2"].value;
document.getElementById("box").value =
"[center][img width=500 height=500]https://i.imgur.com/FuxDfcy.png[/img][/center]"+
"[hr]"+
"\n"+
"[b]Dear[/b] "+AccoutName+
"\n"+
"After reading your Application, Imperials staffs have decided to [color=green][b]Accept[/b][/color] you. "+
"\n"+
"Reason One: " +Reason1+
"\n"+
"Reason Two: " +Reason2+
"\n"+
"Welcome to the Family. "+
"\n"+
""
}
var newField = document.getElementById("newField");
var counter = 3;
function createNewField() {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML = "Reason " + counter + ":";
var inp = document.createElement("input");
inp.type = "text";
inp.size = "75";
inp.name = "R" + counter;
inp.value=document.getElementById("box").value;
td2.appendChild(inp);
document.getElementById("theTable").appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
counter++;
}
newField.addEventListener("click", createNewField);
(function () {
var onload = window.onload;
window.onload = function () {
if (typeof onload == "function") {
onload.apply(this, arguments);
}
var fields = [];
var inputs = document.getElementsByTagName("input");
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < inputs.length; i++) {
fields.push(inputs[i]);
}
for (var i = 0; i < textareas.length; i++) {
fields.push(textareas[i]);
}
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
}
if (typeof field.onpaste == "function") {
var oninput = field.oninput;
field.oninput = function () {
if (typeof oninput == "function") {
oninput.apply(this, arguments);
}
if (typeof this.previousValue == "undefined") {
this.previousValue = this.value;
}
var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");
if (pasted && !this.onpaste.apply(this, arguments)) {
this.value = this.previousValue;
}
this.previousValue = this.value;
};
if (field.addEventListener) {
field.addEventListener("input", field.oninput, false);
} else if (field.attachEvent) {
field.attachEvent("oninput", field.oninput);
}
}
}
}
})();
</script>
</head>
</color>
</font>
</div>
</div>
</div>
</html>
User clicks on the "add new field"
var gets added below var Reason2 called Reason3, Reason4, etc.
"Reason Three: " +Reason3+ gets added below Reason Two on line 51.
In Javascript it's possible to create html elements at runtime using the createElement() function. In your case we need to create quite a lot of individual elements to replicate the structure of the table. Those are <tr> <td> <input>.
The tr element needs to be added to the table, the td containing the text 'Reason #:' as well as the td holding the input element are childs of tr. To add a dynamically created element to the DOM, the appendChild() function is used.
The input element needs some special treatment because it contains an unique id. The two html-made elements you have are 'R1' and 'R2' - so a new one should follow that pattern and start with 3. This is done by setting up a global variable , appending it to the name and increment it afterwards.
Finally we need to add a 'Create new field' button.
Take a look at this example (you have to scroll down to see the button):
var newField = document.getElementById("newField");
var counter = 3;
function createNewField() {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML = "Reason " + counter + ":";
var inp = document.createElement("input");
inp.type = "text";
inp.size = "75";
inp.name = "R" + counter;
td2.appendChild(inp);
document.getElementById("theTable").appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
counter++;
}
newField.addEventListener("click", createNewField);
function generateCode2() {
var AccoutName = document.forms["TRF"]["accname"].value;
var reasons = "";
for (var a = 1; a < counter; a++) {
reasons += "Reason " + a + ": " + document.forms["TRF"]["R" + a].value + "\n";
}
document.getElementById("box").value =
"[center][img width=500 height=500]https://i.imgur.com/FuxDfcy.png[/img][/center]" +
"[hr]" +
"\n" +
"[b]Dear[/b] " + AccoutName +
"\n" +
"After reading your Application, Imperials staffs have decided to [color=green][b]Accept[/b][/color] you. " +
"\n" + reasons +
"Welcome to the Family. " +
"\n" +
""
}
<form name="TRF" method="post">
<p style="color:white">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1 class="text-center">Accepted Format</h1>
<hr>
<div class="row">
<h6 class="text-uppercase"><strong><center>Accepted Format</center></strong></h6>
<table style="width:100%" id="theTable">
<tr>
<td>Applicant's Name:</td>
<td><input type="text" name="accname" size="75" placeholder="" required></td>
</tr>
<tr>
<td>Reason 1:</td>
<td><input type="text" name="R1" size="75" placeholder="" required></td>
</tr>
<tr>
<td id="bla">Reason 2:</td>
<td><input type="text" name="R2" size="75" placeholder="" required></td>
</tr>
</table>
<h3>CODE:</h3>
<textarea id="box" cols="100" rows="10"></textarea>
<p><a class="btn btn-success btn-lg" onclick="generateCode2()" role="button">GENERATE CODE</a></p>
</div>
<button id="newField">
add new field
</button>
</center>
</div>
</div>
</div>
</div>

HTML, JS - Display Loop's Output By Calling <div> From HTML To JS

I have a situation where user may insert the Total Quantity and also the Total Pass and Total Fail. I have created a function where when the number of Total Pass inserted, the loop (of entering the pass score) will run according to the iterations inputted.
However, I do not want to have the loop to display the line Enter The Score : in the JavaScript function. Therefore, I want the function to call a div from the HTML itself.
For example, I want the <div id="outputPass"><p>Enter the score : <input type="text" /></p></div> to be called in the loop function which I have created in the document.getElementById('btnPass').onclick = function().
I have inserted some comments in the code section.
document.getElementById('btnPass').onclick = function() {
var totalIterations = parseInt(document.getElementById('inputPass').value);
var output = document.getElementById('outputPass');
var quantity = document.getElementById('quantity').value;
output.innerHTML = '';
if (quantity < totalIterations) {
alert("Invalid Input, Pass Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
} else {
for (var i = 1; i <= totalIterations; i++) {
var item = document.createElement('div');
//Call <div> from HTML
item.innerHTML = "";
output.appendChild(item);
}
}
};
document.getElementById('btnFail').onclick = function() {
var totalIterations = parseInt(document.getElementById('inputFail').value);
var output = document.getElementById('outputFail');
var quantity = document.getElementById('quantity').value;
output.innerHTML = '';
if (quantity < totalIterations) {
alert("Invalid Input, Fail Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
} else {
for (var i = 1; i <= totalIterations; i++) {
var item = document.createElement('div');
//Call <div> from HTML
item.innerHTML = "";
output.appendChild(item);
}
}
};
function togglePass() {
var x = document.getElementById("passDiv");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
function toggleFail() {
var y = document.getElementById("failDiv");
if (y.style.display === "block") {
y.style.display = "none";
} else {
y.style.display = "block";
}
}
.display {
display: none;
}
<form method="post" name="form">
<p>Enter the quantity : <input type="text" id="quantity" name="quantity" /></p><br />
<input type="button" value="Pass" onclick="togglePass()">
<input type="button" value="Fail" onclick="toggleFail()">
<div id="passDiv" class="display">
<p>Enter Total Pass : <input type="text" id="inputPass" name="inputPass" />&nbsp<input type="button" value="Key In Score" id="btnPass" onclick="return validate();"></p><br />
<!--This Div-->
<div id="outputPass">
<p>Enter the score : <input type="text" /></p>
</div>
<br />
<input type="button" value="DONE">
</div>
<br />
<div id="failDiv" class="display">
<p>Enter Total Fail : <input type="text" id="inputFail" />&nbsp<input type="button" value="Key In Score" id="btnFail"></p><br />
<!--This Div-->
<div id="outputFail">
<p>Enter the score : <input type="text" /></p>
</div>
<br />
<input type="button" value="DONE">
</div>
</form>
You can make the following changes to achieve what you are looking for:
Initially we're giving an id of pscore/fscore (for pass and fail respectively) to the <p></p> tags and hiding them.
<p id="fscore" style="display:none">Enter the score : <input type="text" /></p>
We're accessing them in the javascript code in the form of variables pscore and fscore respectively. (Make sure they are declared globally outside)
var pscore = document.getElementById('pscore');
var fscore = document.getElementById('fscore');
Then in the iterations we can just make a clone of the pscore/fscore , give a class of pscore/fscore to the <p></p> tags and remove the id of pscore/score (to avoid duplicate IDs), changing the display to block and append it to the output container by using the following:
var cln = pscore.cloneNode(true);
cln.style.display="block";
cln.className ="pscore";
cln.removeAttribute("id");
item.appendChild(cln);
var cln = fscore.cloneNode(true);
cln.style.display="block";
cln.removeAttribute("id");
cln.className ="fscore";
item.appendChild(cln);
var pscore = document.getElementById('pscore');
var fscore = document.getElementById('fscore');
document.getElementById('btnPass').onclick = function() {
var totalIterations = parseInt(document.getElementById('inputPass').value);
var output = document.getElementById('outputPass');
var quantity = document.getElementById('quantity').value;
output.innerHTML = '';
if (quantity < totalIterations) {
alert("Invalid Input, Pass Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
} else {
for (var i = 1; i <= totalIterations; i++) {
var item = document.createElement('div');
//Call <div> from HTML
var cln = pscore.cloneNode(true);
cln.style.display = "block";
cln.className = "pscore";
cln.removeAttribute("id");
item.appendChild(cln);
output.appendChild(item);
}
}
};
document.getElementById('btnFail').onclick = function() {
var totalIterations = parseInt(document.getElementById('inputFail').value);
var output = document.getElementById('outputFail');
var quantity = document.getElementById('quantity').value;
output.innerHTML = '';
if (quantity < totalIterations) {
alert("Invalid Input, Fail Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
} else {
for (var i = 1; i <= totalIterations; i++) {
var item = document.createElement('div');
//Call <div> from HTML
var cln = fscore.cloneNode(true);
cln.style.display = "block";
cln.className = "fscore";
cln.removeAttribute("id");
item.appendChild(cln);
output.appendChild(item);
}
}
};
function togglePass() {
var x = document.getElementById("passDiv");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
function toggleFail() {
var y = document.getElementById("failDiv");
if (y.style.display === "block") {
y.style.display = "none";
} else {
y.style.display = "block";
}
}
.display {
display: none;
}
<form method="post" name="form">
<p>Enter the quantity : <input type="text" id="quantity" name="quantity" /></p><br />
<input type="button" value="Pass" onclick="togglePass()">
<input type="button" value="Fail" onclick="toggleFail()">
<div id="passDiv" class="display">
<p>Enter Total Pass : <input type="text" id="inputPass" name="inputPass" /> <input type="button" value="Key In Score" id="btnPass"></p><br />
<!--This Div-->
<div id="outputPass">
<p id="pscore" style="display:none">Enter the score : <input type="text" /></p>
</div>
<br />
<input type="button" value="DONE">
</div>
<br />
<div id="failDiv" class="display">
<p>Enter Total Fail : <input type="text" id="inputFail" /> <input type="button" value="Key In Score" id="btnFail"></p><br />
<!--This Div-->
<div id="outputFail">
<p id="fscore" style="display:none">Enter the score : <input type="text" /></p>
</div>
<br />
<input type="button" value="DONE">
</div>
</form>

On enter, search for the string in db

i have this code:
<body>
Please make your selection:
<div id="div1">
<tr>
<td>
<input type="button" value="Insert" onclick="form.html" />
</td>
<td>
<input type="button" value="View" onclick="window.location='view-master.php';" />
</td>
<td>
<input type="button" value="Edit" onclick="edit.html" />
</td>
<td>
<input type="button" value="Search" onclick="showsearchform()" />
</td>
</tr>
</div>
</body>
then the JS:
<script type="text/javascript">
function showsearchform()
{
var tr = document.createElement("tr");
var td = document.createElement("td");
var label = document.createElement("label");
label.id = "label1";
label.value = "Surname";
var input = document.createElement("input");
tr.appendChild(td);
td.appendChild(label);
td.appendChild(input);
var element = document.getElementById("div1");
element.appendChild(tr);
$('#input').keyup(function (e) {
var str = $('#search').val();
var url = "search.php";
if (e.keyCode == 13) {
location.href = url;
}
});
}
</script>
when i click on search i get the inoutbox, but what i want to do now is when i type a surname into the box and hit enter i want to connect to the db and search for this surname
I can do the db stuff just not sure of the JS and Jquery
html
<input type="text" name="txt" onkeypress="Search" />
javascript
<script>
function Search(e){
if(e.keyCode === 13){// enter key value is 13
**// Your ajax request write here , and in server side you can
**check corresponding results in database and return if data is present and take it as ajax replay****
}
return false;
}
</script>

Resetting Radio Buttons

Here is a fiddle containing my code - http://jsfiddle.net/jamiepollard28/sDLV4/8/
I am trying to make my code reset the radio buttons only when the user clicks cancel on the alert box of validation for the radio buttons.
When you click submt containing the required data with a radio button selected a alert box will come up confirming or rejecting the choice, when i click cancel on that alert box i want the radio button selection to reset.
Below is my code.
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.onload=function(){
window.validateForm=function() {
var result = true;
var msg = "";
var focusname="";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
focusname="name";
//document.ExamEntry.name.focus();
document.getElementById('name1').style.color = "red";
//result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
// document.ExamEntry.subject.focus();
if (focusname=="")
{
focusname="subject";
}
document.getElementById('subject1').style.color = "red";
//result = false;
}
var Number = document.ExamEntry.Exam_Number.value
if (Number == "") {
msg += "You must enter the exam Number \n";
//document.ExamEntry.Exam_Number.focus();
if (focusname=="")
{
focusname="Exam_Number";
}
document.getElementById('Exam_Number1').style.color = "red";
//result = false;
}else if (Number.length != 4) {
msg += "You must enter at least Four Numbers in the Exam Number \n";
if (focusname=="")
{
focusname="Exam_Number";
}
//document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number1').style.color = "red";
//result = false;
}
else if (isNaN(Number)) {
msg += "You must enter at least four numeric characters in the Exam Number feild \n";
if (focusname=="")
{
focusname="Exam_Number";
}
// document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number1').style.color = "red";
//result = false;
}
var valchecked = '';
var len = document.getElementsByName('examtype').length;
for (i = 0; i < len; i++) {
if ( document.ExamEntry.examtype[i].checked ) {
valchecked = document.ExamEntry.examtype[i].value;
break;
}
}
if (valchecked == '') {
msg += "Select Exam Type";
document.getElementById('Exam_Type').style.color = "red";
if (focusname=="")
{
focusname="examtype_GCSE";
}
}
if (msg != ""){
alert(msg)
document.getElementById(focusname).focus();
return false;
}else{
return confirm('You have chosen ' + valchecked + ' is this correct?');
}
}
}//]]>
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name1">Name</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td id="subject1">Subject</td>
<td><input type="text" name="subject" id="subject"/></td>
</tr>
<tr>
<td id="Exam_Number1">Exam Number</td>
<td><input type="text" name="Exam_Number" id="Exam_Number" ><font size="3">(Maximum characters: 4)</font> </td>
</tr>
<tr>
<table><form action="">
<td id="Exam_Type">Exam Type</td>
<tr><td><input type="radio" id="examtype_GCSE" name="examtype" value="GCSE" /> : GCSE<br /></tr>
<tr><td><input type="radio" id="examtype_AS" name="examtype" value="AS"/> : AS<br /></tr>
<tr><td><input type="radio" id="examtype_A2" name="examtype" value="A2" /> : A2<br /></tr>
<tr><td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
You are simply returning the users choice, you need to first check it, if it is true return true for form submission else reset radio and return false, as follows: FIDDLE
var ch= confirm('You have chosen ' + valchecked + ' is this correct?');
if(!ch){
document.getElementById('examtype_'+valchecked).checked= false;
return false; }
else
return true;
}
With an if loop you can solve the issue
try following code
if(confirm('You have chosen ' + valchecked + ' is this correct?')){
return true;
}
else{
document.getElementById('examtype_'+valchecked).checked= false;
return false;
}

jQuery val() failing on dynamically generated input

I have the following dynamically created HTML block:
<form class="standard settingsPage" method="post" enctype="multipart/form-data" name="account" style="background-color: rgb(61, 80, 133);">
<h2>Add New Account</h2>
<p>
<label class="" disabled="true">E-mail address:</label>
<input id="accountEmailAddress" class="" type="text" value="" name="accountEmailAddress"/>
</p>
<p>
<label class="" for="accountEmailPassword">Password:</label>
<input id="accountEmailPassword" type="password" name="accountEmailPassword"/>
</p>
<p class="submit">
<input type="button" onclick="checkEmailSettings();" value="Send" name="submit"/>
</p>
<p>
<label>Mail Server:</label>
<input id="mail2server" type="text" name="mail2server"/>
</p>
<p>
<label>Mail Type:</label>
<select id="mail2type" name="mail2type">
</select>
</p>
<p>
<label>Mail Security:</label>
<select id="mail2security" name="mail2security">
</select>
</p>
<p>
<label>Mail Server Port:</label>
<input id="mail2port" type="text" name="mail2port"/>
</p>
<p>
<label>Mail Username:</label>
<input id="mail2username" type="text" name="mail2username"/>
</p>
<p class="submit">
<input id="mailsend" type="button" name="mailsend" onclick="checkEmailSettings();" value="Send"/>
</p>
</form>
Which is appended to an existing form.
However when I do $('#mail2server').val() it returns blank, even if there is something in the box. If I do $('#mail2server').attr('name') it returns the name, so it definitely recognizes that the element exists. Any ideas why this would be failing?
Cheers,
Gazler.
EDIT
function checkEmailSettings()
{
var emailAddress=$("#accountEmailAddress").val();
var emailPassword=$("#accountEmailPassword").val();
var datastring = "emailaddress="+emailAddress+"&emailpassword="+emailPassword;
if (additionalInfo == 1)
{
var mailserver = $("#mail2server").val();
var mailtype = $("#mail2type").val();
var mailsecurity = $("#mail2security").val();
var mailport = $("#mail2port").val();
var mailusername = $("#mail2username").val();
alert($("#mail2server").val());
datastring += "&mailserver="+mailserver+"&mailtype="+mailtype+"&mailsecurity="+mailsecurity+"&mailport="&mailport+"&mailusername="+mailusername;
}
$('input[type=text]').attr('disabled', 'disabled');
$('input[type=password]').attr('disabled', 'disabled');
$('input[type=button]').attr('disabled', 'disabled');
$.ajax({
type: "GET",
url: "checkemailsettings.php",
data: datastring,
async: true,
cache: false,
timeout:50000,
success: function(data){
switch(parseInt(data))
{
//SNIPPED
case 4:
alert("More information needed.");
if (additionalInfo == 0)
{
var string = addTextToForm("Mail Server","mail2server");
string += addOptionsToForm("Mail Type","mail2type", new Array("IMAP", "POP3"));
string += addOptionsToForm("Mail Security","mail2security", new Array("NOTLS", "TLS", "SSL"));
string += addTextToForm("Mail Server Port","mail2port");
string += addTextToForm("Mail Username","mail2username");
string += addButtonToForm("Send","mailsend", "checkEmailSettings();");
alert(string);
$('form[name=account]').append(string);
additionalInfo = 1;
}
break;
}
},
});
}
function addTextToForm(strLabel, strID, strVal)
{
if (!strVal) {return "<p><label>"+strLabel+":</label><input id=\""+strID+"\" type=\"text\" name=\""+strID+"\" /></p>";}
return "<p><label>"+strLabel+":</label><input id=\""+strID+"\" type=\"text\" name=\""+strID+"\" value=\""+strVal+"\"/></p>";
}
function addButtonToForm(strLabel, strID, functionName)
{
return "<p class=\"submit\"><input id=\""+strID+"\" value=\""+strLabel+"\" onclick=\""+functionName+"\" type=\"button\" name=\""+strID+"\"/></p>";
}
function addOptionsToForm(strLabel, strID, optionsArr)
{
var returnstring="<p><label>"+strLabel+":</label><select id=\""+strID+"\" name=\""+strID+"\">";
for (i=0; i<optionsArr.length; i++)
{
returnstring += "<option>"+optionsArr[i]+"</option>";
}
returnstring += "</select></p>";
return returnstring;
}
The "alert" call says $('#mailserver'), not $('#mail2server')
I created a sample page that dynamically added the code you had above and everything worked just fine. There must be something else going on, perhaps in the function that your submit button is calling?
I think it's good to add "return false;" at the end of the onclick attribute in the input buttons.

Categories

Resources