Develop Reference

How to call function in another page?

I created a link https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137 To fill the input field CNPJ.
This is fine. However, I need to run the function preencheParametros('CNPJ') together above link.
So, I tried something like this https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137&exec=preencheParametros('CNPJ')
And not worked. How handle this?
First Way: Not Worked
GET method
<form method="post" action="https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0" name="nForm" id="nForm">
<div class="CInput" id="CCnpj">
<input type="text" name="lCnpj" id="lCnpj" value="00110612000137">
</div>
</form>
Result: open new tab, like https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137
Second Way: Not Worked
Read GET method in JS
Input values:
<input type="text" name="lCnpj" id="lCnpj" value="00110612000137">
<input type="button" value="Get Input Values" id="retrieveInputValuesButton" />
<script>
var cnpj = document.getElementById("lCnpj");
var element = document.getElementById("retrieveInputValuesButton");
element.onclick = function() {
window.open("https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0" + cnpj.value + "&exec=preencheParametros('CNPJ')");
};
</script>
Result: open new tab, like https://www.sefaz.rs.gov.br/NFE/NFE-CCC.aspx?ErrKey=true&iCodUf=0&lCnpj=00110612000137&exec=preencheParametros('CNPJ')

I'm sorry, but there is no way to pass in executable instructions to a website like that (unless they specifically provide you a way to do so). That would be a huge security risk if anyone could just inject code.
You could however try cooking something up with a Greasemonkey script.
It's called Greasemonkey for Firefox, or Tapermonkey for Chrome

Type number in text field which adds to link when clicking button

I've searched around both stackoverflow and the web for answers to my question, but can't find the right solution.
I am trying to create a text field and button, so that a user can enter a number in the text field and when they click the button it takes them to a URL with that number added to the end of the URL.
For example http://www.website.com/trackingid/NUMBERHERE
If the user typed 000000 in the text field and then hit the button the URL navigated would be http://www.website.com/trackingid/000000
Any help much appreciated.
Thanks

There are two ways of addressing this:
You could use JavaScript's window.location
You could make the button a link and change it's href
Using window.location
Let's assume your html structure looks like this:
<form>
<!-- The field in which the user types the number -->
<input type="text" id="number" placeholder="Enter number here" />
<!-- The button -->
<button onclick="forward();">Send</button>
</form>
When you click the button, the forward() javascript method gets called. This method looks like this:
function forward() {
// select the input field
number = document.getElementById("number");
// forward to the new page
window.location = "http://www.website.com/trackingid/" + number.value;
}
Changing the link's href
Now the structure looks like this:
<form>
<!-- The field in which the user types the number -->
<input type="text" oninput="changeLink(this.value);" placeholder="Enter number here" />
<!-- The button -->
<a id="buttonLink"><button>Send</button></a>
</form>
Notice that the <a>-tag is still completely empty except it's id.
The oninput= calls the JavaScript function changeLink(); with it's current value as a parameter whenever something is written or deleted in it.
This function should look like this;
function changeLink(value) {
// select the link
link = document.getElementById("buttonLink");
// change it's href
link.href = "http://www.website.com/trackingid/" + value
}
I hope this helps. If you have any questions, feel free to ask.

You need JavaScript to do this.
HTML:
<input type="text" id="inputId">
<button type="button" id="buttonId">Click me</button>
JavaScript:
document.getElementById('buttonId').addEventListener('click', function() {
window.location.href = "http://www.website.com/trackingid/" + document.getElementById('inputId').value;
});

Solved your issue please check my solution
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<title>nirajpatel.mdl#gmail.com</title>
</head>
<body>
<input type="text" id="num" name="num">
<button id="button">Go Url</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
url = "http://www.website.com/trackingid/";
$("#button").click(function(){
var num = $("#num").val();
window.location.replace(url+num);
});
});
</script>
</html>

Onchange isn't working but the javascript script is fine

This is my HTML:
<html>
<head>
<script>
function ppid() {
var ppidtxt = document.getElementById('ppid').value;
var newppidtxt = ppidtxt.toUpperCase();
var ppide = document.getElementById('ppid');
ppide.value = newppidtxt;
}
</script>
</head>
<body>
<form>
<center><input type="text" id="ppid" class="form-control" name="ppid" placeholder="Personal Project ID" onchange="ppid();" /></center>
</form>
</body>
</html>
I've tried this is JSFiddle, on my local PC, pretty much everywhere but for some reason, whenever I type something in the form's text box with the id "ppid" it isn't capitalizing it. What have I done wrong?

Try using onkeyup instead, e.g.
<input type="text" onkeyup="this.value=this.value.toUpperCase()" />

I don't know why this happens, but when onchange is called, 'ppid' contains the HTMLInputElement (probably because of its id).
If you rename the function to something unique (like 'myFunc') it works.
#MelanciaUK brought the answer with this link: Why JS function name conflicts with element ID?

Why does my HTML page re-draw, replacing my input?

I am trying to learn a little Javascript. I wrote the code below expecting to see the contents of the text box written to the page when the button is clicked. This does happen but very briefly as the page seems to redraw back to it's original values.
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script>
function getData() {
var x = document.getElementById("name").value;
document.getElementById("space").innerHTML = x;
}
</script>
</head>
<body>
<h1>Playing with Javascript and Forms</h1>
<form id="myForm">
Name: <input type="input" id="name">
<input type="submit" value="Submit" id="submit" onClick = "getData()">
</form>
<p id="space"></p>
</body>
</html>

It does this because the form is being fully submitted and the page reloads. To stop it, change the onclick to:
onClick = "return getData()"
and your function to return false with:
function getData() {
var x = document.getElementById("name").value;
document.getElementById("space").innerHTML = x;
return false;
}
jsFiddle example
This will prevent the form from submitting and allow your code to run.

Your form submits. To avoid it try adding return false at the end of "getData" function and change onClick = "getData()" to onClick = "return getData()"
Demo: http://jsfiddle.net/6gAkL/

Your javascript seems to be working fine.
The problem is after the JS is ran the HTML kicks in and submits the form POSTing it's data to the POST target (None as currently set).
If you don't want the form to be posted when you click that input you probably should remove the: type="submit"
Edit:
This would be most appropiate:
< input type="button" value="Submit" id="submit" onClick = "getData()" >

document.write to current HTML page

I am a noob to programming, so I'd appreciate any advice from you more knowledgeable folks out there. I am working on a bit of javascript for a web page and I need the javascript to print to that current HTML page, preferably in the div tag I have set up for that purpose. Here's what I have so far:
<html>
<head>
<title>Tardy Reporting</title>
<script src="students.js" type="text/javascript">
</script>
</head>
<body>
<h1>Scan in Student ID</h1>
<form method="POST" name="idForm" onSubmit="getId(parseInt(document.idForm.studentId.value));">
<input type="text" name="studentId" id="studentId"/>
<input type="Submit" name="Submit" />
</form>
<div id="div1"></div>
<p>
</body>
</html>
and my JS file:
var studentNumberArray = [50011234, 50012345, 50013456];
var studentNameArray = ["Mike Simpson", "Greg Pollard", "Jason Vigil"];
var studentLastPeriodArray = ["George Washington", "Darth Vadar", "Obi Wan Kenobi"];
var tardyArray = [0, 0, 0];
function getId(studentId) {
for (i = 0; i < studentNumberArray.length; i++){
if(studentId === studentNumberArray[i]){
tardyArray[i] += tardyArray[i] + 1;
document.getElementById('div1').innerHTML='test';
}
}
}
Mind you, this is just the basic framework, so it's not nearly done yet, but the thing that is bugging me is that it'll go through the code correctly and print it out, but the result only lasts a fraction of a second on my browsers (chromium and firefox). Any help would be appreciated.

Here is an easier/better way to accomplish what you are trying to do
var students = {};
// Add students to object
students[50011234] = { 'id': '50011234', 'name':"Mike Simpson", 'lastPeriod':"George Washington", 'tardy':0 };
students[50012345] = { 'id': '50012345', 'name':"Greg Pollard", 'lastPeriod':"Darth Vadar", 'tardy':0 };
students[50013456] = { 'id': '50013456', 'name':"Jason Vigil", 'lastPeriod':"Obi Wan Kenobi", 'tardy':0 };
function getId(studentId) {
students[ studentId ].tardy += 1;
document.getElementById('div1').innerHTML='test';
}
Also, as pointed out below, you should change your button to not submit if that is not what you are intending to happen:
<form method="POST" name="idForm">
<input type="text" name="studentId" id="studentId"/>
<input type="button" onclick="getId(parseInt(document.idForm.studentId.value));" name="Mark Tardy" />
</form>

The reason why you see it only for a fraction of a second is that you are actually causing a submit. A submit is a full call back to the server which returns the page to its initial status.
To fix this simply make the function call on the onclick event of the button:
<html>
<head><title>Tardy Reporting</title>
<script src="students.js" type="text/javascript"> </script>
</head>
<body>
<h1>Scan in Student ID</h1>
<form method="POST" name="idForm" >
<input type="text" name="studentId" id="studentId" />
<input type="button" onclick="getId(parseInt(document.idForm.studentId.value));" value="submit" />
</form>
<div id="div1"></div>
<p>
</body>
</html>

What do you mean by "result"? It appears that you are setting the innerHTML of div1 to "test" over and over again.
Perhaps you mean to write
document.getElementById('div1').innerHTML += 'test';
Doing this is not efficient and it is preferable you concatenate on a string, or even better, join an array, before assigning the innerHTML.

but the result only lasts a fraction of a second on my browsers (chromium and firefox).
That is because you are submitting the page, so the page gets refreshed. You need to change the button type to button from submit. Also add a onclick to the button and call the js function getId

Forms are a special construct that allows communication with a server:
When a form is submitted, the form data is "POSTED" to a server via an HTTP request.
Typically, the browser displays the server's response as a new web page.
Forms use the action attribute to specify which server page should process the request
In your case, no action is specified, so the form POSTS to the current page, which is equivalent to refreshing the page. This means that all client-side (JavaScript) changes are wiped out, which is why you only see them for a split-second.
To achieve your desired result, change the input type from submit to button:
<input type="button" onclick=".." value="submit" />
Ideally, the student data exists in a database that is manipulated by code on a server. Your form would POST a request that returns an HTML page containing the desired data.
References
HTTP
Forms