Submitting HTML form data to javascript [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am lost, I just started programming and the code I have doesn't quite show what I'm trying to do, and is unfinished. However, my problem is I am trying to figure out how to take HTML form data entered by a user, and when a button is pressed its submits the data to a string variable in the sites Javascript. The challenge is that I can't use any server-side script, only HTML, CSS, Javascript, and I have to JQuery. I have look everywhere on how to do this for weeks. I can't find anything helpful for what I'm attempting.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script>
<!--
function storageCheck01(){
if(typeof(Storage)!=="undefined"){
activeSession();
}
else{
var b0002=document.getElementById("wrapper");
b0002.style.display="none";
document.write("No Support!");
};
}
function activeSession(){
if(typeof localStorage.visitCount !== "undefined"){
++localStorage.visitCount;
if(typeof sessionStorage.c02 !== "undefined"){
userData();
}else{
setCookie();
};
}else{
localStorage.visitCount = 1;
setCookie();
};
}
function setCookie(){
sessionStorage.c01=date();
sessionStorage.c02=screen.availWidth;
sessionStorage.c03=screen.availHeight;
userData(sessionStorage.c01, sessionStorage.c02, sessionStorage.c03);
}
function userData(date, width, hight, ){
}
addEventListener('load',storageCheck01,false);
-->
</script>
</head>
<body>
<form>
<!-- ADD FORM DATA TO RETRIEVE USERDATA -->
</form>
</body>
</html>

Well, it sounds like you are just trying to take a form and capture the user's input when they click submit. No need to post to a different file.
So, it is simply having a button putting an onclick event and then calling a function in the javascript. This javascript would use the document.getElementById(nameofObject).value.
Example:
<html>
<head>
<title>New Page 1</title>
<script language="JavaScript" type = "text/javascript">
<!--
function Test()
{
alert(document.getElementById("testinput").value);
}
//..>
-->
</script>
</head>
<body>
<form name="textfield">
<input type="text" name="T1" size="20" id="testinput">
<input type="button" value="Click Here" name="B1" onClick="Test()"></p>
</form>
</body>
</html>
Source: http://www.java2s.com/Tutorial/JavaScript/0460__DOM-Node/Getelementfromadocumentbyid.htm

If you just want to submit the data to the server, you don't have to use any JavaScript at all. When you put an "input" element in the form, for example, an "input type='text'" element, which creates a text box, the text box's value is automatically submitted to the server as a form variable, with the key being the name of the element, when use press the submit button. You can then use whatever code/platform you use on the server side to get the variable value.

Related

Binding .this to an HTML element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I've been trying to get this "this" to work, to bind it to an/any HTML element that the function is applied to. I'm trying to keep it universal to make it possible to apply the same function to multiple HTML elements.
Note:
I don't want to mess with ids nor classes and such since I want to keep the function as universal as possible.
<!doctype html>
<html>
<body>
<input type="button" value="Old" onClick="Change(this);">
<script type="text/javascript">
function Change(){
this.innerHTML = "New";
};
</script>
</body>
</html>
innerHTML won't work in this case. Being that this is an input, try using value instead.
var input = document.querySelector('input');
input.addEventListener('click', Change);
function Change(){
this.value = "New";
this.removeEventListener('click', Change);
}
<input type="button" value="Old" />
The problem is that when the page hits the input the Change function is not defined. Try the following:
<!doctype html>
<html>
<body>
<script type="text/javascript">
function Change(){
this.value = "New";
};
</script>
<input type="button" value="Old" onClick="Change.call(this);">
</body>
</html>
Note that I have changed the input's onClick to Change.call(this). And that the script is loaded before the control.
You can see a working fiddle here. Note that the JavaScript settings is configured so that the script is loaded in the head (Hit the cog in the JavaScript section).

How to send "HTML SELECT VALUE" to another webpage with ajax without refresh page [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Where is a problem ? . I want to send selected value to another webpage without refresh page. Than i try using ajax.
Here is all script (only one file) i want to send value 0,2,4 like parameter "t" to another web page. But function $.ajax didn't work. but after part with alert yes.
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.btnClick').click(function () {
$.ajax({
url:'http://ip adress:84/?t='+ $('.sendnumber').val(), //the page for example http://192.168.100.100:84/?t=2
type: 'POST',
});
alert('Value = ' + $('.sendnumber').val());
alert('Text = ' + $('.sendnumber option:selected').text());
});
})
</script>
</head>
<body>
<div>
<select class="sendnumber">
<option value="0">24</option>
<option value="2">25</option>
<option value="4">26</option>
</select>
<br /><br />
<input type="button" class="btnClick" value="Click" />
</div>
</body>
</html>
Please help me.
Thanks Hunt3r
Just noticed that your jquery selector is wrong for the option value, use this instead:
$('.sendnumber option:selected').val()
Without seeing the HTML it's hard to say, but remember that posting to a page on a different domain will require the appropriate CORS setting up, as this is a cross origin security setting

How to make a Go url bar in html+css [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Im a noob at js, and I would like to make a go bar like at the top of browsers in html and js. It will go to the url in the box when the button is pressed nothing more, nothing less. Heres about what i want:
In javascript you just have to add an event listener in the "Go" button.
Then when you click the button, you just have to redirect the url according to the text field value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="field" />
<button id="myBtn">Go</button>
<script type="text/javascript">
document.getElementById("myBtn").addEventListener("click", function(){
var url = document.getElementById("field").value;
window.location.href = url;
// OR
window.open(url);
});
</script>
</body>
</html>
With this code, if you enter a value in the text field and click the button. The url will add your value at the end.
For example if you are testing on the url localhost/ and you enter "test", javascript will redirect you to localhost/test.
To redirect correctly you must write "http://" or "https://" at the beginning

How to open new html file using java script [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Suppose I have two html files: 'page1' and 'page2'
Code in page1:
<html>
<body>
page1
click to go to page 2
</body>
</html>
Code in page2:
<html>
<body>
page2
click to go to page 1
</body>
</html>
Using this I can open page2 using hyperlink in page1 in a new tab in the same window and viceversa
Is it possible to the same thing using javascript
lots of way possible ..
1.
<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href;
</script>
2.
<script language="javascript">
alert("back");
window.history.back(-1);
</script>
3.
<script language="javascript">
window.navigate("top.jsp");
</script>
4.
<script language="JavaScript">
self.location="top.htm";
</script>
5.
<script language="javascript">
alert("Access Violation");
top.location="error.jsp";
</script>
6.
<script language="javascript">
window.location = window.location.host;
</script>
check this question here.you can use
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
You can add an click event listener to your link element (or any other) and set the href property in the location object. Let’s use inline onclick for illustration:
Link
By clicking on this element, the onclick handler will be executed, setting the href, i.e. the current address. By returning false, the default action will be prevented (see MouseClick.preventDefault()).
This is kind of a JavaScript surrogate for HTML hypertext behavior. You also can do other cool things with Window.location.

Blocking redirection with JQuery - What am I doing wrong? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I am trying to do some Ajax and jQuery here, submitting a form while staying on the same page. I read the following topic to start what I wanted to do (which is consisting of several good examples) : jQuery AJAX submit form
Here is my HTML file :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery File Tree Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="addTag.js" type="text/javascript"></script>
</head>
<body>
<form id="form_addtag" method="post" name="form_addtag" action="add_tag.php">
<legend>Add a tag</legend>
<input type="text" name="tag_name" id="tag_name" class="text" size="30" placeholder="Tag Name" />
<input type="text" name="tag_text_color" id="tag_text_color" class="text" size="6" placeholder="#ffffff"/>
<input type="text" name="tag_bg_color" id="tag_bg_color" class="text" size="6" placeholder="#000000" />
<button type="submit" id="button_save_tag">Add</button>
</form>
</body>
</html>
And the JS file :
$("form_addtag").submit(function(e) {
e.preventDefault();
var url = "add_tag.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("form_addtag").serialize(), // serializes the form's elements.
});
});
The execution is perfect : I can fill the form, click on the Submit button and it will pass everything field to add_tag.php. However, I always end up on mydomain.com/add_tag.php while I wanted to stay on the first page.
Your selector is incorrect:
$("#form_addtag").submit(function(e) {
You need the leading # to indicate that you want to search for an element by its "id". Without that, you were telling jQuery to add an event handler to every <form_addtag> element it could find, which is of course an empty list.
It's sort-of a big stumbling block with jQuery that the library doesn't treat such situations as errors. It can't really, because that would make life even more difficult, but it's still something that causes everybody some pain now and then.
In this case, you could remove the "action" attribute from the form, though that'd mean the page wouldn't work at all without JavaScript.
There are two problems.
Your jQuery needs to either be executed after the element it refers to on the page exists, usually by placing the code before the closing body tag, or it should be wrapped in a document ready call in the head of the page by using:
$( document ).ready(function() {
// your code here;} );
You're missing a # on your form selector. It should be: $("#form_addtag")

Categories

Resources