document.getElementById('button2').click(); not working - javascript

I am try to automatically fire a sub routine with with a javascript "document.getElementById('button2').click();" as it is in the below code. Can someone please help me see why the code is not working. Thank you
<%# Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" debug = "true"%>
<%# Import Namespace="System.Data.SqlClient"%>
<%# Import Namespace="System.Data"%>
<script language="vb" runat="server">
Sub sendmsg(sender As Object, e As EventArgs)
response.Redirect("index.aspx")
End Sub
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function Confirm() {
var str = $('#loutput').val(); //'We are inviting you for s special business meeting on Tueday, at No 12, Fred street. for more information please call 02341123333';
var updateString = function(input_text) {
//1. Find consecutive 11 numeric digits
var match = input_text.match(/\d{11}/);
//2. divide it into a string of 3s separated by space
var new_str = '';
for (var i = 1; i < match[0].length + 1; i++) {
new_str = new_str + match[0][i - 1];
if (i > 1 && i % 3 == 0)
new_str = new_str + ' ';
}
//3. Replace old match no. with the new one
console.log(match)
if (match[0] != '')
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
if (confirm("Message contains numeric characters which might make the message not delivered to some networks. Do you want us to reformat the message ?. This might increase the numbers of pages of the message and the cost?")) {
confirm_value.value = "Yes";
input_text = input_text.replace(match[0], new_str)
$('#loutput').val(input_text);
confirm2()
//document.getElementById('loutput').innerHTML = input_text;
} else {
confirm_value.value = "No";
confirm2()
}
$('#loutput').val(input_text);
//document.getElementById('loutput').innerHTML = input_text;
};
updateString(str);
};
function confirm2() {
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
if (confirm(" send the message now?")) {
confirm_value.value = "Yes";
document.getElementById('button2').click();
//document.getElementById('loutput').innerHTML = input_text;
} else {
confirm_value.value = "No";
}
//document.getElementById('loutput').innerHTML = input_text;
};
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<form runat="server" action="formatmessage3.aspx" method="post">
<input type="texarea" id="loutput" name="loutput" value="<%=request.form ("loutput") %>" />
<button ID="button1" OnClick="Confirm();" runat="server">Confirm</button>
<asp:button ID="button2" OnClick="sendmsg" Text="send" runat="server" />
</form>
</body>
</html>

The problem here is the fact you are using a .NET button with runat="server" so it is going to change the id of the button to a different value.
<asp:button ID="button2" OnClick="sendmsg" Text="send" runat="server" />
You either have to reference the element by a class
document.getElementsByClassName("myClass")[0].click();
or reference the dynamic name
document.getElementById("<%= button2.ClientID %>").click();
or in .NET4 you can use ClientIDMode="Static"

Related

Simple temperature converter (javascript, html, try-catch) not working

I'm a complete beginner with coding and I need to write a simple program with javascript and html for an exam, but I need to stick to my professor' standard (hence the specific way this code looks).
I tried to make a simple temperature converter (celsius to fahrenheit) but I don't understand why nothing happens when I click the "convert" button.
EDIT: for some reason the converter works fine here, but when I open it in a new window it doesn't work at all. Any idea why that might be?
function writeText (node, message) {
var nodeText = document.createTextNode(message);
node.replaceChild(nodeText, node.firstChild);
}
function convertHandler () {
try {
if (nodeTemperature.value =="") {
writeText("the field is empty");
return;
}
var temperature = Number(nodeTemperature.value);
if (isNaN(temperature)) {
writeText(nodeTemperature.value + " is not a number");
return;
}
nodeResult.value = temperature * (9/5) + 32;
} catch ( e ) {
alert("convertHandler" + e);
}
}
var nodeTemperature;
var nodeConvert;
var nodeResult;
var ConvertMessage;
function loadHandler () {
try {
nodeTemperature = document.getElementById("temperature");
nodeConvert = document.getElementById("convert");
nodeResult = document.getElementById("result");
nodeConvertMessage = document.getElementById("convertMessage");
nodeTemperature.value = "";
nodeResult.value = "";
nodeConvert.onclick = convertHandler;
var nodeText = document.createTextNode("");
nodeConvertMessage.appendChild(nodeText);
} catch ( e ) {
alert("loadHandler" + e);
}
}
window.onload = loadHandler;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script scr="p3.js"></script>
<title>Temperature converter</title>
</head>
<body>
<h1>Convert Celsius in Fahrenheit</h1>
<input type="text"
id="temperature"/> Celsius
<br>
<input type ="button"
id="convert"
value="Convert"/>
<span id="convertMessage"></span>
<br>
<input type="text"
id="result"
readonly="readonly"/>Fahrenheit
</body>
</html>
If someone could help me that would save my (academic) life, thank you.

How to retrieve multiple values from the database using JavaScript?

<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="APIToDatabase.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<<head>
<title></title>
<script type="text/javascript">
function connectDb()
{
var ConnDB = new ActiveXObject("ADODB.Connection");
ConnDB.ConnectionString="Driver={ODBC Driver 13 for SQL Server};Server=tcp:yueloongserver.database.windows.net,1433;Database=LocationDatabase;Uid=;Pwd=;Encrypt=yes;TrustServerCertificate=no;Connection Timeout=30;";
ConnDB.Open();
var Rs = new ActiveXObject("ADODB.Recordset");
var tempstr = "";
Rs.Open("select Latitude,Longitude from dbo.GPS",ConnDB);
while(!Rs.EOF === true)
{
tempstr = tempstr + Rs("Latitude") + "" + Rs("Longitude");
Rs.MoveNext;
}
test.innerHTML = tempstr;
}
</script>
</head>
<body>
<p><div id=test> </div>
<p><input id="button1" type="button" value="Run" name="button1" onclick="connectDb();"></p>
</body>
</script>
Hi, i am having the problem where i am able to only retrieve one column from the database. However, i would like to retrieve all the columns from the database table.

dynamically adding form elements in javascript in IE/Mozilla

So, I have tried bunch of things but didn't founded a workaround with this
I have this code this works fine on Chrome. But it does't work on mozilla or IE, In the console it doesn't shows up any error. It just doesn't work.
<?php
echo"<script>alert('okay');</script>";
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
</head>
<script type="text/javascript" LANGUAGE="JavaScript1.3">
function name3() {
var abc = document.createElement("FORM");
//abc.setAttribute("method","POST");
abc.method = "POST";
abc.action = "http://localhost/2.php";
var a = document.createElement("INPUT");
/*a.setAttribute("type","text");
a.setAttribute("name","a");
a.setAttribute("value","abc");*/
a.name = 'a';
a.value = "abc";
abc.appendChild(a);
abc.submit();
}
</script>
<input type = "button" onclick = "name3();" value = "click">
</html>
Instead of a.name, I have also tried using a.setAttribute but still didn't work
Please help!!! Thanks :)
You should append form to body and then latter removed it once posted. Currently you are not adding your form to DOM. it actually need to be in the DOM to be sent in a page load.
Complete Code
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<script type="text/javascript">
function name3() {
var form = document.createElement("FORM");
form.method = "POST";
form.action = "http://localhost/2.php";
var a = document.createElement("INPUT");
a.name = 'a';
a.value = "abc";
form.appendChild(a);
//Apend form to body
document.getElementsByTagName('body')[0].appendChild(form);
//Submit form
form.submit();
// But once the form is sent, it's useless to keep it.
document.getElementsByTagName('body')[0].removeChild(form);
}
</script>
</head>
<body>
<input type="button" onclick="name3();" value="click" />
</body>
</html>
You should add the new element to the DOM tree first and then submit the form. If you do not want display them you can add styles to hide the elements.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
</head>
<script type="text/javascript">
function name3() {
var abc = document.createElement("FORM");
//abc.setAttribute("method","POST");
abc.method = "POST";
abc.action = "http://localhost/2.php";
var a = document.createElement("INPUT");
/*a.setAttribute("type","text");
a.setAttribute("name","a");
a.setAttribute("value","abc");*/
a.name = 'a';
a.value = "abc";
abc.appendChild(a);
document.getElementById("body").appendChild(abc);
abc.submit();
}
</script>
<body id="body">
<input type = "button" onclick = "name3();" value = "click">
</body>

issues with html and js

This is so bloody frustrating. I went through W2school tutorials, where bits and pieces are presented to you but it does not answer how to put it all together. I thought I understood it but when I put it into practice, nothing. Firebug is telling me that inputEmp() is not defined, but is quite obviously defined in the .js file. Can someone please tell me what minor detail I left out? Thanks First the Html, then the .js file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/payroll.css" />
<title>Payroll System</title>
<script type="text/javascript" src="scripts/payroll.js"></script>
<script type="text/javascript" >
var emps = new Array();
</script>
</head>
<body>
<h1>Jackson Payroll System</h1>
<button type="button" onclick="inputEmp()">
Click here to enter employees
</button>
</body>
</html>
// payroll.js
function inputEmp() {
var inName = "";
var loopCt = 0
var tArray = new Array();
while (inName != "-1}
{
prompt inName = prompt("Please enter your name (enter -1 to finish)",
"Employee Name");
if (inName == "-1") { break; }
if (inName==null || inName=="")
{
alert("Blank names are not allowed. To exit enter '-1'.");
}
else
tArray[loopCt++] = inName;
{
}
return tArray;
}
Yes, you forgot to close the brace { of while loop before return statement. and the quotes is not closed in condition.
Try this
function inputEmp() {
var inName = "";
var loopCt = 0
var tArray = new Array();
while (inName != "-1"} {
prompt inName = prompt("Please enter your name (enter -1 to finish)","Employee Name");
if (inName == "-1") { break; }
if (inName==null || inName=="")
{
alert("Blank names are not allowed. To exit enter '-1'.");
}
else
tArray[loopCt++] = inName;
{
}
}
return tArray;
}
There is a lot of problem in your code:
var loopCt = 0 should look like this var loopCt = 0;
while (inName != "-1} should look like this while (inName != "-1)
prompt inName = prompt... should look like this inName = prompt...
There is an empty { } under the else statement
Here is a jsfiddle that shows you the corrected code.

Javascript opener window

I have function that opens up a window, and the values from the newly opened window are listed in the opener window.
The 2nd window - has this function:
function AddOtherRefDoc(name, number) {
var remove = "<a href='javascript:void(0);' onclick='removeRefDoctor(this)'>Remove</a>";
var html = "<li><b> Referral Doctor: </b>"+name+"<b>, Referral No: </b>"+number+ " " +remove+" <input type='text' name='ref_docs' value='"+name+"'></input><input type='text' name='ref_nos' value='"+number+"'></input></li>";
opener.jQuery("#r_docs").append(jQuery(html));
}
The function that calls the one above is:
function addRefDoc(){
var count = 0;
var ref_docarray ;
var ref_noarray ;
<%for(int i1=0; i1<vec.size(); i1++) {
prop = (Properties) vec.get(i1);
String ref_no = prop.getProperty("referral_no","");
String ref_name = (prop.getProperty("last_name", "")+ ","+ prop.getProperty("first_name", ""));
%>
if(document.getElementById("refcheckbox_<%=ref_no%>").checked) {
count++;
if ((ref_doctor!=null)&&(ref_doctor!="")&&(ref_docno!=null)&&(ref_docno!="")) {
ref_docarray = ref_doctor.split(";");
ref_noarray = ref_docno.split(";");
if ((containsElem(ref_docarray,"<%=ref_name%>"))||(containsElem(ref_noarray,<%=ref_no%>))) {
alert("Referral doctor " + "<%=ref_name%>" + " already exists");
} else {
AddOtherRefDoc("<%=ref_name%>", <%=ref_no%>);
}
} else {
AddOtherRefDoc("<%=ref_name%>", <%=ref_no%>);
}
}
<%} %>
self.close();
}
function containsElem(array1,elem) {
for (var i=0;i<array1.length;i++) {
if(array1[i]==elem){
return true;
} else{
return false;
}
}
}
When this function is called, it is supposed to carry the 2 input elements "ref_docs" and "ref_nos" into the page that opened this window. But it is not doing so. It lists the elements alright but when I try to use "ref_docs" and "ref_nos" in another Javascript function in the 1st window, I see that "ref_nos" and "ref_docs" are empty.
What am I doing wrong?
function updateRd(){
var ref_docs = jQuery("#updatedelete").find('input[name="ref_docs"]');
var ref_nos = jQuery("#updatedelete").find('input[name="ref_nos"]'); alert(ref_docs.val() + ref_nos.val());
var rdocs = new Array();
var rnos = new Array();
ref_docs.each(function() { rdocs.push($(this).val()); } );
ref_nos.each(function() { rnos.push($(this).val()); } );
$('#r_doctor').val(rdocs.join(";"));
$('#r_doctor_ohip').val(rnos.join(";")); }
–
This function returns an error saying "ref_docs" and "ref_nos" are undefined.
I think it is trying to use the jQuery on the other page to find "#r_docs" on the current page.
Try:
jQuery(opener.document).find("#r_docs").append(html);
UPDATE:
I created index.html:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script type="text/javascript">
window.jQuery = jQuery;
function openChild ()
{
var mychildwin = window.open("child.html");
}
</script>
</head>
<body>
<input type="button" value="click" onclick="openChild();" />
<div id="r_docs">
Redocs here.
</div>
</body>
</html>
and child.html:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script type="text/javascript">
function AddOtherRefDoc(name, number) {
var remove = "<a href='javascript:void(0);' onclick='removeRefDoctor(this)'>Remove</a>";
var html = "<li><b> Referral Doctor: </b>"+name+"<b>, Referral No: </b>"+number+ " " +remove+" <input type='text' name='ref_docs' value='"+name+"'></input><input type='text' name='ref_nos' value='"+number+"'></input></li>";
jQuery(opener.document).find("#r_docs").append(html);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="AddOtherRefDoc('name', 42);"/>
</body>
</html>
UPDATE2:
in your update function document.updatedelete has no attributes ref_docs and ref_nos.
try:
jQuery("#updatedelete")
.find('input[name="ref_docs"], input[name="ref_nos"]')
Where your form is
<form id="updatedelete" ... >
Your function that accesses the DOM elements is incorrect. updatedelete is not a property of document, nor will accessing a ref_docs or ref_nos property automatically build a collection of input elements. Since you're using jQuery already, try this:
var ref_docs = $('input[name="ref_docs"]');
var ref_nos = $('input[name="ref_nos"]');
That will give you Array (or at least array-like) objects that will let you access your inputs:
var rdocs = new Array();
var rnos = new Array();
ref_docs.each(function() { rdocs.push($(this).val()); } );
ref_nos.each(function() { rnos.push($(this).val()); } );
$('#r_doctor').val(rdocs.join(";"));
$('#r_doctor_ohip').val(rnos.join(";"));

Categories

Resources