<script language=JavaScript>
function add()
{
***Z***=3025;
}
</script>
<form........>
<input type ="submit" onClick="add()"
</form>
<a herf="http://XXXXXXXX.co.uk/XXXX.qmd?pack_id=***Z***"></a>
need to put the Z***emphasized text*** value in the URL
The value of z will be produce by another java script function ADD
The best would be generating this at the server side, so that html is ready and no manipulation in JavaScript is needed. However:
give id to your link:
and change its href attribute:
<script>
var Z = 3025;
document.getElementById("cool_link").href += "***" + Z + "***";
</script>
if you're using jQuery syntax may be simplified a bit.
You want to set the value of Z in the add() function and pass that value to the querystring in the URL. I assume you want a client side implementation here.
It wont work that way because the variable Z is not recognized outside the <script> block, so the <A href> does not know of such a variable.
What will work however, is if you create the whole URL within the function and submit it from within the function.
Your code will look like this:
In the add() function, the URL is constructed and browser address is instantly changed to that location.
<script>
function add() {
var Z="3025";
document.location="http://XXXXXXXX.co.uk/XXXX.qmd?pack_id="+Z;
}
</script>
<form>
<input type ="submit" onClick="javascript:add()" value="my button">
</form>
If you actually want to just set the variables into the <A href> so that these can be clicked by the user at a later time, you'll probably need to use some not recommended techniques such as document.write of the full url.
Read the above link for why not to go down that route.
Related
I am new to html and javascript coding. So i have encountered a problem where i have to send a variable to a specific page and call that function out when needed.
function submit() {
firstname = document.getElementByName("firstname");
document.write(firstname);
}
<html>
<body>
<form>
<p>firstname: <input type="text" name="firstname" />
</p>
<input type="submit" onclick="submit()" />
</from>
</body>
</html>
now what should i do if i want to display the first name on a specific html page in javascript. For example, if i want to display the person name on third page then what should i do.
When you need to pass on an information from one page to another in the web, the general way you do is to use server side sessions. As I can see that there's no server side languages you are using, I believe you have only two options:
Using Query String Parameters (this works all the time).
Using Cookies (if the user has enabled it).
Using Local Storage (if your browser supports it).
For the first option, see How can I get query string values in JavaScript? For the second option, it's been answered a lot of times, so I'll leave the implementation with you: Set cookie and get cookie with JavaScript.
For the second one, you just need to use localStorage object this way:
function submit() {
var firstname = document.getElementByName("firstname");
document.getElementById("output").innerHTML = firstname;
if (!!window.localStorage) {
localStorage.setItem('firstname', firstname);
}
return false;
}
<form onsubmit="return submit();">
<p>firstname: <input type="text" name="firstname" /></p>
<input type="submit" onclick="return submit();" value="Save" />
</form>
<div id="output"></div>
I have also made some changes in your form submission method. And in your new page, you just need to use this code to get the item.
function getname() {
return localStorage.getItem('firstname');
}
There are multiple ways to resolve this issue but it is based upon your requirements. Are you going to third or any other page via a server navigation or is it client-side navigation. In any case you can use localstorage which is supported by almost all latest browser.
On first page you can do localStorage.setItem('firstName', 'Tom'); localstorage is globally available keyword.
On any other page then you can get the value by
var name = localStorage.getItem('firstName');
Other options you can look at cookies, querystring and session storage
when redirecting to next page, bind parameters in redirecting url like this,
window.location.href = "http://yoursite.com/page?data1=one&data2=two";
And fetch them from retreiving end like below,
var url_string = "http://yoursite.com/page?data1=one&data2=two";
var url = new URL(url_string);
var parameter_1 = url.searchParams.get("data1"); //returns "one"
var parameter_2 = url.searchParams.get("data2"); //returns "two"
Just started working in Dreamweaver recently. I was wondering if when you are working with external javascript files, do you have to pass in html elements or can the js file see their id? For example;
<body>
<script src="client.js"></script>
<input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td>
And then in the client.js file
function getValue() {
"use strict";
document.getElementById(submit).value = document.getElementById(otherelement).value;
}
This isn't working in the first place and I understand that there are other errors, but mainly - can the client.js file see and use getElementById(submit) and getElementById(otherelement)?
I would suggest shying away from using inline JavaScript elements, and doing things differently. I'd suggest using addEventListener() to bind events from JavaScript.
So, remove the onclick attribute, and just do:
<input type="submit" name="submit" id="submit" value="Submit">
We will be adding the event in JavaScript. For this to work, the script needs to be ran after the page (DOM) is loaded. You can use window.onload = function(){} to do this or you can load the script at the end of the page (before </body>).
Anyway, in your JavaScript, you want to use:
document.getElementById("submit").addEventListener('click', function(event){
// NOTE: You are clicking a submit button. After this function runs,
// then the form will be submitted. If you want to *stop* that, you can
// use the following:
// event.preventDefault();
// In here `this` will be the element that was clicked, the submit button
this.value = document.getElementById('otherelement').value;
});
document.getElementById( id ) takes id param as string
Use
document.getElementById("otherelement");
document.getElementById("submit");
also remove the </td> as there is no <tr> in your code
If you don't use quotes to wrap your strings, javascript will try to find variables named submit or otherelement. Try adding quotes like that :
function getValue() {
"use strict";
document.getElementById("submit").value = document.getElementById("otherelement").value;
}
If you have an HTML element with an id attribute, The JS engine automatically converts it to a variable..
e.g.
<input type="submit" name="submit" id="submit" onclick="getValue()" value="Submit"></td>
equals to the var submit in your JS code (considering you load your JS file when the DOM is fully rendered).
In every HTML page an element id is unique and that's why it is converted to a variable and wll not be overwritten until you decide so.
I was wondering if when you are working with external javascript
files, do you have to pass in html elements or can the js file see
their id
Yes you can see the ID:
function whoAmI(e) {
document.getElementById('output').textContent = e.target.id;
}
<button id='Hiii' onclick='whoAmI(event)'>Check ID</button>
<p id='output'></p>
I would like need help with a simple code. It needs to do the following:
Ask the user to input a value in a textbox (e.g. '12345').
Get the value entered and append them to a default URL string (e.g. 'http://mywebsite.com/track/').
Redirect the browser URL to the new value (e.g. http://mywebsite.com/track/12345').
I was thinking about parsing the value via a GET/POST command, but I don't want the question mark that will get added when you submit it, so Javascript would suffice.
You can try something like this :
<!DOCTYPE html>
<html>
<body>
<input type="text" id="urlInput" value="12345"><br>
<p>Click "GO" to be redirected to the URL.</p>
<button onclick="redirect()">GO</button>
<script>
function redirect() {
var url = "http://mywebsite.com/track/" + document.getElementById('urlInput').value;
window.location=url;
}
</script>
</body>
</html>
I think you are searching for this:
var new_url = prompt();
window.location.replace(new_url);
You get input from user with promt() and you save it in variable named new_url. After that you use replace() method for redirecting. You change the location of window object
PHP, Javascript, HTML
I have a PHP function stored in page2.php
function pot()
{
does something;
returns a value;
}
in another page (page1.php), i have a link and a textbox
when i click, call the function pot
Calling pot() is simple, but I am not able to store the value returned by pot() into a textbox. This is my textbox
<input type="text" id="field" name="field" value="value the function returns">
Any suggestions??
Try to set the returned value to the textbox using javascript/jquery like
function pot()
{
// your code
document.getElementById("field").value="returnedvalue"; // set the result value to element with id as field
}
This will set the value of the textbox when you click on the link
when i click, call the function pot
Note: Make sure to include the function in the file, where you are calling the function. Otherwise it won't work. If needed you can create a js file with the function (if you want to use the same function in many places) and call the js file in your php file with
<script src="jsfilename.js">
by JavaScript
function pot()
{
document.getElementById("field").value="returnedvalue";
}
by jQuery
function pot()
{
$("#field").val(returnedvalue);
}
Besides using ajax (the preffered method) you can also use a hidden iframe on your page.
Your html would be:
<iframe src="about:blank" id="myhiddeniframe"></iframe>
<input type="text" id="field" name="field" value="">
<div onclick="pot();">when i click, call the function pot</div>
Javascript:
function pot(){
document.getElementsById('myhiddeniframe').src="page2.php";
}
And your php-function:
function pot(){
//get the $value
<script>
var ret='<?php echo rawurlencode($value) ?>';
window.top.window.document.getElementsById('field').value=decodeURIComponent(ret);
<script>
}
[edit]
added the rawurlencode() and decodeURIComponen() to make sure your value doesn't screw up the javascript :-)
I think you're having problem with the js? I'm assuming that you require page2.php on page 1.. in function pot you can add this..
function pot()
{
document.getElementById('field').value = 'what ever value you want';
}
That is a native javascript, but there is a javascript library called jQuery that will helps you a lot regarding on that. It seems that you are new in Javascript, you can visit this http://jquery.com/ to help you
Have external .js file and add it in page1.php
script.js
function pot()
{
does something;
returns a value;
}
In page1.php
<script src="script.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
var t=pot();
$("#field").text(t);
});
I want to have a JSP like this:
<form id="form1">
Name is: <%=request.getParameter("name") %>
Show Email Form
</form>
<form id="form2">
<input type="text" name="emailid" />
Submit
</form>
My javascript is something like this:
function fun1() {
//Nothing important here, just show second form
$('#form2').show();
}
function fun2(myemail, myname) {
//Do something important here,
//Like update email for the given name
xmlhttp = GetXmlHttpObject();
var url = "updateEmail.do?email=" + myemail + "&name=" + myname;
xmlhttp.open("POST", url, true);
}
Things to note here:
1) There is no action tied to my form, I am submitting the second form through Ajax.
2) I need to have two different forms, first form has more elements besides Name. And the second form has another different set of elements besides the email. Only one of the functions (fun2) in form2 needs both parameters of the name from form1 and email id from form2.
3) Form1 has an uneditable name parameter, and form2 has an editable email parameter. The onclick function in form2 picks up the email text input with jQuery.
4) One other scenario to consider is if there are multiple entries of name in form1, like a list of names using loops. Eg,
<form id="form1">
<logic:iterate id="record" name="peoplerecords" property="records">
Name is: <bean:write name="record" property="name">
')">Show Email Form
</logic:iterate>
</form>
What is the best way to write the name parameter from form1 into the javascript onclick url in form2?
form1 :- onclick="fun1(name);"
form2 :- onclick="fun2(email, name);"
You can either directly put the name in with JSP:
Submit
Or you can give the dom node containing the name an id and access it with jQuery
Name is: <span id="nameNode"><%=request.getParameter("name") %></span>
Submit
Also consider getting the required parameters directly in your functions or define the onclick handlers in your script section to avoid the code getting messy. Watch out for the quotes inside HTML attributes, you used single quotes twice in the second onclick handler.
Don't put 'data' in your HTML model.
If you're using a server-side language, pass in all the data directly into your inline scripts, not inline HTML.
Example:
<a onclick="alert('<?php echo $the_string;?>');">alert!</a>
vs
<a id="alert_link">alert!</a>
<script type="text/javascript">
var the_string = <?php echo json_encode($the_string);?>; // you get javascript safe encoding with json_encode, almost for free!
document.getElementById("alert_link").onclick = function () {
alert(the_string);
};
</script>
The second example may seem like a lot more code but it really pays off if you have many of these things.
At this point, all your data is available in JavaScript, so it should be easy to tie it all together.
since your name value is being written in from the server (in JSP), can you just write it directly into your fun2 call?
onclick="fun2('$(\'input[name=emailid]\').val()', '<%=request.getParameter("name") %>')"