JavaScript - Need Help With Required Fields
ok I have a PHP form that I want to make Name Email and Phone required using javascript how would I do this here is my .php and html form. I can't get anything to work. Please Help
Code: <?PHP $to = ""; $subject = "Results from your Request Info form"; $headers = "From: Tampabaychartering.net"; $forward = 0; $location = ""; $date = date ("l, F jS, Y"); $time = date ("h:i A"); $msg = "Below is the result of your feedback form. It was submitted on $date at $time.\n\n"; if ($_SERVER['REQUEST_METHOD'] == "POST") { foreach ($_POST as $key => $value) { $msg .= ucfirst ($key) ." : ". $value . "\n"; } } else { foreach ($_GET as $key => $value) { $msg .= ucfirst ($key) ." : ". $value . "\n"; } } mail($to, $subject, $msg, $headers); if ($forward == 1) { header ("Location:$location"); } else { header("Location: http://www.tampabaychartering.com/booking.html"); exit (); } ?> <hr> <form action="booking.php" method="post" name="ContactForm" onsubmit="return ValidateContactForm();"> <p align="left"> <b><font face="Comic Sans MS" size="4" color="#003366">Type of Charter <select size="1" name="type_of_charter"> <option selected>Flats Fishing</option> <option>Inshore Fishing</option> <option>Offshore Fishing</option> </select></font></b></p> <p align="left"> <b><font face="Comic Sans MS" size="4" color="#003366">Have you fished with me before? <select size="1" name="have_fished_with_you_before"> <option>yes</option> <option selected>no</option> </select></font></b></p> <p align="left"><font face="Comic Sans MS" size="4" color="#003366"><b>How many days do you want to fish? </b></font><b> <font face="Comic Sans MS" size="4" color="#003366"> <select size="1" name="days_you_want_to_fish"> <option selected>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </font></b></p> <p align="left"><b><font color="#003366" size="4" face="Comic Sans MS">How Long of a trip do you want <select size="1" name="how_long_do_you_want_to_fish"> <option selected>Full Day Flats $450</option> <option>Full Day Inshore $450</option> <option>Full Day Offshore $650</option> </select></font></b></p> <p align="left"><b><font face="Comic Sans MS" size="4" color="#003366">How many people in your party? For parties of more than 4 please call before booking.<select size="1" name="how_many_people"> <option>1</option> <option selected>2</option> <option>3</option> <option>4</option> </select></font></b></p> <p align="left" style="margin-top:"> <b><font face="Comic Sans MS" size="4" color="#003366">How many adults? <select size="1" name="adults_in_group"> <option selected>1</option> <option>2</option> <option>3</option> <option>4</option> </select> How Many children under 12? <select size="1" name="number_of_children"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> </select></font></b></p> <p align="left"><b><font color="#003366" size="4" face="Comic Sans MS">Choose the date Of your Charter.</font></b></p> <p align="left"><b><font color="#003366" face="Comic Sans MS" size="4"> <select size="1" name="Charter_Date"> <option selected>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> <select size="1" name="day"> <option selected>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select> <select size="1" name="year"> <option selected="">2011</option> <option>2012</option> <option>2013</option> <option>2014</option> </select></font></b></p> <p align="left"><b><font face="Comic Sans MS" size="4" color="#003366">Payment method preffered for deposit?<select size="1" name="Deposit_Payment_Method"> <option>Credit Card</option> <option selected>Money Order</option> </select></font></b></p> <p><strong><font color="#003366" size="4" face="Comic Sans MS">How can I get in touch with you?</font></strong></p> <dl> <dd> <table height="150"> <tr> <td height="27"> <p align="left"><b> <font size="4" face="Comic Sans MS" color="#003366">Name </font></b> <td height="27"> <p align="left"> <font face="Comic Sans MS" size="4"><b><font color="#003366"> <input type="text" size="35" maxlength="256" name="name"> </font></b><font color="#FF0000">required</font><b><font color="#003366"> </font></b></font> </tr> <tr> <td height="27"> <p align="left"><b> <font size="4" face="Comic Sans MS" color="#003366">E-mail </font> </b> <td height="27"> <p align="left"><font face="Comic Sans MS" size="4"><b> <font color="#003366"> <input type="text" size="35" maxlength="256" name="email"> </font></b></font> </tr> <tr> <td height="27"> <p align="left"><b> <font size="4" face="Comic Sans MS" color="#003366">Home </font></b> <td height="27"> <p align="left"> <font face="Comic Sans MS" size="4"><b><font color="#003366"> <input type="text" size="35" maxlength="256" name="phone"> </font></b><font color="#FF0000">required 10 digits </font><font color="#003366"> </font></font></tr> <tr> <td height="27"> <b><font size="4" face="Comic Sans MS" color="#003366">Work</font></b><td height="27"> <font size="4" face="Comic Sans MS" color="#003366"><b> <input type="text" size="35" maxlength="256" name="Work_number"></b></font></tr> <tr> <td height="27"> <p align="left"><b> <font size="4" face="Comic Sans MS" color="#003366">Cell</font></b><td height="27"> <p align="left"> <font face="Comic Sans MS" size="4"><b><font color="#003366"> <input type="text" size="35" maxlength="256" name="User_cell "> </font></b></font> </tr> </table> </dd> </dl> <p align="left"><font face="Comic Sans MS"><b><font size="4" color="#003366">What is the best time to call? </font></b> <font color="#003366"><b><font size="4">From</font></b></font></font><font face="Comic Sans MS" size="4"><b><font color="#003366"><select size="1" name="best_time_to_call"> <option selected>8am</option> <option>9am</option> <option>10am</option> <option>11am</option> <option>12am</option> <option>1pm</option> <option>2pm</option> <option>3pm</option> <option>4pm</option> <option>5pm</option> <option>6pm</option> <option>7pm</option> <option>8pm</option> <option>9pm</option> <option>10pm</option> </select> </font></b></font><font face="Comic Sans MS"> <b> <font size="4" color="#003366">To </font></b></font> <font face="Comic Sans MS" size="4"><b><font color="#003366"><select size="1" name="until"> <option>8am</option> <option>9am</option> <option>10am</option> <option>11am</option> <option>12am</option> <option>1pm</option> <option>2pm</option> <option>3pm</option> <option>4pm</option> <option>5pm</option> <option>6pm</option> <option>7pm</option> <option>8pm</option> <option>9pm</option> <option selected>10pm</option> </select> </font></b></font> <p align="left"><b><font face="Comic Sans MS" size="4" color="#003366">How would you prefer to be contacted? <select size="1" name="Prefer_to_be_contacted_by"> <option selected>Home Phone</option> <option>Work Phone</option> <option>Cell Phone</option> <option>E-mail</option> </select></font></b><p align="left"><b> <font color="#003366" face="Comic Sans MS" size="4">What time zone are you in <select size="1" name="Time_zone"> <option selected>Eastern</option> <option>Central</option> <option>Mountain</option> <option>Pacific</option> <option>Out of USA</option> </select></font></b><p align="left"><font color="#FF0000" size="4"><b>Questions or comments about your trip</b></font></p> <p align="left"><textarea rows="5" name="Comments" cols="67"></textarea></p> <p align="left"> </p> <p align="left"> <b> <font color="#003366" size="4" face="Comic Sans MS">We will contact you as soon as possible to finish Booking your fishing trip.</font></b></p> <p> <input type="submit" value="Submit"> <input type="reset" value="Clear Form"></p> </form> Similar TutorialsHi, I modified the below code to make a conditional statement. The condition is .. if a user selects Childs_Fullname then the BV_Choice-1 and BV_Choice_2 should be required fields. I am still able to save the form without the above conditional required fields. What am I doing wrong?? Can some point me in the right direction. Thanks Vinny ------------------------------------------------------------------ <script language="JavaScript" type="text/javascript"> function BV_Class_show() { var val = document.getElementById("x_Child1_Fullname").value; if (document.getElementById("x_Child1_Fullname").value != "") { // a name was selected if (document.getElementById("x_Child1_BV_Choice_1") value == "")||(document.getElementById("x_Child1_BV_Choice_2") value == "" )) { // either not selected alert ("You must make a selection from x_Child1_BV_Choice_1 and x_Child1_BV_Choice_2"); return false; } } </script> I found this "required fields" script for a form I built, and I'd like to know how to convert it to accept multiple required fields. I'm a total novice at JavaScript so any help is much appreciated. Here's the script: Code: <script language="javascript" type="text/javascript"> <!-- function check(form) { if (form.firstname.value == "") { alert("Please enter your first name!"); form.firstname.focus(); return false ; } return true ; } //--> </script> and the HTML is (super-shortened version)... Code: <form onsubmit="return check(this);"> <table> <tr> <td><label>First Name</label></td> <td><input name="firstname" /></td> </tr> </table> </form> Thanks for any help!!! Hi All, I am very new to HTML programming and Javascripts. What I am trying to accomplish is I have a radio button "RequiredApprovalYesNo". When the selection is "Yes", I need fields "Approver" and "ApproverEmail" to be required upon submit. I also need to make sure that a selection is made with this radio button of either Yes or No. Here is my HTML code for these three fields and was wondering if someone could show me how to code this script or, give me an example of a Radio button selection resulting in additional fields being required or not. Thank you in advance. Code: <td> <input type="radio" name="RequireApprovalYesNo" id="RequireApprovalYesNo" value="Yes">Yes <input type="radio" name="RequireApprovalYesNo" id="RequireApprovalYesNo" value="No">No </tr> <tr> <td><table width="190" border="0" align="right" cellspacing="0"> <tr> </tr> </table></td> <tr> <td colspan="3"><div align="left"><em><strong><b style= 'color: red;'>If Yes, You Must Enter an Approver with a corresponding Email:</b> </strong></em></div></td> </tr> <tr> <td height="25"><div align="right">Approver:</div></td> <td> </td> <td><input name="Approver" type="text" id="Approver" size="40";"></td> </tr> <tr> <td height="25"><div align="right"> <p>Approver's Email: </p> </div></td> <td> </td> <td><input name="ApprovalEmail" type="text" id="ApprovalEmail" size="40"></td> </tr> <tr> I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution? Code: <script language="Javascript" type="text/javascript"> <!-- //Add more fields dynamically. function addField(area,field,limit) { if(!document.getElementById) return; //Prevent older browsers from getting any further. var field_area = document.getElementById(area); var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area. //Find the count of the last element of the list. It will be in the format '<field><number>'. If the // field given in the argument is 'friend_' the last id will be 'friend_4'. var last_item = all_inputs.length - 1; var last = all_inputs[last_item].id; var count = Number(last.split("_")[1]) + 1; //If the maximum number of elements have been reached, exit the function. // If the given limit is lower than 0, infinite number of fields can be created. if(count > limit && limit > 0) return; //Older Method field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>"; } //--> </script> <ol id="steps_area"><li> <textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /> </li> </ol> <input type="button" value="Add" onclick="addField('steps_area','',15);"/> The page loads and existing data is put in their correct fields. When I click 'add more' to add more fields to the form it does so and I am able to add new data. If on adding a new fields and its data I click 'add more' again it clears out the recently added data from the fields. The existing data that was present when the page first loaded is still their but all the new fields added data is cleared. how can I get it so the data stays, like in phpmyadmin when adding new fields. JS Code: function addmore(addwhat) { // count existing boxes to find out next number to use. // ? if (addwhat == 'addresses') { fieldid = 'addressesdiv'; } if (addwhat == 'namesnumbers') { fieldid = 'namesdiv'; } var dv = document.getElementById(fieldid).innerHTML; var lines = dv.match(/<br>/ig).length; if (addwhat == 'addresses') { document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>'; } if (addwhat == 'namesnumbers') { document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>'; document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>'; } } PHP Code: <? if ($_POST['Submit'] == 'Submit') { echo("sent<br>"); for ($c = 1; $c <= (count($_POST)-1)/2; $c++) { echo("name" . $c . " = " . $_POST['name'.$c] ." mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>"); } } $customer_id = "11"; // get existing data. // if not yet sent get data from databases $ok = "no"; if ($_POST['Submit'] != "Submit") { echo("<br>not sent<br>"); $res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'"); $maincount = mysql_num_rows($res); echo("<br>number of clients = ".$maincount."<br>"); for ($c = 1; $c <= $maincount; $c++) { $_POST['name'.$c] = mysql_result($res, $c-1, "client_name"); $_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile"); echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>"); } } else { // display last posted info echo("<br>sent<br>"); $ok = "yes"; // check if info was entrted correctly or not. for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) { if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") { echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>"); $ok = "no"; $maincount ++; } if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") { echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>"); $ok = "no"; $maincount ++; } } } if ($ok == "no") { ?> <form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&phpsession=" . $phpsession); ?>"> <div style="width: 850px;"> <div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br> <? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) { if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") { ?> <textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br> <? } } ?> </div> <div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br> <? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) { if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") { ?> <textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br> <? } } ?> </div> </div> <br style="clear: both;"> <a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a> <input type="hidden" name="customer_id" value="<?=$customer_id;?>"> <input type="submit" name="Submit" value="Submit"> </form> <? } ?> I dont have much experience with javascript. Please provide javascript to create something like the image below: http://www.coolmicroscope.com/java.jpg Hi, I am not sure if this is the right place to ask, Currently i am running a small business with 25+ website. Due to testing purpose. I would like to have my site url to open in like 100 tabs without using much of the cpu usage and crashing down. can a script or bot be created where in you enter the url and it opens in like 100+ tabs hidden or visible without using much of my cpu usage. it doesnt neccesarly need to open in one shot it can open in like a few mints time, but its should stay open. will pay generously for your service. thanks I have two links on my page and I want to show different divs on each click in the same position.. Let me explain it Suppose we have two links Link1 Link2 When I click on link 1 a div appear infront of it whn i click link 2 the first div must hide and the 2nd div should replace the first one How can I do this using javascript plz let me knw the solution if u knw Hi, Im not very good with javascript so I appologize is this is a stupid question. In the code of my gallery software I have this line: <h2 id="item-title">{$theme.item.title|markup|default:" "}</h2> This displays the title of the image. I dont actually want to display the title of the image. However, when I delete this line, the gallery no longer works (in the view photo page, the javascript image loader just says loading). Is there a way to keep this required parameter in, so that my gallery works, but stop it from being displayed on the page? Here is a link to the page (currently ive left the line in) http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=13 I want to create dynamic Select option in form, I want that whenever user clicks on add member button then new row will get added & i have done that by taking help of DOM createElement method & I want that by using same, I want to create select option drop down list.
Currently I have several forms using the input text "field3". I want to know how I can require an HTML input text field to be required WITHOUT having to use the form name in the javascript and without modifying <body>,<form> or <input type="submit">. Also no HTML5 since not all browsers use it (life would be simple if they did since threres a required tag) So here is my form, for example Code: <form name = "test"> <input type="text" name="field1"> <input type="text" name="field2"> <input type="text" name="field3"> <input type="submit"> </form> In otherwords, I can only edit <input type="text" name="field3"> by putting code directly before, in, or after that input field. With this problem, how can I make it required? thank you Hi, I have an "Object Required" error that only appears in IE and refers to a js file that I got elsewhere, so I'm kind of lost as to how to debug it. The page (which works fine in Chrome and FF) is here and the error reported is: Line: 7 Error: Object Required Sometimes it doesn't pop an alert, but mostly it does. thanks in advance for any suggestions. Hi All, I always get "Object Required" error when using IE (all IEs). No error when using FF. Message: Object required Line: 62 Char: 178 Code: 0 URI: I am using WebFXTabPane JS and always get error on line 62 or 63. Below is the excerption for line 62 and 63: }; WebFXTabPane.prototype.getSelectedIndex = function () { return this.selectedIndex;}; WebFXTabPane.prototype.addTabPage = function ( oElement ) { if ( !hasSupport() ) return; if ( oElement.tabPage == this ) return oElement.tabPage; var n = this.pages.length; var tp = this.pages[n] = new WebFXTabPage( oElement, this, n ); tp.tabPane = this; this.tabRow.appendChild( tp.tab ); if ( n == this.selectedIndex ) Thank you in advance for any help. Cheers, Jo Hi gurus, I am developing an application in which I am using a client validation library called "livevalidation". When you attach with the input control it shows a message infront of the text box if you leave it empty. But I want to modify it and want to show a image (cross) infront of the text box and message below text box. Here is the CSS file and html file. ------------------------------------ Code: /********************************* LiveValidation *************************************/ .LV_valid { color:#00CC00; } .LV_invalid { color:#CC0000; } .LV_validation_message { clear: both; text-indent: 166px; height: 22px; line-height: 22px; font-size: 11px; font-weight: bold; } .LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active, .fieldWithErrors input.LV_valid_field, .fieldWithErrors textarea.LV_valid_field { border: 1px solid #00CC00; } .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .fieldWithErrors input.LV_invalid_field, .fieldWithErrors textarea.LV_invalid_field { border: 1px solid #CC0000; } HTML ------ Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="livevalidation.js" type="text/javascript"></script> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="create_account" action=""> Say hello: <input id="sayHello" type="text" /> <script type="text/javascript"> var sayHello = new LiveValidation('sayHello', { validMessage: 'Hey there!', wait: 500 }); sayHello.add(Validate.Presence, { failureMessage: "Don't just ignore me, I wanna be your friend!" }); </script> </form> </body> </html> For livevalidation javascript (.js) i cannot paste here as its quite big and forums is not allowing me paste it so kindly get it from here which I need to modify. here is the link. ---------------- http://livevalidation.com/javascript..._standalone.js In the above file there is a function called "createMessageSpan" I've tried to modify it as I am sure this is the function which needs to be modified but how to do it that i dont know as i am not a java specialist. Please help I would really appreciate. Josh http://jakoba.dk/index.php/joomla-websites Two things I would like some help with: First, the cinema slider on the right does have a litle problem on the top of the slider. First it pops op above the slider div and after the slide finishes it goes away. I want it to slide without the jumping up and down in the top. Second, I would like to make the slider stop on mouseover, so the reader have a chance to click on a picture withou the module keep sliding. Hope someone could help me with this, cause im not that good to javascript. Cheers Jakob I am having trouble with the following: Code: <script language="javascript" > function premium_calculator() { var val = document.getElementById('user_input').value; var state = document.getElementById('user_state').value; alert ( state ); // if (state=1) // alert ("QLD"); // else // if (state=2) // alert ("NSW"); // else // alert ("ACT"); switch (state) { case 1: alert ("QLD"); break: case 2: alert ("NSW"); break; case 3: alert ("ACT"); break; } document.getElementById('val_100_1').innerHTML =0; document.getElementById('val_250_1').innerHTML = 12; document.getElementById('val_500_1').innerHTML = 13; document.getElementById('val_1000_1').innerHTML = 14; } the above code produces nothing, no alert messages and no returned elements. can be seen here http://www.scubaservice.com.au/calculation-test-2.html If I comment out the switch statement entirely and use the if statement; the first alert statement will produce a 1,2 or 3 depending on input but the second alert is always "QLD". There are several calculations for each of the returned values and these will be different depending on the state selected. The basis for the calculations work on their own ie for 1 state. http://www.scubaservice.com.au/calculation-test.html Any help to get this working would be apreciated. Hi, Im not sure if this is in the right place, but anyway, what im trying to achieve is turning an x7 chat application into a paid to chat service, i know it can be done but im just not sure how to code it, what i was wanting to do is have an earnings bar that updates itself when a member types a line of chat and credits that user with the current line pot ie 0.01 per line written on the chat (example) Users current earnings 0.0001c current written line pot 0.0003 Hope this makes sense Can anyone help me please Thanks in advance Baz Dim d set mw=CreateObject("Word.Application") set d=Description.Create d("micclass").value="Link" set a=Browser("Google").page("Google").childobjects(d) for i=0 to a.count-1 mw.WordBasic.filenew s=a(i).getROProperty("innertext") mw.WordBasic.insert s if mw.ActiveDocument.Spellingerrors.count>0 then Reporter.ReportEvent 1,"Spelling","spelling error :"&s end if mw.ActiveDocument.Close(False) next mw.quit set mw=nothing Hello all. I need to use javascript to validate 6 text inputs to make sure data is entered and they are not empty. However, there is a checkbox above this and if the checkbox is checked I need these areas to NOT validate as they become optional at that point. Here is what I have: Code: function validateCheckbox() { if(document.forms["form1"].sales.checked) { if(document.forms["form1"].input1.value.length < 1) { // x return false; } else { return true; } } } The above is if the box is checked to validate the field. I want it to do the opposite. How would you do the above with the If statement referring if the check box is NOT checked? And how could I add more fields to check then just one? I am new to javascript so any help or guidance is appreciated. |