HOW do i get this to work
onsubmit
, instead of
onclick with a button?
I have a form:
<form id="form">
<label>Email:</label>
<input type="email" name="email" id="email" class="iput" placeholder="jane#doe.com" reguired="required"/>
<input type="button" id="nbut" onclick="loadXMLDoc()" value="NEXT">
</form>
the button works fine to call and process the javascript:
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('response').innerHTML=xmlhttp.responseText;
document.getElementById('step1').style.display = "none";
document.getElementById('step2').style.display = "block";
}
}
var em = document.getElementById('email');
var em1 = em.value;
xmlhttp.open("GET","bin/process.php?email="+em1,true);
xmlhttp.send();
}
This only works with a button onclick, I can not get it to work onsubmit and don't know why..
onsubmit is a <form> element event.
You could very simply remove the onclick attribute from the button and change your form to
<form id="form" onsubmit="loadXMLDoc(); return false;">
The return false prevents the default event handler (form submission) from executing.
When using onsubmit you should also return false:
<form id="form" onsubmit="loadXMLDoc(); return false;">
Related
I have an AJAX script that used to replace an entire div with new html including the <input> markup:
<script>
function show_locations(str) {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var a = xmlhttp.responseText;
a = JSON.parse(a);
document.getElementById('locations_dropdown').innerHTML=a.location;
document.getElementById('dm').innerHTML=a.dm;
document.getElementById('dm_email').innerHTML=a.dm_email;
}
}
xmlhttp.open('GET','includes/get_locations.php?d='+str,true);
xmlhttp.send();
}
</script>
The document.getElementById('dm_email').innerHTML=a.dm_email;').innerHTML=a.dm_email; would replace the <div id=dm_email></div> contents with a new <input> markup which would include the new email value in value="" here:
<div id="dm_email">
<input type="email" value="">
</div>
But, now I know that sending html markup through json is a bad practice, so how can I change my AJAX script above to replace just the value of the input?
I tried this:
document.getElementById('dm_email').value=a.dm_email;
But it doesn't work. Any ideas?
I'm trying to create a more friendly input form where I ask for a user's name in a text box, and based on the information typed in, I would like to echo this to a display a little lower on the page, to personalize the page a little farther.
I'm trying to use AJAX, but am open to any better options out there...
<script>
function myFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",document.getElementById("fname");,true);
xmlhttp.send();
}
</script>
<p>Contact's first name <input type="text" id="fname" onkeyup="myFunction()">
<div id="myDiv">Contact's</div> phone number <input type="text" id="phn"></p>
use this simple code
<script>
function myFunction(val){
document.getElementById("myDiv").innerHTML = val;
}</script>
<p>Contact's first name <input type="text" id="fname" onkeyup="myFunction(this.value)">
<div id="myDiv">Contact's</div> phone number <input type="text" id="phn"></p>
Okay let me get this properly.
1) User types his name
2) User has to submit the name (Add a button)
3) Using AJAX (Only if you have to store the name to DB dynamically, that's a good choice)
4) Update the user name if AJAX was success, or show a error
5) If you just want update name on page, no need for AJAX. (Well I don't see the use of it unless you are just trying to learn things)
HTML
<form id="user-form">
<div>
<span>Contact's first name</span>
<input type="text" id="fname" name="fname">
</div>
<div>
<span>Contact's phone number</span>
<input type="text" id="phn" name="phn">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
<p id="user-name">User name</p>
JS
var userForm = document.getElementById("user-form");
userForm.onSubmit = function(e){
e.preventDefault();
var name = document.getElementById("fname").value;
var phone = document.getElementById("phone").value;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("user-id").innerHTML = name;
}
}
xmlhttp.open("POST","file.ext",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=" + name + "&phone=" + phone);
}
I would recommend you to start using jQuery library. It would simplify things a lot
I would use jQuery for your ajax as it has some cross browser compatible functions such as $.get.
Apart from that I don't really see any other recommendation I could provide apart from a small syntax error:
xmlhttp.open("GET",document.getElementById("fname");,true);
You should remove the semi-colon:
xmlhttp.open("GET",document.getElementById("fname"),true);
As #Hitham commented, sending a request on every keyup is probably not wise. You should add a button and use the click event to send the information, or use a form and use the submit event. However, if this is a test exercise then it shouldn't be a problem.
I have two items first is a dropdownbox that once user selects its options will trigger a javascript code and show the results on the same page,
the second one is a input box and a search button, once user type something and click on search button, it triggers the javascript but for some reasons it adds the value to the current page address rather than redirecting to other page and xmlhttp.status returns 0.
Rather than redirecting to class/myresults.php it add the item1 and its value to the current page address which is www.myexample.com/index.php?item1=computer
My form that does not work
<form action="">
<input name="search" type="text" title="Search"/>
<input type="submit" value="search" onclick="finditem(this.form.search.value)"/>
</form>
function finditem(option){
alert(option); <<<<shows the correct entered value
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
alert(xmlhttp.status); << returns 0
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","class/myresults.php?item1="+option,true);
xmlhttp.send();
}
java script of the drop down box that works
<select name="items" onchange="findbox(this.value)">
.....
</select>
function findbox(option){
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","class/myresults.php?item2="+option,true);
xmlhttp.send();
}
Your form gets submitted, i.e. the browser posts the data to the same location where it found your page. You do not seem to want that. Therefore you should prevent the submittal of the form. To accomplish that, you should not listen to the onclick event of the button but to the onsubmit event of the form:
<form action="" onsubmit="return finditem(this.search.value)">
<input name="search" type="text" title="Search"/>
<input type="submit" value="search"/>
</form>
And here's the JavaScript: (Notice that finditem returns false to prevent the form from actually submitting.)
function finditem(option){
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("Result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","class/myresults.php?item1="+option,true);
xmlhttp.send();
return false;
}
I am doing some work in PHP. I have two php page
index.php
<html>
<head>
<script>
function getVote(int)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll-vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Is this correct? </h3>
<div id="poll">
<form>
Yes:
<input type="radio" name="vote" value="0">
<br>No:
<input type="radio" name="vote" value="1">
<input type="submit" value="Forward" onclick="getVote(value);">
</form>
</div>
</body>
</html>
on click of submit button I need to get the value of selected radio button and pass it to the function.
Please help me
call just a function in youe onclick inline...
<input type="submit" value="Forward" onclick="getVote();"> //here
and get checked radio value in your function..
var radiovalue= $('input[name="vote"]:checked').val()
try this
JAVASCRIPT
function getVote()
{
var radiovalue= $('input[name="vote"]:checked').val()
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll-vote.php?vote="+radiovalue,true);
xmlhttp.send();
}
HTML
<input type="submit" value="Forward" onclick="getVote();">
Provide action and method attribute to form first
<form action="index.php" method="post">
And than only you can get the value like below:
$vote = $_POST['vote'];
I hope this is what you are looking for.
try:
function getVote()
{
var int=document.getElementById("vote").value;
....
EDIT: noticed it is a radio input... so this won't work. You need something like:
function getRadioCheckedValue(radio_name)
{
var oRadio = document.forms[0].elements[radio_name];
for(var i = 0; i < oRadio.length; i++)
{
if(oRadio[i].checked)
{
return oRadio[i].value;
}
}
return '';
}
And then do:
function getVote()
{
var int=getRadioCheckedValue(vote);
....
Via jquery you can get value of selected radio like this:
$('input[name=vote]:checked').val()
Try changing those 2:
<form name="myForm">
onclick="getValue(document.myForm);"
then the function:
function getValue(form){
var value = '';
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'radio') {
if(form.elements[i].checked == true) {
value = form.elements[i].value;
}
}
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll-vote.php?vote="+value,true);
xmlhttp.send();
}
Call the function without any value and then read out the radiobutton inbetween your function like this:
var rval = document.getElementsByName('vote');
for (var i = 0, length = rval.length; i < length; i++) {
if (rval[i].checked) {
alert(rval[i].value); // your value
}
}
Im new to this ajax and javascript thing. What I want is first to popup a confirm box, if true then perform xmlhttprequest. Afterwards I want to redirect the user to a new page. Here is what I've got.
<script type="text/javascript">
function showUser(str)
{
var r=confirm("Delete this customer?");
if (r==true) {
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","sletkunde.php?q="+str,true);
xmlhttp.send();
}
}
</script>
<form onclick="showUser(id.value); return false;" >
<input type="hidden" value="<?echo $id;?>" name="id">
<input type="button" value="tryk" name="knap">
</form>
<br>
<div id="txtHint"><b>something here</b></div>
And here is the sletkunde.php
<?
$q=$_GET["q"];
$slet = mysql_query("DELETE FROM Kunder WHERE KundeID = '".$q."'");
echo "hey"; // Just to see if it works
?>
The confirm box works, the mysql_query works, the echo "hey"; works. But how can I get it to redirect to kunder.php right after all of this (automatically).
Use location.href = "http://www.mysite.com/kunder.php" in your onreadystatechange function.