forked from website/openpower.foundation
change the form submission system to be uniform for the entire website
Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>jamesk-patch-1
parent
9003ba9f5a
commit
488759506b
@ -0,0 +1,97 @@
|
||||
jQuery(document).ready(function($) {
|
||||
"use strict";
|
||||
$(formname).submit(function() {
|
||||
var f = $(this).find('.form-group'),
|
||||
ferror = false,
|
||||
emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;
|
||||
f.children('input').each(function() {
|
||||
var i = $(this);
|
||||
var rule = i.attr('data-rule');
|
||||
if (rule !== undefined) {
|
||||
var ierror = false;
|
||||
var pos = rule.indexOf(':', 0);
|
||||
if (pos >= 0) {
|
||||
var exp = rule.substr(pos + 1, rule.length);
|
||||
rule = rule.substr(0, pos);
|
||||
} else {
|
||||
rule = rule.substr(pos + 1, rule.length);
|
||||
}
|
||||
switch (rule) {
|
||||
case 'required':
|
||||
if (i.val() === '') {
|
||||
ferror = ierror = true;
|
||||
}
|
||||
break;
|
||||
case 'minlen':
|
||||
if (i.val().length < parseInt(exp)) {
|
||||
ferror = ierror = true;
|
||||
}
|
||||
break;
|
||||
case 'email':
|
||||
if (!emailExp.test(i.val())) {
|
||||
ferror = ierror = true;
|
||||
}
|
||||
break;
|
||||
case 'checked':
|
||||
if (!i.attr('checked')) {
|
||||
ferror = ierror = true;
|
||||
}
|
||||
break;
|
||||
case 'regexp':
|
||||
exp = new RegExp(exp);
|
||||
if (!exp.test(i.val())) {
|
||||
ferror = ierror = true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
|
||||
}
|
||||
});
|
||||
f.children('textarea').each(function() {
|
||||
var i = $(this);
|
||||
var rule = i.attr('data-rule');
|
||||
if (rule !== undefined) {
|
||||
var ierror = false;
|
||||
var pos = rule.indexOf(':', 0);
|
||||
if (pos >= 0) {
|
||||
var exp = rule.substr(pos + 1, rule.length);
|
||||
rule = rule.substr(0, pos);
|
||||
} else {
|
||||
rule = rule.substr(pos + 1, rule.length);
|
||||
}
|
||||
switch (rule) {
|
||||
case 'required':
|
||||
if (i.val() === '') {
|
||||
ferror = ierror = true;
|
||||
}
|
||||
break;
|
||||
case 'minlen':
|
||||
if (i.val().length < parseInt(exp)) {
|
||||
ferror = ierror = true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
|
||||
}
|
||||
});
|
||||
if (ferror) {
|
||||
return false;
|
||||
} else {
|
||||
var str = $(this).serialize();
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
data: str,
|
||||
url: submiturl,
|
||||
complete: function() {
|
||||
$("#sendmessage").addClass("show");
|
||||
$("#errormessage").removeClass("show");
|
||||
$('.contactForm').find("input, textarea").val("");
|
||||
if(goal) {
|
||||
_paq.push(['trackGoal', goal]);
|
||||
}
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -1,13 +1,19 @@
|
||||
{{ partial "header.html" . }}
|
||||
|
||||
{{ partial "navbar.html" . }}
|
||||
|
||||
<main id="main">
|
||||
|
||||
{{ partial "contactform.html" . }}
|
||||
|
||||
<main id="main" class="main governance">
|
||||
<div class="container">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-lg-12 text-center"><h1 class="h2 section-header my-3 my-md-5 pb-2">{{ .Title }}</h1></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<div class="col-lg-6 text-center">
|
||||
{{ partial "contactform.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
@ -1,45 +1,57 @@
|
||||
<script>
|
||||
var contacturl = "{{ .Site.Params.forms.contact.URI }}";
|
||||
var formname = "form.contactForm";
|
||||
var submiturl = "{{ .Site.Params.forms.contact.URI }}";
|
||||
{{ if .Site.Params.forms.contact.goal }}
|
||||
var goal = "{{ .Site.Params.forms.contact.goal }}";
|
||||
{{ end }}
|
||||
</script>
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<div class="row wow fadeInUp">
|
||||
<div class="col-lg-6 offset-lg-2 col-md-12">
|
||||
<div class="form">
|
||||
<div id="sendmessage">Your message has been sent. Thank you!</div>
|
||||
<div id="errormessage">Error</div>
|
||||
<form role="form" name="contactForm" class="contactForm" id="contactForm" action="" method="post">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-12">
|
||||
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 characters" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email address" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control" name="telephone" id="telephone" placeholder="Your Telephone" data-rule="minlen:8" data-msg="Please enter a telephone number" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 characters" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<input type="hidden" name="url" value="{{ $.Page.Permalink | absURL }}" />
|
||||
<button class="btn btn-outline-primary mb-4 mt-4" type="submit" title="Send Message">Send Message</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="container"><div class="row wow fadeInUp">
|
||||
<div class="col-lg-12 col-md-12"><div class="form">
|
||||
<div id="sendmessage">Your message has been sent. Thank you!</div>
|
||||
<div id="errormessage">Error</div>
|
||||
<form role="form" name="contactForm" class="contactForm" id="contactForm" action="" method="post">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-12">
|
||||
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 characters" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-12">
|
||||
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email address" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-12">
|
||||
<select name="contact" id="contact">
|
||||
{{ range .Param "contacts" }}
|
||||
{{ . }}
|
||||
<option value="{{ .queue }}">{{ .name }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-12">
|
||||
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 characters" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-12">
|
||||
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-12 text-center">
|
||||
<input type="hidden" name="url" value="{{ $.Page.Permalink | absURL }}" />
|
||||
<button class="btn btn-outline-primary mb-4 mt-4" type="submit" title="Send Message">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div></div>
|
||||
</div></div>
|
||||
</section>
|
||||
|
||||
@ -1,70 +1,76 @@
|
||||
{{ $hubdata := index $.Site.Data.hub }}
|
||||
<script>
|
||||
var huburl = "{{ .Site.Params.forms.hub.URI }}";
|
||||
var formname = "form.hubRequestForm";
|
||||
var submiturl = "{{ .Site.Params.forms.hub.URI }}";
|
||||
{{ if .Site.Params.forms.hub.goal }}
|
||||
var goal = "{{ .Site.Params.forms.hub.goal }}";
|
||||
{{ end }}
|
||||
</script>
|
||||
<section id="hub">
|
||||
<div class="container">
|
||||
<div class="row wow fadeInUp">
|
||||
<div class="col-lg-8 offset-lg-2 col-md-12 mt-5 mb-5">
|
||||
<div class="form">
|
||||
<div id="sendmessage" style="display:none">Your request has been sent. Thank you!</div>
|
||||
<div id="errormessage" style="display:none">Error</div>
|
||||
<form role="form" name="hubRequestForm" class="hubRequestForm" id="hubRequestForm" action="" method="post">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 characters" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email address" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control" name="companyname" id="companyname" placeholder="Your Company Name" data-rule="minlen:4" data-msg="Please enter your Company Name" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control" name="companyurl" id="companyurl" placeholder="Your Company URL" data-rule="minlen:8" data-msg="Please enter your Company URL" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control" name="projectname" id="projectname" placeholder="Project Name" data-rule="minlen:4" data-msg="Please enter the project name" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control" name="projecturl" id="projecturl" placeholder="Project URL" data-rule="minlen:8" data-msg="Please enter the project URL" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>What OpenPOWER resources do you require?</h3>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-6">
|
||||
{{ range $hubdata.accesstype }}
|
||||
<input type="checkbox" class="mr-2" id="{{ .name }}" name="{{ .name }}" value="{{ .name }}">{{ .name }}<br>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
{{ range $hubdata.additions }}
|
||||
<input type="checkbox" class="mr-2" id="{{ .name }}" name="{{ .name }}" value="{{ .name }}">{{ .name }}<br>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write a short explanation about getting access. (Why, How, Whatfor, how long)" placeholder="Please write a short explanation about getting access. (Why, How, Whatfor, how long)"></textarea>
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button class="btn btn-outline-primary" type="submit" title="Send Message">Request your resource</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="container"> <div class="row wow fadeInUp">
|
||||
<div class="col-lg-8 offset-lg-2 col-md-12 mt-5 mb-5"><div class="form">
|
||||
<div id="sendmessage" style="display:none">Your request has been sent. Thank you!</div>
|
||||
<div id="errormessage" style="display:none">Error</div>
|
||||
<form role="form" name="hubRequestForm" class="hubRequestForm" id="hubRequestForm" action="" method="post">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 characters" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email address" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control" name="companyname" id="companyname" placeholder="Your Company/Project Name" data-rule="minlen:4" data-msg="Please enter your Company Name" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control" name="companyurl" id="companyurl" placeholder="Your Company/Project URL" data-rule="minlen:8" data-msg="Please enter your Company URL" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control" name="projectname" id="projectname" placeholder="Project/Product Name" data-rule="minlen:4" data-msg="Please enter the project name" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control" name="projecturl" id="projecturl" placeholder="Project/Product SCM URL" data-rule="minlen:8" data-msg="Please enter the project URL" />
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div><h3>What OpenPOWER resources do you require?</h3></div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-lg-6">
|
||||
{{ range $hubdata.accesstype }}
|
||||
<input type="checkbox" class="mr-2" id="access" name="access" value="{{ .name }}" onChange="updateTypeOfAccess()">{{ .name }}<br>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
{{ range $hubdata.additions }}
|
||||
<input type="checkbox" class="mr-2" id="access" name="access" value="{{ .name }}" onChange="updateTypeOfAccess()">{{ .name }}<br>
|
||||
{{ end }}
|
||||
</div>
|
||||
<input type="hidden" id="typeofaccess" class="typeofaccess" value="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write a short explanation about getting access. (Why, How, Whatfor, how long)" placeholder="Please write a short explanation about getting access. (Why, How, Whatfor, how long)"></textarea>
|
||||
<div class="validation"></div>
|
||||
</div>
|
||||
<div class="text-center"><button class="btn btn-outline-primary" type="submit" title="Send Message">Request your resource</button></div>
|
||||
</form>
|
||||
</div></div>
|
||||
</div></div>
|
||||
</section>
|
||||
<script>
|
||||
function updateTypeOfAccess() {
|
||||
var typeofaccess = [];
|
||||
$('input[id="access"]:checked').each(function() {
|
||||
typeofaccess.push(this.value);
|
||||
});
|
||||
document.getElementById("typeofaccess").value = typeofaccess;
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue