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.
Related
When I'm running this code it is not showing me the message which I want to display (i.e: res).Suppose I'm giving an input "$code$".Can anyone just help me out?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form>
<input type="text" name="a" id="a">
<button onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var res=msg.replace("$code$","1101");
document.getElementById("a").innerHTML=res;//this is to print res.
}
</script>
</body>
</html>
Two elements can't have the same ID. Further, an input element's value can not be obtained using the innerHTML property. Also, on clicking the submit button, the page will reload since the form get's submitted. To prevent that, call the function parse in an onsubmit on the <form> tag, and return false from the function.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form onsubmit="return parse();">
<input type="text" name="a" id="a">
<button type="submit">submit</button>
<p id="b"></p>
</form>
<script>
function parse(){
var msg = document.getElementById("a").value;
document.getElementById("b").innerHTML = msg;
return false;
}
</script>
</body>
</html>
Check this:
<form>
<input type="text" name="a" class="input_field" id="a">
<button type="button" onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var form = document.getElementsByTagName("form")[0]
msg = form.getElementsByClassName("input_field")[0].value;//this is to print res.
}
</script>
I added type="button" to the button to prevent the form from reloading the page
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input name="usrname" type="text" placeholder="Username" />
<input name="comnts" type="text" placeholder="comments"/>
<input id="btnButton" type="Submit" value="Click me"/>
</body>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
window.alert("Hi");
//var name-"Bhuvanesh";
//var Comment="Zack";
//window.alert("Hello");
}
};
</script>
</html>
This code above works and the code below does not work
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input name="usrname" type="text" placeholder="Username" />
<input name="comnts" type="text" placeholder="comments"/>
<input id="btnButton" type="Submit" value="Click me"/>
</body>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
//window.alert("Hi");
var name-"Bhuvanesh"; //Edited from - to =
var Comment="Zack";
window.alert("Hello "+name);
}
};
</script>
</html>
I do not understand why the code below does not work. I have used window.onload to make sure the page renders first. Somehow the code does not seem to work. I am trying to make a simple page that can accept Name and comment from the textbox and display it on the webpage. I am relatively new to web development. Any help is appreciated.
Edit 1: This code below does not seem to work.`
var name=document.getElementByName("usrname");
var Comment=document.getElementByName("comnts");
document.write(name+ "wrote "+Comment);
As far as I can tell, getElementByName is not a function. You can use getElementsByName (note the plural). This will return a collection rather than an element. More than this, you were fetching the entire element, not the value of the element like it seems you want. The following works for me:
var name = document.getElementsByName("usrname")[0].value;
var comment = document.getElementsByName("comnts")[0].value;
document.write(name + "wrote "+ comment);
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>
When I use this code the console.log and the value in the field disappear right away.
window.onload = bereken;
function bereken(){
var knop = document.getElementById('berekenKnop').onclick = function (){
var aantalKm = document.getElementById('bereken');
console.log(aantalKm.value);
};
}
How can I prevent that from happening. Or what am I doing wrong?
The final goal will be to append the result of a calculation by the value of the field into another field.
edit:
<html>
<head>
<script src="bereken.js"></script>
</head>
<body>
<form id="berekenForm">
Bereken: <input type="text" name="bereken" id="bereken"/><br />
<input type="submit" value="Bereken" id="berekenKnop"/>
</form>
</body>
</html>
The submit button is doing its default task. i.e. submitting the form. Try handling that.
Value in the field 'bereken' not disappearing.See the code below. If this is not the expected answer, please, Update the question with question in details:
<html>
<head>
<script type="text/javascript">
window.onload = bereken;
function bereken(){
var knop = document.getElementById('berekenKnop').onclick = function (){
var aantalKm = document.getElementById('bereken');
console.log(aantalKm.value);
};
}
</script>
</head>
<body>
<div id="berekenKnop">
Click Here to console value
</div><br/>
<input type="text" value=" bereken value" id="bereken" />
</body>
</html>
So in HTML 5, you can set buttons outside of a form to point to that form by using the form attribute. Is there a way to do this in Javascript? I need all references to this.form to point to a form somewhere else on the page. I've already tried:
<input type="button" onclick="this.form = document.forms['MyForm']; this.form.name.value = 'Blah' />
But with no success. Is there a way to do this?
Each of your form elements should have a unique ID, so you can change the value of the element without referencing the form, like this:
document.getElementById('your_field_id').value = 'Blah';
To submit the form, use document.forms:
document.forms['MyForm'].submit();
<input type="button" onclick="submitForm()" />
function submitForm() {
document.forms["myform"].submit();
}
What about something like this using jquery?
<html>
<head>
<title>Test Form</title>
</head>
<body>
<form>
<input type="text" id="test" />
<input type="submit" value="Submit" />
</form>
<input type="button" id="button" value="button" />
<script type="text/javascript">
$("#button").click(function(){
$("#test").val("Hello World!");
});
</script>
</body>
</html>