Jump to content

Submitting Form & Innerhtml


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...