|
JavaScript - Ajax Php Post Using Image Submit Button
I am trying to follow this article on doing a POST request with AJAX and PHP and it works fine, but as soon as I switch from the default submit button to an image I get an error. I would really appreciate any assistance on why switching the submit button to an image would affect it.
Thanks http://www.hiteshagrawal.com/ajax/form-post-in-php-using-ajax/comment-page-1 Similar TutorialsHi everyone, I have a problem with something I am trying to do. I have a submit button and once I press it I want it to add a post value to my website. For example my website is www.something.net/test.php and once I press it I want it to refresh the site and becomes something like www.something.net/test.php&ca=test In other words I want it to use POST and then using GET I can get the value of the POST. I have posted this under javascript because I believe I have a problem with the javascript I use. Here is the javascript and the button I use Javascript Code: function reload(val)
{
//var val=form.accept.id;
self.location='test.php?ca=' + val ;
}
Button Code: <form name='form1' method='post' action='' STYLE='margin: 0px; padding: 0px;'> <input type='submit' name='accept' id='trial' value='Approve' onclick=\"reload(test)\" /> </form></div></td>"; Can you please help me with that? When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete. I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size. I have grabbed the event (which references the form, is that right?) and I have something like this: Code: <button type="submit" name="name_can_vary">Search</button> event.name_can_vary.style.visibility = 'hidden'; //(obviously this isn't complete code but no doubt explains what I am talking about) ..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image. Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on). Thanks for any help. I have created some online software which uses form data to submit to another page. The problem is that I have other submit buttons in the same form which submit to different pages (depending on which button is pressed). The first submit button works fine but all the others only work once. Code: <input class="cssbutton" type='submit' value='Button1' onclick="wbform.action='page1.php'; target='mainFrame'; return true;"> <input class="cssbutton" type='submit' value='Button2' onclick="wbform.action='page2.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button3' onclick="wbform.action='page3.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button4' onclick="wbform.action='page4.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button5' onclick="wbform.action='page5.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button6' onclick="wbform.action='page6.php'; target='_blank'; return true;"> Any ideas my friends? Hi, I currently have a form which is submitted using a html submit button. I was wondering what the best way is of using ajax to submit the page without the use of a submit button, and when the page submits, a message is displayed saying thank you for your booking. Thanks. Hello There, I have form which submitted data by checkbox checked, the checkbox as looks: PHP Code: <input type="checkbox" name="agree" value="1" checked="checked" onclick="document.getElementById('parentTable').className,processForm() = this.checked ? 'vehicleOn' : 'vehicleOff'" /><label for="agree">Agree</label> and the Ajax as following Code: function processForm() {
$.ajax({
type: 'POST',
url: '<?php echo $send; ?>',
data: 'opt1=' + encodeURIComponent($('input[name=\'opt1\']:checked').val() ? $('input[name=\'opt1\']:checked').val() : '') + '&opt2=' + encodeURIComponent($('input[name=\'opt2\']:checked').val() ? $('input[name=\'opt2\']:checked').val() : '') + '&comment=' + encodeURIComponent($('textarea=[name=\'comment\']').val()) + '&agree=' + encodeURIComponent($('input[name=\'agree\']:checked').val() ? $('input[name=\'agree\']:checked').val() : ''),
beforeSend: function() {
$('.success, .warning').remove();
$('#confirm_button').attr('disabled', 'disabled');
$('#confirm_title').after('<div class="wait"><img src="mage/loading_1.gif" alt="" /> <?php echo $text_wait; ?></div>');
},
complete: function() {
$('#confirm_button').attr('disabled', '');
$('.wait').remove();
},
success: function(data) {
if (data.error) {
$('#confirm_title').after('<div class="warning">' + data.error + '</div>');
}
if (data.success) {
$('#confirm_title').after('<div class="success">' + data.success + '</div>');
$('input[name=\'opt1\']:checked').attr('checked', '');
$('input[name=\'opt2\']:checked').attr('checked', '');
$('input[name=\'agree\']:checked').attr('checked', '');
}
}
});
}
The Problem is won't work with IE only, I tested it with IE 6, Anyone could suggest me what I could do? any pointers, samples or links I would be appreciate and Thanks a lot. I am trying to auto submit a login form remotely using .submit() . It's submitting, but for some reason if I use submit() the login isn't processing. However, if I turn off the auto submit and use an actual submit button it logs in just fine. Now, in the form tag there is a call onsubmit for some validation, does .submit() trigger that form onsubmit="" function? Is there something that happens differently when a user clicks a button verses the .submit(). Thanks! Paul Dear forum guys, I'm having a problem regarding the POST method with Ajax. I'm sending form inputs through Ajax by POST method to an ASP file to add them back to a database. However, what i noticed is that whenever i send the inputs of the form let's say ("username") through Ajax by the POST method, the result is the input "username" however with no spaces. Why is it that the Ajax POST method ignores the spaces and sends the inputs without the spaces? I tried it with the GET method and found out that GET doesn't ignore the spaces, it worked. But the application that i'm trying to build requires sending bigger data that the GET method can't send. SO therefore i need the POST method but i ran into the problem of Spaces Being Ignored. Please, is there a way to send any string that contains spaces through AJAX POST method and not ignore the spaces in the output??? Thank You David Hi, I have a problem with sending data from a form to a php script with AJAX. To test if it works, I try to send data from the form, print it in the php with "echo", and then put it back in the initial html file. My Javascript code is: Code: function registerPrivateUser()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var postData="firstName="+ document.getElementById("txtFirstName").value;
var url="classes/users/checkRegistration.php";
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("POST",url,true);
//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send(postData);
}
The function stateChanged, basically says: Code: if (xmlhttp.readyState==4)
{
var strResponse;
strResponse=xmlhttp.responseText;
alert('Response:' + xmlhttp.responseText);
}
checkRegistration.php looks like this: PHP Code: <? session_start(); $firstName=$_POST['firstName']; echo($firstName); ?> The problem is that the response is empty, but I don't know why. I have checked the input data and the postData variable says "firstName="+input (e.g. "firstName=Robert"), so that's not the error. I have read several forum posts here, but still haven't figured out what I'm doing wrong. If anyone could please tell me, I would appreciate it alot. he everyone please i want to know how to submit a form using ajax every 5 minutes without reloading page i have a huge form for exams and i need to submit the form without the need to wait until pressing submit because the user may wait to think about the answer a very long time.. so i want to submit the form and at the same time i cant reload the page as it is in normal submit form.. so how i can submit form in the background without letting the user knows that the form is submitted??? I am trying to get a Javascript "script" to do a function for me. I am trying to write a a script that will run while the webpage is open, that is selected a randomized 9 digit number Less than 350000000 that will be put into a textbox and submitted. I want a adjustable time when it submits. Could this be made into an <iframe>? Also, this has to do it to a different website, not the one locally being opened. Thank you for your help. This one is tricky. I can do this in php, however, I would like to keep everything on the same page. In a nutshell I'd like my users to export some data but after they click the export button I need them to input a key which will then be placed into a variable and the posted. Here's a simplified version of how script works without the key: Code: <?PHP
if(isset($_POST['Export'])){
$file = $_POST['Export'];
$hostname = $_SERVER['SERVER_NAME']; $hostname = str_replace('www.', '', $hostname);
$file_location = "http://".$hostname."/filelocation/".$file;
$list = file_get_contents("$file_location");
# filename for download
$filename = "$file.txt"; header("Content-Disposition: attachment; filename=\"$file\""); header("Content-Type: text/plain");
echo $list;
} ?>
<form action="" method="post">
<input type=hidden value="$file" name="Export">
<input type=submit value="Export"></form>
I know this is a javascript category and I have php. However, what I want is javascript. My users cannot access the page (traditionally) because a key needs to first be submitted. This is what I need help with > Find a way to use javascript when the 'Export' button is pressed to open a pop-up window for the user to submit their key. > Place there key into a variable. From there I can use PHP to post the variable, extract the data and allow the user to export. Something like this: Code: if(isset($_POST['Export'])){
//The user pressed the export button - use javascript to envoke pop-up
//<!--javascript pop-up code-->
//The user submitted their key - place it in a variable
//<!--javascript code to post key into variable-->
$key = $_GET['key'];
$file = $_POST['Export'];
$hostname = $_SERVER['SERVER_NAME']; $hostname = str_replace('www.', '', $hostname);
$file_location = "http://".$hostname."/filelocation/".$file."php?key=".$key;
$list = file_get_contents("$file_location");
# filename for download
$filename = "$file.txt"; header("Content-Disposition: attachment; filename=\"$file\""); header("Content-Type: text/plain");
echo $list;
} ?>
<form action="" method="post">
<input type=hidden value="$file" name="Export">
<input type=submit value="Export"></form>
If I can get the user to place a key in a simple input box (through a javascript pop-up after they've clicked the button) then I can post the variable and retrieve the data. Any ideas? Hi friends, i'm using greybox on my website, and using survey. i want when click submit button then post form data to opened greybox window.. but can't.... my form actions <form action="anket.php?islem=ok" method="post" onSubmit="javascript:return GB_showCenter('Anket',this.action, 280, 350)" > greybox window open, but can't show post data.. can anyone help me ? sorry for may bad english I have a website using this pageslide function http://srobbin.com/blog/jquery-pageslide/ Basically the page you see in the example is acting as a side menu bar and when you click the links on that page, it performs the sliding action and a new page slides into the screen. I'm wondering if there is any way to get the back button to slide it back to the main page, rather than having to click a link to go back? I have these buttons that I need to have switch accounts on and off. They work, but for some reason the words on the buttons are not changing from Activate to Deactivate... It seems as though the button is not updating itself after success of the function. First post on here so I apologize if I am doing this wrong. Problem code in jsbin--> http://jsbin.com/okifa3/ Code: $(function() {
var activateOwner = function(u) {
var dataString = 'oid=' + u + "&a=1";
$.ajax({
type: "GET",
url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
data: dataString,
success: function() {
$('#spanowneractivation' + u).css('display', 'none');
$('#message1' + u).html("Activated!").hide().fadeIn(1500, function() {
$('#message1' + u);
});
$('#spanownernamelink' + u).css('display', 'inline');
$('#' + u).val('Deactivate');
$('#spanownernametext' + u).css('display', 'none');
$('#' + u).removeClass('btnActivate');
$('#' + u).addClass('btnDectivate');
setTimeout(function() {
$('#message1' + u).css('display', 'none');
$('#spanowneractivation' + u).hide().fadeIn(1500);
},
2000
);
}
});
return false;
};
var deactivateOwner = function(u) {
var dataString = 'oid=' + u + "&a=0";
$.ajax({
type: "GET",
url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
data: dataString,
success: function() {
$('#spanowneractivation' + u).css('display', 'none');
$('#message1' + u).html("Deactivated!").hide().fadeIn(1500, function() {
$('#message1' + u);
});
$('#spanownernamelink' + u).css('display', 'none');
$('#spanownernametext' + u).css('display', 'inline');
$('#' + u).val = 'Activate';
$('#' + u).removeClass('btnDeactivate');
$('#' + u).addClass('btnActivate');
setTimeout(function() {
$('#message1' + u).css('display', 'none');
$('#spanowneractivation' + u).hide().fadeIn(1500);
},
2000
);
}
});
return false;
};
$(".toggleOwnerButton").click(function() {
if($(this).val() == 'Activate') {
activateOwner($(this).attr("id"));
} else {
deactivateOwner($(this).attr("id"));
}
});
});
in my php page i have two text field i have to get the value by ajax/java script then by clickin radio button add or multy ply i have to show the result. how cain i do it?
Hello Wondering something, I created a form and have I have it submit when the user clicks the Submit button. <!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> <title>Assignment 4</title> <style type="text/css"> </style> </head> <body style="color: #009999; background-color: #000000"> <form action="mailto:whatisthematrix01@hotmail.com" name="frmCustomer" method="post"> <table style="width: 85%; height: 222px;"> <tr> <td> <img alt="Space Ship" height="223" src="spaceship_cg2.jpg" style="float: left" width="761" /></td> </tr> </table> <p> </p> <table style="width: 100%"> <tr> <td class="style1">Interstellar Shipping - Customer Registration </td> </tr> </table> <p> </p> <table class="style2"> <tr> <td class="style3"> First Name:</td> <td colspan="2" style="width: 273px"> <input id="Text1" type="text" name="Fname" /></td> </tr> <tr> <td class="style3"> Last Name</td> <td colspan="2" style="width: 273px"> <input id="Text2" type="text" name="Lname" /></td> </tr> <tr> <td class="style3"> City: </td> <td colspan="2" style="width: 273px"> <input id="Text3" type="text" name="UseCity" /></td> </tr> <tr> <td class="style3"> Country:</td> <td colspan="2" style="width: 273px"> <input id="Text4" type="text" name="UserCountry" /></td> </tr> <tr> <td class="style3"> E-Mail:</td> <td colspan="2" style="width: 273px"> <input id="Text6" name="userEmail" type="text" /></td> </tr> <tr> <td class="style3"> Username:</td> <td colspan="2" style="width: 273px"> <input id="Text5" type="text" name="Username" /></td> </tr> <tr> <td class="style3"> Password:</td> <td colspan="2" style="width: 273px"> <input id="Password1" type="password" name="Userpassword" /></td> </tr> <tr> <td class="style3" style="height: 35px"> Gender:</td> <td style="width: 307px; height: 35px;"> Male <input name="radGender" type="radio" value="radMale" /> Female <input name="radGender" type="radio" value="radFemale" /></td> <td style="width: 273px; height: 35px;"> </td> </tr> <tr> <td class="style3"> <input id="Submit1" type="button" value="submit" onclick="doSave()"/></td> <td colspan="2" style="width: 273px"> <input id="Reset1" type="reset" value="reset" /></td> </tr> </table> </form> <script Language = "JavaScript"> function ltrim(varIn) {/*Purpose: Trims the leading spaces from a string*/ var varOut = "" if(!varIn) { // string is null, so nothing to do } else // string has at least one character { for(intI=0; intI < varIn.length; intI++) { if(varIn.charAt(intI) != " ") { //first non-space char found so return //string from this character forward varOut = varIn.substring(intI) break } } } return varOut } function doSave() { var fOk = true var strSuperMessage var superFirstName = document.frmCustomer.Fname var superLastName = document.frmCustomer.Lname var superUserCity = document.frmCustomer.UseCity var superUserName = document.frmCustomer.Username var superUserPassword = document.frmCustomer.Userpassword var superUserEmail = document.frmCustomer.userEmail var checkDigit = /\d/; if ((ltrim(superFirstName.value)).length == 0) { fOk = false strSuperMessage = "First Name Required" superFirstName.focus() } else { if ((ltrim(superLastName.value)).length == 0) { fOk = false strSuperMessage = "Last Name Required" superLastName.focus() } else { if ((ltrim(superUserCity.value)).length == 0) { fOk = false strSuperMessage = "City Required" superUserCity.focus() } else { if ((ltrim(superUserName.value)).length == 0) { fOk = false strSuperMessage = "Username Required" superUserName.focus() } else { if ((ltrim(superUserEmail.value)).length == 0) { fOk = false strSuperMessage = "E-Mail Required" superUserEmail.focus() } else { if (superUserEmail.value.indexOf("@") == -1 || superUserEmail.value.indexOf(".")== -1) { fOk = false strSuperMessage = "The entered e-mail address is not " + "valid.\nE-mail addresses must " + "be in the form name@domain." superUserEmail.focus() } else { if (superUserPassword.value.search(checkDigit) ==-1) { fOk=false strSuperMessage = "Please enter at least one digit in your password field."; superUserPassword.focus() } else { if ((document.frmCustomer.radGender[0].checked==false) && (document.frmCustomer.radGender[1].checked==false)) { fOk = false strSuperMessage = "Gender Required" } } } }}}}} if(fOk) { document.frmCustomer.submit(); //window.location="http://www.google.com" } else alert(strSuperMessage) } </script> </body> </html> Is it okay if I redirect to Google like I did here. if(fOk) { document.frmCustomer.submit(); //window.location="http://www.google.com" } I can't do it in the form action, because I have the mailto link. Simply put, what I did in the if statement, is that okay, there would be no problem with it? How exactly would you validate a form with JavaScript if instead of using the regular input type="submit" to allow submission you used input type="image"?
I am looking for some help similar to this old post: http://www.codingforums.com/showthread.php?t=19588 I want my radio buttons to become submit buttons as well. So when a user clicks on a radio button it submits the action and refreshes the page accordingly. As of now using only using onclick="this.form.submit()" the page only refreshes with no change. Here is a copy of the entire form. It is a custom shipping options form (I did not create it). Any help would be appreciated. Code: <!-- Custom shipping form -->
<form action="" method="post" name="update_shipping">
<table width="300">
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"1"))) {echo "checked=\"checked\"";} ?> name="grpshipping" type="radio" id="grpshipping_0" value="1" checked="checked" onclick="this.form.submit()"/>
Ground Shipping</label></td>
<td class="style261"><?php echo date("m/d/Y",$grounddelivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['Ground'] + ($row_rsshippingpricesover21['Ground'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['Ground'],2);
} ?></td>
</tr>
<?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") == 0) {//show other shipping options ONLY if a ground shipping only item is not in the cart ?>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"2"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="2" id="grpshipping_1" onclick="this.form.submit()" />
Fedex 3 Day</label></td>
<td class="style261"><?php echo date("m/d/Y",$fedex3delivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['Fedex3'] + ($row_rsshippingpricesover21['Fedex3'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['Fedex3'],2);
} ?></td>
</tr>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"3"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="3" id="grpshipping_2" onclick="this.form.submit()"/>
Fedex 2 Day</label></td>
<td class="style261"><?php echo date("m/d/Y",$fedex2delivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['Fedex2'] + ($row_rsshippingpricesover21['Fedex2'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['Fedex2'],2);
} ?></td>
</tr>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"4"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="4" id="grpshipping_3" onclick="this.form.submit()"/>
Next Day PM</label></td>
<td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['ONPM'] + ($row_rsshippingpricesover21['ONPM'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['ONPM'],2);
} ?></td>
</tr>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"5"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="5" id="grpshipping_4" onclick="this.form.submit()"/>
Next Day AM</label></td>
<td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['ONAM'] + ($row_rsshippingpricesover21['ONAM'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['ONAM'],2);
} ?></td>
</tr>
</table>
<table class="eC_ButtonWrapper" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><center>Choose an option above and click update to change your shipping preference.<br /><b>PLEASE BE SURE AND PRESS UPDATE IF YOU CHANGE YOUR SHIPPING OPTION<br /><br /><input type="image" name="Update_shipping" id="Update_shipping" value="Update_shipping" alt="Update_shipping" src="WA_eCart/Images/Nautica/Btn4_EN_update.gif" class="eC_ImageButton" /></center></td>
</tr>
</table>
<?php } //end of show if ground ship item is not in the cart?>
<?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") <> 0) { ?>
<font color="red">The cart contains a Ground Shipping only item, this order can only be shipped ground</font><br /><br />
<?php } ?>
</form>
<!-- End of Custom shipping form -->
<input type="image" src="uploads/button_in_cart.gif" border="0" alt="Add to Cart" title=" Add to Cart " onclick="addtocart(1);"> in addtocart function I do some checking how can i change that if after some checking my variable valid=0 that it does not allow the user to submit the form? Whenever I click the Submit button, which should create a new window showing all the details entered in the form, it doesn't work ideas? javascript.html Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<!-- The external style sheets -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript" src="myjavascript.js"></script>
<meta name="keywords" content="CO332">
<meta name="description" content="CO332 Exercise Website">
<meta name="author" content="Bradley Berwick">
</head>
<body>
<div id="container">
<div id="maincontent">
<div id="header">
<h1>
Exercise Website
</h1>
</div>
<div id="leftnav">
<ul>
<li><a href="index.html" >Home</a>
<li><a href="myjavascript.html" ><span class="currentpage">Services</span></a>
<li><a href="#" >TBA</a>
<li><a href="#" >TBA</a>
</ul>
</div>
<div id="content">
<h2>About Yourself</h2>
<form name="exampleform">
<h3>Name: <input name="yourname" type="text"></h3>
<h3>Age: <input name="age" type="text" size="3"
Onchange = '
if ( !( this.value > 0 && this.value < 150 ) ) {
alert( this.value + " is not a valid age.");
this.value=""; // clear age text box
}' > </h3>
<h3>Gender:
<input name="gender" type="radio" value="male"> Male
<input name="gender" type="radio" value="female"> Female
</h3>
<h3>Your favourite colour:
<select name="colours">
<option value="None">
<option value="red">Red
<option value="green">Green
<option value="blue">Blue
<option value="pink">Pink
<option value="orange">Orange
<option value="purple">Purple
</select>
</h3>
<h3>Your hobbies a <br>
<input name="running" type="checkbox"> Running <br>
<input name="football" type="checkbox"> Football <br>
<input name="golf" type="checkbox"> Golf <br>
<input name="cycling" type="checkbox"> Cycling
</h3>
<textarea rows="10" cols="30">
Add comments.
</textarea>
<p>
<input type="reset" value="Clear">
<input name="submit" type="button" value="Submit"
onclick='submitForm()';>
</p>
</form>
</div>
</div>
<div id="footer">
<div id="mailto"> Last updated on 28th Oct 2011<br>
Maintained by Bradley Berwick
</div>
</div>
</div>
</body>
</html>
myjavascript.js Code: function displayMessage(msg) {
// Open a new window
var msgWindow = window.open('', 'Message');
// Write message in the new Window
msgWindow.document.write(msg);
msgWindow.document.close();
// Raise this window, in case it's not visible
msgWindow.focus();
}
var hobstring="";
function submitForm() {
var nam=document.exampleform.elements["yourname"].value;
var age=document.exampleform.elements["age"].value;
var gend = document.getElementsByName('gender');
for (var i = 0; i < gend.length; i++) {
if (gend[i].checked==true) {
var sex=gend[i].value;
}
}
var sel=document.getElementById('color');
var color=sel.options[sel.selectedIndex].value;
var hobbs = document.getElementsByName('hobby');
for (var a = 0; a < hobbs.length; a++) {
if (hobbs[a].checked==true) {
hobstring+=hobbs[a].id+", ";
}
}
var msg="Name: "+nam+"<br>Age: "+age+"<br>Gender: "+sex+"<br>Favorite color: "+color+"<br>Hobbies: "+hobstring;
displayMessage(msg);
}
|
|||||||