I am trying to do a javascript function that opens a URL in a new page, but i need to get same data from a from, example:
i have a text field and i put numbers like 234543256 and when i click submit i need to have a url like
http://somepage.com/somefile.php?=234543256&someotherthings
So it should be some url + text field datas + some url
to be opened in a new page. Can anyone help?
I have done this until now:
<html>
<head></head>
<body>
<script type="text/javascript" >
function tracking() {
var url="http://somepage.com/somefile.php?=";
var nr="022300134609";
var endurl="&someotherthings";
var fullurl=url + nr + endurl;
window.open(fullurl);
}
</script>
<form id="test">
<input type="textfield" id="nr" name"test">
<input type="submit" name="submit" onclick="tracking();">
</form>
</body>
</html>
But i need to get the value of the "nr" from the form to add.
Use window.open() method.
test.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function hello()
{
var name = document.getElementById("txtName").value;
// Set url.
var url = "file:///C:/Documents%20and%20Settings/Swe%20Mon/Desktop/test2.html"; // your url string
// Prepare for parameter.
var params = "userName=" + name;
window.open(url + "?" + params);
return false;
}
</script>
</head>
<body>
Name:<input type="text" id="txtName">
<button onclick="hello()">Try it</button>
</body>
</html>
test2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Test 2 page
</body>
</html>
You can add target="_blank" to your form tag. and use get as method. i.e:
<form method="get" target="_blank" name="myform" action="........">
</form>
I am assuming by saying submit form in a new page means a new tab..
Hope this helps.
try this .....it work for you
<html>
<head></head>
<body>
<script type="text/javascript" >
function tracking() {
var url="http://somepage.com/somefile.php?=";
var nr=$("#nr").val();
var endurl="&someotherthings";
var fullurl=url + nr + endurl;
window.open(fullurl);
}
</script>
<form id="test">
<input type="textfield" id="nr" name"test">
<input type="button" name="submit" onclick="tracking();">
</form>
</body>
</html>
You can make a javascript function to change your form action : Like in Javascript, it will change your current form action to be submit.
function ChnageUrl(targetForm)
{
var url = targetForm.action;
var someOtherThings = "someOtherThings";
var textValue = document.getElmentById('textboxId').value;
if(url.indexOf("?")>0)
{
url = url + "="+textValue+"&"+someOtherThings ;
}
else
{
url = url + "?="+textValue+"&"+someOtherThings ;
}
targetForm.action = url;
}
In Html, target="_blank" will open your action url to a new tab.
<from method="get" target="_blank" name="myform" action="url" onsubmit="ChangeUrl(this);">
<input type="text" id="textboxId" name = "textboxId" />
<input type="submit" value="submit"/>
</from>
Related
I keep getting result is undefined but alert outputs result!
A bit puuzzling, the same thing happens in Chrome and IE.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="frm1" action="#" method="post">
Yammer ID: <input type="text" name="y_id"><br><br>
<input type="submit" onclick="myFunction()" value="Submit">
</form>
<p id="demo">uuu</p>
<script>
function myFunction() {
frm_i=document.getElementById("frm1");
result=frm_i.elements[0].value;
alert (result);
}
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
I put:
document.getElementById("demo").innerHTML = result;
inside the function and i do not get an error, the uuu briefly changes to the input text then just as quickly changes back to uuu. But I get no error message this way.
Add var to frm_i and result and place:
document.getElementById('demo').innerHTML = result
Inside the function. It was out of scope.
Added a test server to verify success and changed #demo to an <output>
In order to prevent the form from refreshing after submitting, you can add the target attribute to the <form>:
<form id="frm1" action="http://httpbin.org/post" method="post" target='ifm'>
The value of target can be any location you have control over and '_blank' which is a new page (just like an anchor). If you prefer that the submit goes nowhere, then use:
target='#/'
In this Snippet, I submitted to the test server then redirected the response to a blank iframe by using the iframe's name attribute.
SNIPPET
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="frm1" action="http://httpbin.org/post" method="post" target='ifm'>
Yammer ID: <input type="text" name="y_id"><br><br>
<input type="submit" onclick="myFunction()" value="Submit">
<output id='demo'></output>
</form>
<iframe name='ifm' src='about:blank'></iframe>
<script>
function myFunction() {
var frm_i = document.getElementById("frm1");
var result = frm_i.elements[0].value;
alert(result);
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
This is my code where I am trying to call my RESTful web service in dotnetnuke HTML module.
If i remove the alert in javascript and press submit button, the page doesnt redirect. And as I put the alert again, it works! I think it has something to do with the delay. I want to make this work without making use of the alert function. Please help.
<html>
<head>
<script type="text/javascript">
function s()
{
var a=document.getElementById('txt').value;
var url= 'http://localhost:9737/RestServiceImpl.svc/xml/'+a;
window.location = url;
window.alert("hi");
}
</script>
</head>
<body> <input type="text" name="txt" id="txt" />
<input type="submit" value="submit" onclick="s();"/>
</body>
</html>
Try to move your <script type="text/javascript"> just before ending </body> tag.
<html>
<head><title></title> </head>
<body> <input type="text" name="txt" id="txt" />
<input type="submit" value="submit" onclick="s();"/>
<script type="text/javascript">
function s()
{
var a=document.getElementById('txt').value;
var url= 'http://localhost:9737/RestServiceImpl.svc/xml/'+a;
window.location = url;
}
</script>
</body>
</html>
Hope this will resolve your problem.
need to prevent default, otherwise browser immediately navigates away
function s(event) {
var a=document.getElementById('txt').value;
var url= 'http://localhost:9737/RestServiceImpl.svc/xml/'+a;
window.location = url;
event.preventDefault();
}
alternatively you could return false; from function s()
I must not understand how to change the content of my <div> tag.
Here is my html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="simple.js"></script>
<title>simple</title>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
Here is my .js file:
function myFunction() {
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
}
When I click the button the alert pops up but the html does not change to "Hello World". It just stays the same :(
What am I doing wrong here.
Update: Thanks everyone! Here is what I have working now:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
</head>
<body>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" id="myurl" size="100" /></p>
</form>
<button id='clickme'>Click me</button>
<button id='noclickme'>No Click me</button>
</div>
<script src="simple.js"></script>
</body>
</html>
My .js file:
function say_something(s) {
document.getElementById("results").innerHTML = s;
}
document.getElementById("clickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Hello World [" + url + "]");
});
document.getElementById("noclickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Goodbye [" + url + "]");
});
A button's default behaviour is to submit the form. In this case, the action being blank, it will try to submit to the current URL. You need to prevent that from happening. Also it's bad form to put Javascript inside your HTML like that - use addEventListener instead:
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
});
Note you'll need to include your script before the </body> rather than in <head> when using this method, or use the DOMContentLoaded event listener.
Example jsFiddle
The reason is the form label.
when you click the button, the form will take an action,but you did not have a certified action, so the chrome will take the defautl action,ie reload the html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
<script src="simple.js"></script>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
first.html
<!DOCTYPE html>
<html>
</head>
<body>
<form>
<script type="text/javascript">
// grab the id number
var theIdNumber = localStorage.getItem("idNumber");
// set the ID in the HTML page
document.getElementById("userId").value = theIdNumber;
</script>
<button type="button" onClick="validateUsernamePassword()">SEND</button>
</form>
</body>
</html>
other.js
function validateUsernamePassword()
{
var idNum = $("#userId").val();
alert('Well the id is :' + idNum);
// more code
}
The alert doesn't print the passed ID ... why ?
Modify your html like this:
<html>
<head>
<title></title>
</head>
<body>
<form>
<button type="button" onClick="validateUsernamePassword()">SEND</button>
<input type="hidden" id="userId"></input>
</form>
<script type="text/javascript">
// grab the id number
var theIdNumber = localStorage.getItem("idNumber");
// set the ID in the HTML page
document.getElementById("userId").value = theIdNumber;
</script>
</body>
</html>
Or you could do just this:
function validateUsernamePassword()
{
var idNum = localStorage.getItem("idNumber");
alert('Well the id is :' + idNum);
// more code
}
The second one is good since you already have the item in localstorage, so ther is no need of assign its value to another element
this trick may help you:
<html>
<head>
</head>
<body>
<dl>
<script>
window.var1 = "hello, world";
</script>
<input type="button" value="click" onclick="clicked()">
<script>
function clicked(){
alert(window.var1);
};
</script>
</body>
This is my first attempt to write anything in javascript, although this does exactly as intended, I am sure it can be done simpler. Not that this script is all that useful, just an exercise in learning something new. I was also trying not to use the evil document write.
So what is the more elegant way of doing this?
<html>
<body>
<input name="abc" type="text" id="foo">
<button onclick="AddInputValue()">Submit</button>
<p id="displayURL"></p>
<script>
function AddInputValue(){
var domain = "http://site.com?abc="
var qstring = document.getElementById("foo").value;
document.getElementById("displayURL").innerHTML=domain + qstring;
}
</script>
</body>
</html>
If you use jQuery:
<html>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<form id="form1">
<input name="abc" type="text" id="foo">
<button type="submit">Submit</button>
</form>
<p id="displayURL"></p>
<script>
$(document).ready(function () {
var form = document.getElementById("form1");
$(form).submit(function () {
var domain = "http://site.com/?";
var data = $(this).serialize();
document.getElementById("displayURL").innerHTML = domain + data;
return false;
});
});
</script>
</body>
</html>
You can even add more form elements and the name of the element will match the query string. http://jsfiddle.net/3muu6/
Just posting the example in http://jsfiddle.net/3muu6/.
Increased the number of inputs. This is basically what Google Analytics URL Builder does, and was the inspiration for this exercise.
<html>
<head>
<!-- Include jQuery! -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<form id="form1">
<input name="abc" type="text" id="foo" /><br />
<input name="def" type="text" id="bar" /><br />
<input name="ghi" type="text" id="tar" /><br />
<input name="jkl" type="text" id="boo" /><br />
<button type="submit">Submit</button>
</form>
<p id="displayURL"></p>
<script>
$(document).ready(function () {
var form = document.getElementById("form1");
$(form).submit(function () {
var domain = "http://example.com/?";
var data = $(this).serialize();
document.getElementById("displayURL").innerHTML = domain + data;
return false;
});
});
</script>
</body></html>
Now how to omit a query-string pair when the user leaves an input value blank? Hmm.