onedear Posted November 27, 2011 Share Posted November 27, 2011 This is my first time using so much Javascript, (and I have no idea what I'm doing) but it's for an assignment. We're supposed to make a website for a fictional restaurant, and part of the requirement is to create a "reservation form", in which times and dates are selected using a drop-down box or radio buttons. Then, the selected time and date appear as text after submitting using innerHTML on the same page. I found some code that helps, but each time I submit, it returns one of the values but not the other! I don't know if the code I'm using is even the best way to approach it, and most of the innerHTML tutorials don't really show what I want it to do. I'll break it up with the Javascript section, and then in the Body section. <script>function changeText(){var userInput = document.getElementById('selDays').value;var userInput = document.getElementById('selTimes').value;document.getElementById('text1').innerHTML = userInput;document.getElementById('text2').innerHTML = userInput;return false; }</script> Second half: <h4>Make a Reservation!</h4><p><label>First Name:<input type="text" id="fname" name="fname"></label><br><label>Phone:<input type="text" id="phone" name="phone"></label><br><label>Email:<input type="text" id="email" name="email"></label><br><p><form name="frmDays" method="get"onsubmit="return changeText()"> <Select name="selDays" id="selDays"> <option>Select a Day</option> <option>Monday</option> <option>Tuesday</option> <option>Wednesday</option> <option>Thursday</option> <option>Friday</option> <option>Saturday</option> </Select> <p><form name="frmTimes" method="get"onsubmit="return changeText()"> <Select name="selTimes" id="selTimes"> <option>Select a Time</option> <option>10 AM</option> <option>11 AM</option> <option>12 PM</option> <option>1 PM</option> <option>2 PM</option> <option>3 PM</option> <option>4 PM</option> <option>5 PM</option> <option>6 PM</option> <option>7 PM</option> <option>8 PM</option> <option>9 PM</option> <option>10 PM</option> </Select> <input type="submit" value="Send" /><p>Your reservation is <b id='text1'>Day</b> at <b id='text2'>Time</b> </p> </form> Again, if there is a better way to do this, I'd be more than happy to hear it. Thanks! Link to comment Share on other sites More sharing options...
justsomeguy Posted November 27, 2011 Share Posted November 27, 2011 In your changeText function, you named both of your variables "userInput". Give each one a different name, you're overwriting the first value with the second and then printing it in both places. Link to comment Share on other sites More sharing options...
Ingolme Posted November 27, 2011 Share Posted November 27, 2011 Well everything seems OK, except for a few validation errors: You have a redundant second form tag which can easily confuse HTML parsers. An action attribute is required for the form element. The name attribute is invalid on a form element. Link to comment Share on other sites More sharing options...
Don E Posted November 27, 2011 Share Posted November 27, 2011 Fox, You said the name attribute is invalid on a form element.... what did you mean by this? Isn't the name attribute part of the form element? Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted November 27, 2011 Share Posted November 27, 2011 No, the name attribute is invalid on the <form> element. Form elements (input, select, textarea) can have it. Link to comment Share on other sites More sharing options...
Don E Posted November 27, 2011 Share Posted November 27, 2011 According to this: http://www.w3schools.com/html5/att_form_name.asp .. you can specify a name for a form? Link to comment Share on other sites More sharing options...
Ingolme Posted November 27, 2011 Share Posted November 27, 2011 Hmm, it does seem to have a name attribute, but there's no real use for it and I don't recommend using it. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 27, 2011 Share Posted November 27, 2011 For XHTML transitional, frameset its deprecated, and should never have been used for Strict doctypes, But! for HTML 4.01, and 5 its still valid, and still can be used, personally I use both 'name' and 'id' attributes with same value, and use the id for referencing the form. Link to comment Share on other sites More sharing options...
onedear Posted November 27, 2011 Author Share Posted November 27, 2011 In your changeText function, you named both of your variables "userInput". Give each one a different name, you're overwriting the first value with the second and then printing it in both places. Okay, I'll try it by naming it "userInput2" Well everything seems OK, except for a few validation errors:You have a redundant second form tag which can easily confuse HTML parsers. An action attribute is required for the form element. The name attribute is invalid on a form element. So do I just remove the "<form name="frmTimes">" tag? Link to comment Share on other sites More sharing options...
Ingolme Posted November 27, 2011 Share Posted November 27, 2011 Yes, remove that tag. It's really confusing. Link to comment Share on other sites More sharing options...
onedear Posted November 27, 2011 Author Share Posted November 27, 2011 Thanks you guys! It worked! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.