I need help! #100daysofcode

I need help! #100daysofcode
0.0 0

#1

I’m not sure if this is the right place to seek help, but I’m loosely participating in the 100 days of code challenge. I’m getting married early next year, and figured building a wedding web site for my fiance and I would be a perfect project to work on. Unfortunately, I keep running into road blocks, and I’m getting to the point where I’m losing hope and am contemplating using a wedding site builder (rsvpify, squrespace, weddingwire, etc). I have overcome just about each obstacle so far, but I cannot figure out how to make the RSVP form functional. How can I get the submit button to actually send info to me? Is there a way I can set up the form so that each guest has a unique code they have to submit before filling out the form? Or, if that’s too complicated, then just one code that all the invited guests have to use? Also, when I size down the window, the menu toggle button doesn’t work. It was working a few days ago, but I can’t figure out what I did wrong to make it stop working.

I haven’t gotten this far in my course, but I’d really like to make this site myself and be fully functional. Here’s my code

Any help is appreciated! Thanks!


#2

I know it’s not clean code – I need to go back in the end it clean it up. The design is plain right now. I have background images for the divs but on codepen it’s just plain colors.


#3

Hi ,
if i am understanding right, all you need to keep the information after click on button submit?
i see you project , you has many thing without the information to fix , but for your question. you need to use Javascript.
can be use jquery , angular (recommended), etc


#4

Well my JS skills are very amateur. I literally only know what I learned here on FCC. I know the various functions, methods, objects, etc, but I don’t really understand how it’s applied in this instance. For example, at the bottom of my code, I have the rsvp form. I don’t really understand how to start setting up the functionality of the form. I’ve tried finding examples online, but all I seem to find is html/css form builds. I can’t seem to find actual functionality examples.


#5

“Obstacles are those frightful things you see when you take your eyes off your goals” - Henry Ford

Don’t give up! You’ll overcome those hurdles, you just have to know where to look for answers. Explaining how data from forms work would take too lengthy a post from me but you want to look at php for that. I would google “how to store data from html forms php”.

You’re going to have to use Javascript for the whole “each guest has their own code” thing. There are many ways to implement that but one would be to use an if statement to test if the person’s inputted code matches with a code in an array. That array would contain all the possible codes. Of course, you’ll also have to use Javascript to disable the submit button while the codes don’t match. If the user’s inputted code matches with any code in the array then you re-enable it. How do you disable a submit button, you probably ask? Google it :wink:

Finally there’s the menu toggle button. You have one media query and all it does is set the body padding and gallery-container’s border-radius to 0. I’m guessing you probably had more in that media query and it got deleted somehow because I don’t see how just those two things would make a menu toggle button work.


#6

The safest way to do this would be to have some back-end set up that keeps this code secret and checks what the user supplies against this stored value. You could store it inside the JavaScript sent to the use, but then anyone could look at the source and see this code.


#7

Thanks @mattsouthward @Alanh168 I’ll look into those options. Appreciate the tips!


#8

Additionally, I would add, that this website looks fairly well put together, and I’m quite impressed. Obstacles will come and go and one day, you’ll think something is impossible. The next you’ll think you’re so silly for ever getting stuck on something like that. It’s a proccess. Things take time. Best of luck


#9

@njanne19 thanks for the feedback! It took me 3-4 times of coding and starting over from scratch. It’s not pretty, but once I get the structure and functionality working perfectly, I’ll go in and make it look better . I appreciate your words of encouragement


#10

Firstly congrats on your future wedding! I believe that you can build this website on your own! :slight_smile: For the front end portion, I suggest looking at a few wedding websites that you really like. I use Pinterest boards to gather my ideas :slight_smile: I am barely starting to learn the back end technology so I can’t help you too much with your questions. But thought I’d give you some motivation! You got this! And also congrats on starting the 100 Days Of Code Challenge. I think you should definitely stick with it as well :slight_smile: I am doing my second round of this challenge.


#11

Yaaaaaay, you are getting married!!! Woooohooooo!!! You have Decent HTML and CSS skills, so Kudos on that. Tip, if there is an ability to format your code for easier readability to avoid hunting ( :slight_smile: ) for the closing tag that would speed things up. I will put text in bold and attach a link at the bottom to help you out, hope this helps. This helps you link stuff.

   https://www.w3schools.com/html/html_form_input_types.asp

form action=""> <–!Notice the action keyword, here its blank yet you do need to put a filename.php there–>
User name:

input type=“text” name=“userid”>


User password:

input type=“password” name=“psw”>
/form>

<div id="rsvp" class="container"> <!-- RSVP form -->
	<form class="form-horizontal" action="SomeFileNameYouChoose.php">
		<fieldset>
		<!-- Form Name -->
		<legend>RSVP</legend>

		<!-- Text input-->
		<div class="form-group">
		  <label class="col-md-4 control-label" for="textinput">Your Name</label>  
		  <div class="col-md-5">
		  <input id="textinput" name="textinput" type="text" placeholder="first and last name..." class="form-control input-md" required="">
		    
		  </div>
		</div>

		<!-- Text input-->
		<div class="form-group">
		  <label class="col-md-4 control-label" for="textinput">Number of guests of in your party:</label>  
		  <div class="col-md-2">
		  <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md" required="">
		    
		  </div>
		</div>

		<!-- Textarea -->
		<div class="form-group">
		  <label class="col-md-4 control-label" for="textarea">Names of all guests in your party:</label>
		  <div class="col-md-4">                     
		    <textarea class="form-control" id="textarea" name="textarea">please separate names with a comma</textarea>
		  </div>
		</div>

		<!-- Multiple Checkboxes -->
		<div class="form-group">
		  <label class="col-md-4 control-label" for="checkboxes">Which events will you attend?</label>
		  <div class="col-md-4">
		  <div class="checkbox">
		    <label for="checkboxes-0">
		      <input type="checkbox" name="checkboxes" id="checkboxes-0" value="1">
		      Event1
		    </label>
			</div>
		  <div class="checkbox">
		    <label for="checkboxes-1">
		      <input type="checkbox" name="checkboxes" id="checkboxes-1" value="2">
		      Wedding Ceremony
		    </label>
			</div>
		  <div class="checkbox">
		    <label for="checkboxes-2">
		      <input type="checkbox" name="checkboxes" id="checkboxes-2" value="3">
		      Wedding Reception
		    </label>
			</div>
		  </div>
		</div>

		<!-- Button -->
		<div class="form-group">
		  <label class="col-md-4 control-label" for="submit"></label>
		  <div class="col-md-4">
		    <button id="submit" name="submit" class="btn btn-primary">Submit</button>
		  </div>
		</div>

		</fieldset>
	</form>
</div>

You likely wonder why I had action=“SomeFileNameYouChoose.php”.

Here is the last part:
Here is the link to original:
https://www.w3schools.com/tags/att_form_method.asp

I am aware in the example below I replaced get with post, because you do want to use post (more secure).

WHY?

Here:
GET requests can be cached
GET requests remain in the browser history
GET requests can be bookmarked
GET requests should never be used when dealing with sensitive data
GET requests have length restrictions
GET requests should be used only to retrieve data

POST requests are never cached
POST requests do not remain in the browser history
POST requests cannot be bookmarked
POST requests have no restrictions on data length

Here is link:

https://www.w3schools.com/tags/ref_httpmethods.asp

form action="./action_page.php" method=“post”>
First name: input type=“text” name=“fname”>

Last name: input type=“text” name=“lname”>

input type=“submit” value=“Submit”>
/form>

More to the point,
add a php file in your project (choose good name so you know it handles the form data).

You will likely wonder how to handle the data once you are on the php side, here:

First example with post:

!DOCTYPE HTML>
html>
body>

form action=“welcome.php” method=“post”>
Name:

E-mail:

input type=“submit”>
/form>

/body>
/html>

here is link:
https://www.w3schools.com/php/php_forms.asp

To display the submitted data you could simply echo all the variables. The “welcome.php” looks like this:

html>
body>

Welcome ?php echo $_POST[“name”]; ?>

Your email address is: ?php echo $_POST[“email”]; ?>

/body>
/html>

https://www.w3schools.com/php/php_forms.asp

notice, the “name” and “email” are
Name: <input type=“text” name=“name”>

E-mail: <input type=“text” name=“email”>

notice the name = (VERY IMPORTANT, whatever name you choose, XYZ, you have to write in $_POST(“XYZ”).

example (I AM BUTCHERING EXAMPLE ABOVE):

form action=“welcome.php” method="post"
Name: input type=“text” name="My_name"

E-mail: input type=“text” name="My_email"

input type=“submit”
/form>

here is the corresponding edit for the php part:

html>
body>

Welcome ?php echo $_POST[“My_name”]; ?>

Your email address is: ?php echo $_POST[“My_email”]; ?> with _ between My and email, do not know where _ went in this silly editor.

/body>
/html>

Plus, learn PHP, cause its the glue between the Client and Server:

Here is the code a snippet you can run by going to link below:

https://www.w3schools.com/php/php_form_validation.asp

<?php // define variables and set to empty values $name = $email = $gender = $comment = $website = ""; if ($_SERVER["REQUEST_METHOD"] == "POST") { $name = test_input($_POST["name"]); $email = test_input($_POST["email"]); $website = test_input($_POST["website"]); $comment = test_input($_POST["comment"]); $gender = test_input($_POST["gender"]); } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?>

Hope this helps!!!
I had to put flawed code examples where I purposely omit the < because otherwise you will see only form fields… instead of the code itself.