|
JavaScript - Form Tags On Input Buttons?
Is it necessary (or advisable) to place <form> tags around input buttons? They seem to work fine either way.
Code: <input type="button" value=" Home " onClick="parent.main.location='home.htm'"> Similar TutorialsHey all, I have a simple form that looks something like this: Code: <div id="responses"> <input class="checkbox" type="checkbox" name="group1" value="1" id="option1"/><label class="label" for="option1">Option one text</label> <input class="checkbox" type="checkbox" name="group1" value="0" id="option2"/><label class="label" for="option2">Option two text</label> <input class="checkbox" type="checkbox" name="group1" value="1" id="option3"/><label class="label" for="option3">Option three text</label> </div> I am trying to figure out a way to use javascript to take these and randomize the order of them. For example, if you were looking at it and clicked a randomize button it would shuffle around the options. I am fairly new to javascript and don't really know where to start with something like this. I would greatly appreciate it if someone could get me started or point me in the right direction. Thanks! Hello, I have a simple form with simple validation. I am just playing around a bit with forms and don't really have concrete knowledge. What I have done is created a form. Asking for first name, last name, age and email. When the user clicks the submit button I want 2 functions to run, the first checking the input is correct and also making sure all fields have a value. Once everything is checked and is O.K I want to go into another function which sends all this information to an array one by one. I am having difficulty accessing each individual input tag. I could achieve what I want to do, but it will take double the lines of code because each input has a different 'name'. So, what I am trying to do is access the input tags the same as you would do an array. Here is my code: HTML: Code: <form name="regForm" id="form"> <fieldset> <legend>Real Heroes - Registration Form</legend> <p>First Name:<input type="text" size="30" maxlength="20" name="txtFirstName" /></p> <p>Last Name:<input type="text" size="30" maxlength="20" name="txtLastName" /></p> <p>Age:<input type="text" size="30" maxlength="3" name="txtAge" /></p> <p>Email Address:<input type="text" size="30" maxlength="50" name="email" /></p> <p><input type="button" value="Submit Registration" name="butChkForm" onclick="callFuncs_onclick()" /> <input type="reset" value="Reset" name="resetForm" /></p> </fieldset> </form> JavaScript: Code: //CALLING THE FORM SCRIPTS//
function callFuncs_onclick()
{
chkForm_onclick();
creatingDatabase_onclick();
}
//**************FORM VALIDATION***************//
function chkForm_onclick()
{
var theForm = document.regForm;
if (theForm.txtFirstName.value == "" || theForm.txtLastName.value == "" || theForm.txtAge.value == ""
|| theForm.email.value == "")
{
alert("Please complete all of the form.");
if (theForm.txtFirstName.value == "")
{
theForm.txtFirstName.focus();
}
if (theForm.txtLastName.value == "")
{
theForm.txtLastName.focus();
}
if (theForm.txtAge.value == "")
{
theForm.txtAge.focus();
}
if (theForm.email.value == "")
{
theForm.email.focus();
}
}
else if (isNaN(theForm.txtAge.value))
{
alert("That is not valid input for this field. Please re-enter your age.");
theForm.txtAge.focus();
}
else
{
alert("Thank you for completing the form, " + theForm.txtFirstName.value);
}
}
function creatingDatabase_onclick()
{
var form = document.regForm;
var index = form.input[0].value;
alert(index);
}
I'm not quite sure where I am going wrong. Please note that these functions really labour the point, I know I have way too many lines of code but I am still very amateur with JS. Thank you for any help/information. Kind Regards, LC. Hate to ask this as I know it's an easy one but surprisingly Google turns up no clear/simple answers! I'm modifying some old code and am not JS programmer (I'm a PHP programmer) and this is driving me nuts. The existing code makes sure that when the form is submitted that there isn't a missing value. There's also some hidden input values. The JS starts out function checkform(orderform) and the form tag includes onsubmit="return checkform(this);"> I can add an alert to the form to see varius input values, such as a hidden value for the input name 'description' I can use: alert (orderform.description.value) Eazy peazy. However the form has two different input type=image buttons now and I need to do some branching in the JS depending on which image button they press. I recall IE had an issue where it only sends the x and y coordinates So I figure an easy to determine which image button was pressed is just check to see if the x or y value for each button is non-zero. But I can't for the life of me figure out how to access the value. Example: alert (orderform.button1.x.value) doesn't work. Can someone refresh my memory or suggest an entirely different method for detecting which image button was used to submit a form? THanks in advance! I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. Hi, i want to set an input value to the same value as the input selected from another input on the same form so when the user selects input 1 i want the hidden input2 to get the same value im guessing i use onsubmit because its hidden so there wont be a focus or blur this would be part of the input Code: onsubmit="(this.value = this.othervalue)" othervalue being the other input name="othervalue" is that the correct syntax Is there a way so that I can move the submit button outside of the form tags? and if this is possible, can you make it with multiple text boxes, each with their corresponding submit button? heres the coding Code: <html>
<head>
<script type="text/javascript">
<!--
function gotoURL() {
var newURL = document.url2go.go.value
document.location.href=newURL
}
//-->
</script>
</head>
<body>
<form action="javaScript:gotoURL()" method="get" name="url2go">
<input type="text" name="go" value="http://" size="50">
<INPUT TYPE="image" SRC="" id="go" HEIGHT="150" WIDTH="150" BORDER="0" ALT="Submit Form">
</form>
</body>
</html>
I'm trying to set up a post preview to use before submitting a post. I need button 1 to open a pop-up with the preview of the post, and then button 2 should submit the post after the poster is satisfied. With the code below, when either button is clicked, each work as expected. The problem I'm having is, after the preview (OnButton1) is clicked, the submit button (OnButton2) will only open in a new tab, and not submit to the opened page from where it is being executed. This could lead to many double posts, if someone who's not sure what is going on, keeps clicking the submit button. I am wondering if there is a target "_self", or another method to make this work. I'm very happy with the preview window popping up, as it should, but will try any suggestions that are offered. function OnButton1() { var popUp = window.open ('','popUp','scrollbars=yes,resizable=yes,width=800, height=450'); document.form.action = "index.php?page=Preview" document.form.target = "popUp"; // Open in a new window document.form.preview(); // Submit the page return true; } function OnButton2() { document.form.action = "index.php?page=post" document.form.submit(); // Submit the page return true; } I have written some code below which hopefully changes teh value of the flag using JavaScript, I now want to request the value of the flag to see if it's a 1 or a 2? Code: <script>
function collatedata()
{
document.f1.flag.value=1;
document.f1.submit();
}
function generateinvoices()
{
document.f1.flag.value=2;
document.f1.submit();
}
</script>
<input type="hidden" name="flag" id="flag" />
<a href="javascript:collatedata();" class="button"><span>Collate</span></a>
<a href="javascript:generateinvoices();" class="button"><span>Generate</span></a>
Hello in "validateField" function radio is not exists and I don't know how can I add a validation rule for radio buttons. please help me . my code is attached. thank you Hi all, I have a form which has two radio buttons at the beginning which show and hide fields depending on what button is clicked: I want to adapt this js and html code so that when the page loads it checks whether one of the two radio buttons is clicked and depending on that it displays/hides the divs which are declared in the current function, at the moment it performs this when the user clicks one of the radio buttons but I want to perform it when the page is loaded and also when the user first enters the page I want the yes radio button to be selected and obviously hiding/showing the appropriate fields. Thanks for the help! Code:
function checkjob(jobvalue){
if(jobvalue!="yes") {
document.getElementById("nombre").style.display = "block";
document.getElementById("apellido").style.display = "block";
document.getElementById("empresa").style.display = "none";
document.getElementById("contacto").style.display = "none";
}else{
document.getElementById("nombre").style.display = "none";
document.getElementById("apellido").style.display = "none";
document.getElementById("empresa").style.display = "block";
document.getElementById("contacto").style.display = "block";
}
}
HTML
<div class="form_element">
<label >></label>
<div class="radio_element">
<input type="radio" value="yes" class="radio" id="yes" name="job" onchange="checkjob(this.value)" >
<span >yes</span>
</div>
<div class="radio_element">
<input type="radio" value="no" class="radio" id="no" name="job" onchange="checkjob(this.value)">
<span >no</span>
</div>
</div>
Hi, I've got a form, and it contains a JS function to validate input (e.g. check for empty fields / valid email etc). I currently only have one submit button, which takes a user to a preview screen for the data they entered. I'd like to add a 2nd button to allow them to send the data right away, skipping the preview bit. However, I can't see how to have one form, with 2 buttons, and for each button to have a different destination, AND for each button to call the form validation JS. In fact, what I'm trying to do is much the same as this newthread page on this form, as it has the "Submit New Thread" and "Preview Post" buttons, each taking the user to a different page, each firing the form validation JS. I'd be grateful for any advice about how to do this. Thanks! hello everyone Im new to javascript as well as to this forum, Im coming here for first class help that I can only get from skilled programmers like you. I have a html form that uses javascript for validation, this is an assignment that consists of a form that sells hard drives from three different manufacturers, more specifically the part im stuck on is where if a manufacturer hoes have a number in the number of drives textbox, javascript needs to check to see that one of the radio buttons in that row is checked, if no radio button is checked an alert is displayed, however when I do select a radio button I still get the alert I used a "if...else if...else" construction but my logic is not well structured and thereby I get those problems, I have included the code down below if anyone is interested in helping a newbie out, thanks Code: <html>
<head>
<style type="text/css">
.bold {font-weight:bold ; font-family:"comic sans ms"}
</style>
<script type="text/javascript">
function number_of_drives()
{
//checks that a value is entered for at least one drive's manufacturer
if(document.myform.drive1.value=="" && document.myform.drive2.value=="" && document.myform.drive3.value=="")
{
alert("please enter a quantity for the number of drives you wish to purchase from a manufacturer"); //if no value is entered in any the message is displayed
return; //no further calculation is done
}
else if(isNaN(document.myform.drive1.value || document.myform.drive2.value || document.myform.drive3.value ))//verifies that only numeric values were entered
{
alert("make sure you enter a numeric values for the 'number of drives' column");
return;
}
else
{
if(document.myform.drive1.value !="" && document.myform.western[0].checked==false && document.myform.western[1].checked==false && document.myform.western[2].checked==false)
alert("please select a size for the western digital drive");
else if(document.myform.drive2.value !="" && document.myform.maxtor[0].checked==false && document.myform.maxtor[1].checked==false && document.myform.maxtor[2].checked==false)
alert("please select a size for the maxtor digital drive");
else if(document.myform.drive2.value !="" && document.myform.quantum[0].checked==false && document.myform.quantum[].checked==false && document.myform.quantum[2].checked==false)
alert("please select a size for the quantum digital drive");
}
}
function check_radios()//function to check that a size is selected in the same row as the number of drives textbox//function to check that a size is selected in the same row as the number of drives textbox
{
if(document.myform.drive1!="" && document.myform.western[0].checked==false && document.myform.western[1].checked==false && document.myform.western[2].checked==false)// if drive1 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'western digital' drive");
return;
}
else{return;}
if(document.myform.drive2!="" && document.myform.maxtor[0].checked==false && document.myform.maxtor[1].checked==false && document.myform.maxtor[2].checked==false)// if drive2 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'maxtor' drive");
return;
}
else{return;}
if(document.myform.drive3!="" && document.myform.quantum[0].checked==false && document.myform.quantum[1].checked==false && document.myform.quantum[2].checked==false) // if drive2 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'quantum' drive");
return;
}
else{return;}
}
function clear_form()
{
document.myform.western[0].value=="";
document.myform.western[1].value=="";
document.myform.western[2].value=="";
document.myform.maxtor[0].value=="";
document.myform.maxtor[1].value=="";
document.myform.maxtor[2].value=="";
document.myform.quantum[0].value=="";
document.myform.quantum[1].value=="";
document.myform.quantum[2].value=="";
document.myform.drive1.value=="";
document.myform.drive2.value=="";
document.myform.drive3.value=="";
document.myform.size1.value=="";
document.myform.size2.value=="";
document.myform.size3.value=="";
document.myform.totalsize.value=="";
document.myform.totalcost.value=="";
document.myform.discount.value=="";
document.myform.grandtotal.value=="";
}
</script>
<title></title>
</head>
<body>
<form name="myform">
<table align="center" border="1" width="80%">
<tr style="font-family:'comic sans ms'; font-size:24pt"><td align="center" colspan="6">Rupert's Hard Drive Emporium</td></tr>
<tr><td class="bold" valign="middle" align="center" rowspan="2">Manufacturer</td><td colspan="3" align="center" class="bold">Drive Size</td><td rowspan="2" class="bold">Number of Drivers</td><td rowspan="2" class="bold">Number of GB</td></tr>
<tr><td class="bold">500 Gigabytes</td><td class="bold">1 Terabyte</td><td class="bold">2 Terabytes</td></tr>
<tr><td>Western Digital ($0.12/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="western" value="500" /></td><td align="center"><INPUT TYPE=RADIO NAME="western" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="western" value="2048"/></td><td align="center"><input type="text" name="drive1"/></td><td align="center"><input type="text" name="size1"/></td></tr>
<tr><td>Maxtor ($0.16/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="500"/></td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="2048"/></td><td align="center"><input type="text" name="drive2"/></td><td align="center"><input type="text" name="size2"/></td></tr>
<tr><td>Quantum ($0.09/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="500"/></td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="2048"/></td><td align="center"><input type="text" name="drive3"/></td><td align="center"><input type="text" name="size3"/></td></tr>
<tr><td rowspan="4" align="center"><img src="hardisk.jpg" height="120pt" width="90pt"/></td><td colspan="3" align="right">Total Gigabytes Purchased</td><td align="center" colspan="2"><input type="text" name="totalsize" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Total Cost of Drives</td><td align="center" colspan="2"><input type="text" name="totalcost" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Discount</td><td align="center" colspan="2"><input type="text" name="discount" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Grand Total</td><td align="center" colspan="2"><input type="text" name="grandtotal" readonly="true"/></td></tr>
<tr><td align="center"><input type="submit" value="calculate" onclick="number_of_drives()"/></td><td align="center" colspan="5"><input type="submit" value="clear the form" onclick="clear_form()"/></td></tr>
</table>
</form>
</body>
</html>
I have been looking around for a while on google and have come accross a few things but still am unable to find the exact codes. I am trying to have a page setup so that when the user clicks a button it will add preset text to a form box and keep the chronological order of buttons that are clicked. This is going to be used for my ambulance service to assist dispatch so basically i am looking for preset buttons that the dispatcher can click disp. and have the dispatch and time added to a list in the form box that can later be copied and emailed to our cell phones. Thanks for any help. Hi, I'm looking for help, please. I am trying to setup a donation form for a friend, where someone can click radio buttons for set donation amounts, or click the "other" radio buttons and enter a different amount. The donation amount is then passed over to a secure credit card entry page, hosted by a 3rd party merchant. I can set up all the pre-defined radio buttons to correctly pass on the donation amount to the credit card page, but I cannot figure out how to work the "other" radio button amount. Any help would be very much appreciated! Thanks! Hi, I've devised a javascript to guess what a user is typing in. That all works, but I'm stuck on how to take that value the user has submitted and put it back into the form. At the moment my form is: <form method="post" action="/bin/openathenssp_isapi.dll?type=ukfed&dir=req&requestURL=index.php" onsubmit="send_sso('login_form', 'loading', '<?=SITE_URL?>'); return false;"> <input type='text' name='uni_name' id='uni_name' value='' autocomplete="off"> <input type="hidden" name="entityID" id="entityID" /> //Where the name is guessed <script>actb(document.getElementById("uni_name"),customarray);</script> <input type='submit' name='submit' value='submit'> </form> So basically I'm trying to put uni_name into the entityID. Here's my javascript: function send_sso(ajax_div, loading_div, site_url) { replace_this_div = ajax_div; replace_loading_div = loading_div; var entityID = document.getElementById("entityID").value; if (uni_name == "Bournemouth University"){ document.getElementById('entityID').value = "https://idp.bournemouth.ac.uk/shibboleth"; ...MORE INSTITUTIONS GO HERE... } else { alert("Sorry, the institution '" +uni_name+ "' was not recognised or does not have access to this service."); } } But this does not seem to be working - any ideas? Not sure how to describe this. I've been tasked with the responsibility of creating a web form. That's not the problem and I can do that. The trick is, each field needs to be incased in it's own box that flies in from the left. So, the first box that flies in from the left would be email address, when you click enter, it flies off to the right and the next box flies in from the left asking for the persons name. Is it possible to do this and where might I go to learn more about doing this type of coding. Hey guys, have a bit of an issue/question... Not sure what I am doing wrong...i do not know javascript at all lol I have a URL stucture which needs to be changed according to the input fields https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA-P4038P0122&adminflag=Y This part stays the same at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId= after the "=" sign, I want it to input text from a input box "J-JOE123", so if I put J-DOE123 in the first input box and run the search, I want it to pull up https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId= J-DOE123 after the "J-DOE123", the next part "&vgroupName1=Dealer-" remains the same at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123 &vgroupName1=Dealer- the next input box would have a drop down with 2 selections (jcode and lcode) so depending on which one is chosen, that is how it would populate the URL https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer- jcode next, i would need for it to put a "-" after the chosen jcode or lcode in the URL, which will also be there at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode - the next input box would have a drop down with 2 selections (USA or CAN) so depending on which one is chosen, that is how it would populate the URL https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode- USA next, i would need for it to put a "-" after the chosen jcode or lcode in the URL, which will also be there at all times https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA - next, i will have a drop down box containing several hundred codes such as "P0122" and many more. for this, I would need for the display value to be "P0122" but when the URL gets populated, it would have to be "P4038P0122" https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA- P4038P0122 The reason why the entire code must change is because P0122 would be P4038P0122, but if it is P0165, it would be N1534P0165, so each code would have its own first part and second part, but in the drop down box, i want it to only display the 2nd part P0122/P0165/etc.. because that is what I go by, but the system only reads full codes. I do have a spreadsheet with the entire list of FULL codes and can do an extract from each cell in order to get the SHORT code. and finally, the URL would have to end with "&adminflag=Y" and will remain the same at all times. https://sls.example.com/Spc/viewUserProfile.do?source=search&UserId=J-DOE123&vgroupName1=Dealer-jcode-USA-P4038P0122 &adminflag=Y So, all together I would have 4 input fields in the form. UserID, jcode/lcode, USA/CAN, and Code. Please help who ever can. If you need more info, please let me know and I shall try my best to explain further. Thanks in advance guys Hi, I have a registration form with the following input field: textbox -name textbox -surname textbox -phone listbox - country listbox - state Am populating my country & state listbox from my database, state depends on the country. However when i select my country&state the page refreshes & all my other values i.e name, surname, phone & others disappears i have to retype all again, any suggestion? thanks Using .htaccess i have a password protected folder online containing 7 files with one single user/pass combination. User is not allowed to see that 7 files are available. User enters 1 of 7 "Access Keys" in a simple HTML Form text input which is then processed (script?) User is then redirected automatically to the related file (for download) e.g. Access Key #1 redirects user to Protected File #1 Access Key #4 redirects user to Protected File #4 etc. What's the best way to implement this? Perl/CGI? PHP? Javascript? |
|||||||