Skip to content

Added draft to set up AJAX http request #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Dorothysun wants to merge 4 commits into
base: amyzjin
Choose a base branch
from
Open

Added draft to set up AJAX http request #4

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fc31cb5
added the draft for AJAX http post request
Aug 26, 2017
914cf8e
revert changes to registration form on master
Dorothysun Aug 27, 2017
c19d9eb
added Amy's index.html and Dorothy's new registration.html
Dorothysun Aug 27, 2017
3f3aac9
Merge branch 'amyzjin' into dorothy_request
Dorothysun Aug 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 76 additions & 20 deletions registration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

<!DOCTYPE html>
<html lang="en">
<head>
Expand All @@ -6,26 +7,26 @@
</head>
<body>

<div class="container">
<form class="container">

<div class="field">
<label class="label">First Name*</label>
<div class="control">
<input class="input" type="text">
<input class="input" name= "first_name" type="text">
</div>
</div>

<div class="field">
<label class="label">Last Name*</label>
<div class="control">
<input class="input" type="text">
<input class="input" name= "last_name" type="text">
</div>
</div>

<div class="field">
<label class="label">Email*</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-danger" type="text" placeholder="Email input" value="hello@">
<input class="input is-danger" name= "email" type="text" placeholder="Email input">
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
Expand All @@ -39,7 +40,7 @@
<div class="field">
<label class="label">School*</label>
<div class="control">
<input class="input" type="text">
<input class="input" name="school" type="text">
</div>
</div>

Expand All @@ -55,22 +56,22 @@
<div class="field">
<label class="label">Major(s)*</label>
<div class="control">
<input class="input" type="text">
<input class="input" name="major" type="text">
</div>
</div>

<div class="field">
<label class="label">Graduation Year*</label>
<div class="control">
<input class="input" type="text">
<input class="input" name="graduation_year" type="text">
</div>
</div>

<div class="field">
<label class="label">Ethnicity*</label>
<div class="control">
<div class="select">
<select>
<select id="ethnicity">
<option>Select dropdown</option>
<option>White or Euro-American</option>
<option>Black, Afro-Caribbean, or African-American</option>
Expand All @@ -90,7 +91,7 @@
<label class="label">What gender do you identify with?*</label>
<div class="control">
<div class="select">
<select>
<select id="gender_identity">
<option>Select dropdown</option>
<option>Male</option>
<option>Female</option>
Expand All @@ -106,7 +107,7 @@
<label class="label">What is your sexual orientation?</label>
<div class="control">
<div class="select">
<select>
<select id="sexual_orientation">
<option>Select dropdown</option>
<option>Heterosexual</option>
<option>Homosexual</option>
Expand All @@ -122,7 +123,7 @@
<div class="control">
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="Resume*">
<input class="file-input" name="file" type="file" name="Resume*">
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
Expand All @@ -148,14 +149,14 @@
<div class="field">
<label class="label">Any useful links</label>
<div class="control">
<input class="input" type="text" placeholder="Linkedin, Github, Dribbble">
<input class="input" name="links" type="text" placeholder="Linkedin, Github, Dribbble">
</div>
</div>

<div class="field">
<label class="label">Have you attended WHACK before?*</label>
<div class="control">
<label class="checkbox">
<label class="checkbox">
<input type="checkbox"> Yes, as a participant <br/>
<input type="checkbox"> Yes, as a volunteer <br/>
<input type="checkbox"> Yes, as a mentor or corporate representative <br/>
Expand All @@ -168,7 +169,7 @@
<div class="field">
<label class="label">Will WHACK be your first hackathon?</label>
<div class="control">
<label class="checkbox">
<label id="first_hackathon" class="checkbox">
<input type="checkbox"> Yes <br/>
<input type="checkbox"> No
</label>
Expand All @@ -178,21 +179,21 @@
<div class="field">
<label class="label">Do you have any dietary restrictions?*</label>
<div class="control">
<input class="input" type="text">
<input class="input" name="dietary_restrictions" type="text">
</div>
</div>

<div class="field">
<label class="label">Do you require any special accommodations?</label>
<div class="control">
<input class="input" type="text">
<input class="input" name="special_accommodations" type="text">
</div>
</div>

<div class="field">
<label class="label">WHACK aims to be an inclusive and safe space for all participants. Is there anything you’d like us to know to make your WHACK experience more comfortable?</label>
<div class="control">
<textarea class="textarea" placeholder="Text Area"></textarea>
<textarea class="textarea" name="other_notes" placeholder="Text Area"></textarea>
</div>
</div>

Expand All @@ -216,13 +217,68 @@

<div class="field is-grouped">
<div class="control">
<button class="button is-primary">Submit</button>
<button id="submit" class="button is-primary">Submit</button>
</div>
<div class="control">
<button class="button is-link">Save</button>
</div>
</div>
</div>
</form>

<script src="jquery-3.1.0.js"></script>

<script>
$( "#submit" ).submit(function( event ) {

// Stop form from submitting normally
event.preventDefault();

// Get some values from elements on the page:
var $form = $( this ),
first_name = $form.find( "input[name='first_name']" ).val(),
last_name = $form.find( "input[name='last_name']" ).val(),
email = $form.find( "input[name='email']" ).val(),
school = $form.find( "input[name='school']" ).val(),
major = $form.find( "input[name='major']" ).val(),
graduation_year = $form.find( "input[name='graduation_year']" ).val(),
ethnicity = $form.find( "input[name='ethnicity']" ).val(),
gender_identity = $form.find( "input[name='gender_identity']" ).val(),
ethnicity = $("#ethnicity option:selected").text();
gender_identity = $("#gender_identity option:selected").text();
sexual_orientation = $("#sexual_orientation option:selected").text();
links = $form.find( "input[name='links']" ).val(),
first_hackathon = $('#first_hackathon').val();
special_accomodations = $form.find( "input[name='special_accomodations']" ).val(),
other_notes = $form.find( "input[name='other_notes']" ).val();
// NOT SURE IF I HANDLE THE FILE CORRECTLY
$(':file').on('change', function() {
var file = this.files[0];
if (file.size > 1024) {
alert('max upload size is 1k')
}
// Also see .name, .type
});

// Send the data using post
// TODO(daxisun): confirm with Yada about url.
var posting = $.post( url, { 'first_name': first_name,
'last_name': last_name,
'email': email,
'school': school,
'major': major,
'graduation_year':graduation_year,
'ethnicity':ethnicity,
'gender_identity':gender_identity,
'sexual_orientation':sexual_orientation,
'resume': file,
'links':links,
'first_hackathon': first_hackathon == "Yes" ? true : false,
'special_accomodations': special_accomodations,
'other_notes': other_notes
} );

});
</script>

</body>
</html>
</html>