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/
Related
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>
I want to create a simple form, just like at the supermarket system, when checkout at the counter, they just scan the barcode on the item, and the quantity of the item is added automatically.
The problem is, i dont know which event(onkeyup,onkeypress, etc..) to use on the textfield.
This is my simple code.
<!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>
$(document).ready(function() {
$("#acc_no").on('input', function() {
var a = document.getElementById("acc_no").value;
var b = document.getElementById("qty_dead").value;
if(b == '')
{
qty = 0;
}
else
{
var qty = parseInt(b);
qty +=1
}
document.getElementById("qty_dead").value = qty;
document.form1.acc_no.select();
})
});
</script>
</head>
<body onLoad="document.form1.acc_no.select()">
<form action="deduct_stage_two_submit.php" method="post" name="form1" id="form1">
Accession No:<br />
<input name="acc_no" type="text" id="acc_no" onkeypress="calc()" autocomplete="off"/><br />
Dead Quantity:<br />
<input name="qty_dead" type="text" id="qty_dead" onkeypress="calc()" />
<br />
Date:<br />
<input name="date_dead" type="text" id="date_dead"/><br />
Batch Date Out Stage 1:<br />
<input name="date_out" type="text" id="date_out"/><br />
<input name="submit" type="submit" value="save">
</form>
</body>
</html>
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>
Hello again everyone
i am working on this
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>**Form**</h2>
<form name=form method="post" action="javascript" subject=RSVP" enctype="text/plain" >
<input type=text name="first" size="20"> First Name<BR>
<input type=text name="last" size="20"> Last Name<BR>
<input type="text" name="email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
I am getting really confused here.. I need to have a onsubmit form handler and a create validation script. Ok now if I am right the validation script is the the function that needs to be placed right? sorry i know some of you guys might think this is easy but I am still learning. Now I have examples in my book of it but they only due one at a time. Is there a way you can do a onsubmit of all or does it have to be one at a time? thanks
ok I have this one i am working on..
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
<!--
function validate_form()
{
valid = true;
if ( document.contact_form.contact_first.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<h2>**Form**</h2>
<form name="contact_form" method="post" action="javascript" onSubmit="return validate_form();">
<input type=text name="contact_first" size="20"> First Name<BR>
<input type=text name="contact_last" size="20"> Last Name<BR>
<input type="text" name="contact_email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
now Can i just copy the function for the other two or how do i do the one for the email?
I've added an example here of how to do it:
http://jsfiddle.net/tomgrohl/JMkAP/
I added an onsubmit handler to the form:
<form method="post" action="javascript" enctype="text/plain" onsubmit="return valForm(this);">
And added this at the top of the page, a simple validation function:
<script type="text/javascript">
function valForm( form ){
var firstVal, lastVal, emailVal, error = '';
firstVal= form.first.value;
lastVal= form.last.value;
emailVal= form.email.value;
//OR
//firstVal= document.getElementById('first').value;
//lastVal= document.getElementById('last').value;
//emailVal= document.getElementById('email').value;
if( firstVal.length == 0){
error += 'First name is required\n';
}
if( lastVal.length == 0){
error += 'Last name is required\n';
}
if( emailVal.length == 0){
error += 'Email is required\n';
}
if( error ){
alert( error );
return false;
}
return true;
}
</script>
OnSubmit is invoked once for the form.
You can validate all the form fields in one onSubmit function, during one call to that function.
function myOnSubmitHandler(theForm) {
if (theForm.data1.value == "") {
alert("This field is empty.");
return false; // suppress form submission
} else {
return true; // A-OK, form will be submitted
}
}
in HTML:
<form method="POST" ACTION="SomethingOnServer.php"
onSubmit="return myOnSubmitHandler(this);">
I need to have a onsubmit form handler
You said it; <form onsubmit="return myValidate(this);" .... >
myValidate is your validation function that returns true|false indicating whether or not you want the form to be submitted to its handler script (which your also missing).
might I suggest you use jQuery and jQuery validate to validate your form no need to re-invent the wheel
be sure to check out validator's demo
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.