How to get text from javascript to html - javascript

Hello guys i am new to javascript and having a problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Temp </title>
<script type="text/javascript">
window.onload = function() {
document.forms["EventConfirmRedirection"].submit();
}</script>
<script type="text/javascript">
var formData = {
name: alex
email: alex#example.com
}
</script>
</head>
<body>
<form name="EventConfirmRedirection" method="post" action="http://requestb.in/14ewbma1">
<input type="hidden" name="name" value="test1-suc"></input>
<input type="hidden" name="email" value="test2-suc"></input>
</form>
</body>
</html>
I want name and email in the formdata object and post it.
Any help will be appreciated.
Thanks in advance

You just need to fill the value attribute (I added id's to make things simpler but you can also do it with e.g.: document.getElementsByName("name")[0])
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Temp </title>
<script type="text/javascript">
window.onload = function() {
fillandsubmit();
};
var formData = {name: "alex", email: "alex#example.com"}
function fillandsubmit(){
var i1 = document.getElementById("name");
var i2 = document.getElementById("email");
i1.value = formData.name;
i2.value = formData.email;
document.forms["EventConfirmRedirection"].submit();
}
</script>
</head>
<body>
<form name="EventConfirmRedirection" method="post" action="http://requestb.in/14ewbma1">
<input type="hidden" id="name" name="name" value="test1-suc"></input>
<input type="hidden" id="email" name="email" value="test2-suc"></input>
</form>
</body>
</html>

Related

Submit clicks does not response when use AJAX

I am writing an HTML code, in which i am trying to use AJAX but whenever i do tap on Submit button nothing seems work for me.
But without using AJAX in my code, my form works just fine, so what could be the reason, see below HTML code (with AJAX) which is not working:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'http://www.domain.com/offers/api.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
</script>
<title>Untitled Document</title>
</head>
<body>
<form>
<input type="text" name="fname" />
<input type="text" name="lname" />
<input type="hidden" name="uname" value="amit" />
<input type="hidden" name="ukey" value="suri" />
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>
And this is my old HTML Script, which was working perfectly:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form method="get" action="http://www.domain.com/offers/api.php" >
<input type="text" name="fname" />
<input type="text" name="lname" />
<input type="hidden" name="uname" value="amit" />
<input type="hidden" name="ukey" value="suri" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Looks like this is the problem:
Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at [url].
This can be fixed by moving the resource to the same domain or enabling CORS.
Same Origin Policy explained: http://www.jquery-tutorial.net/ajax/same-origin-policy/
Possible workaround: http://blog.edwards-research.com/2012/10/cross-domain-ajax-a-simple-workaround/

How to include submit input and button values with jQuery form submission?

I just realized that serializeArray() will not include submit input and submit button values per http://api.jquery.com/serializearray/
No submit button value is serialized since the form was not submitted
using a button.
What is the cleanest way to include the button value in the form submission?
http://jsfiddle.net/QJz35/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#myForm").submit(function(){
var inputs=$(this).find(":input");
var inputs_serial=inputs.serializeArray();
console.log(this,inputs,inputs_serial);
return false;
});
});
</script>
</head>
<body>
<form id="myForm">
<input name="text" value="text" type="text">
<button name="task" value="MyTask" type="submit">My Task</button>
<input name="task" value="MyTask" type="submit">
</form>
</body>
</html>

Data exchange between base html page and popup window

I have this index.php file;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Proj</title>
<script type="text/javascript">
function openWindow() {
window.open("popup.php", "popup_id", "scrollbars=no,resizable,width=200,,left=300,top=300,height=200");
}
</script>
</head>
<body>
<form name="form1" action="">
<input name="initialdata" type="text" value="initial data" />
<input type="button" value="Send" onClick="openWindow()" />
</form>
</body>
</html>
and this popup.php file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>popup</title>
<script type="text/javascript">
function putData() {
//How to copy from that file -> document.formname.popupdata.value to
//index.php -> document.form1.initialdata.value???
window.close();
}
function loadData() {
//how to get the value "initial data"
//from index.php -> document.form1.initialdata.value????????????
}
</script>
</head>
<body onLoad="loadData();">
<form name="formname" action="">
<input name="popupdata" type="text" value="" />
<input type="button" value="Send" onClick="putData()" />
</form>
</body>
</html>
How how to get the value "initial data" from from index.php -> document.form1.initialdata.value and how to copy from popup.php -> document.formname.popupdata.value to index.php -> document.form1.initialdata.value??
Using
window.opener.document.getElementsByName("initialdata")[0].value;
This might not work on every browser, though. For details, see this question:
window.opener alternatives

the submit button doesn't work

when i click on the submit button nothing happens , am not sure what is the problem.
this program just adds 2 numbers and the output should be an alerts message.
please help
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GlassFish JSP Page</title>
</head>
<body>
<%
int a = 6, b = 8, c;
c=a+b;
%>
<p>
Value 1 =
<%=a%></p>
<p>
Value 2 =
<%=b%></p>
<p>
Enter the value :<br /> <input type="text" id="c" /></br>
<input type="submit" value="Submit"
onclick="validate();" />
</p>
<script type="text/javascript">
function validate() {
var a = <%=a%>;
var b = <%=b%>;
var c = <%=c%>;
if (c!= parseInt(document.getElementById("c").value, 10))
alert("The values you entered is incorrect.");
} else {
alert("Correct!");
}
}
</script>
</body>
</html>
You are missing the opening bracket on the if statement
if (c!= parseInt(document.getElementById("c").value, 10))
should be
if (c!= parseInt(document.getElementById("c").value, 10)){

Making editable header text, won't work!

I have a header message that is brought in from another file (message.txt), and I'm making a text box that you can edit. (I will add the part where it makes it permanent later on.)
It is changing to nothing.
(E: "This is the header!" to "")
This is the code..
<script type="text/javascript">
function change(text)
{
//document.forms["f1"].elements["ta"].value="Hi!";
//document.f1.ta.value="Hi!";
document.getElementById("msg").innerHTML='<h2 class="hmsg">'+text+'</h2>';
}
function getText()
{
return document.getElementById("ta").value;
}
function all()
{
change(getText())
}
</script>
<form name="f1">
<input type="text" value="Enter your message here!" id="ta"/>
<input type="button" value=" " onclick='all()'/>
</form>
Perhaps you can clarify what is not working as you expect. I expanded your code into a working example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test</title>
</head>
<body>
<script type="text/javascript">
function change(text)
{
document.getElementById("msg").innerHTML='<h2 class="hmsg">'+text+'</h2>';
}
function getText()
{
return document.getElementById("ta").value;
}
function all()
{
change(getText())
}
</script>
<form action="#">
<div id="msg">
</div>
<div>
<input type="text" value="Enter your message here!" id="ta"/>
<input type="button" value=" " onclick='all()'/>
</div>
</form>
</body>
</html>
Changing the content of the <div> with id msg works here.

Categories