I have this HTML:
<div id="broker_referral_block" style="display: none;">
<label for="">* How did your broker/agent introduce you to the project?</label><br>
<input type="radio" name="referral2" value="Site Visit" class="referral2"> Site Visit
<br>
<input type="radio" name="referral2" value="Conversation through social media" class="referral2"> Conversation through social media
<br>
<input type="radio" name="referral2" value="Referrals" class="referral2"> Referrals
<br>
<input type="radio" name="referral2" value="Phone Calls" class="referral2"> Phone Calls
<br>
<input type="radio" name="referral2" value="Developer" class="referral2"> Developer
<br>
<input type="radio" name="referral2" value="Other" class="referral2"> Other
</div>
I don't know why it's not included when I try to serializeArray var test = jQuery(this).serializeArray(); I don't see anything wrong. I know the display:none; is not an issue because this field:
<div id="broker_referral_block_other_field" style="display: none;">
<input type="text" class="form-control referral2other" name="referral2other" id="referral2other">
</div>
Gets read, just without value (which is what I want). I also don't understand why everything in this block gets read:
<div id="existing_loans_block" style="display: none;">
<label for="">* Loan</label>
<input type="text" class="form-control existing_loans_detail" name="loan" id="loan">
<label for="">* Amount</label>
<input type="text" class="form-control existing_loans_detail" name="loan_amount" id="loan_amount">
<label for="">* Monthly Amoritization</label>
<input type="text" class="form-control existing_loans_detail" name="loan_amort" id="loan_amort">
<label for="">* Term</label>
<input type="text" class="form-control existing_loans_detail" name="loan_term" id="loan_term">
<label for="">* Status</label>
<!-- This bit does not get included too -->
<select name="loan_status" id="loan_status" class="form-control existing_loans_detail">
<option value="" selected disabled hidden>Select loan status...</option>
<option value="Active">Active</option>
<option value="Updated">Updated</option>
</select>
</div>
Except for loan_status. All of them are properly wrapped in a form tag. This is my jquery:
jQuery("#hbcq_form").submit(function(e){
e.preventDefault();
var test = jQuery(this).serializeArray();
...
I did a console.log(test) and that's when I found out that referral2 and loan_status is not being included in the serialization. I also double checked, there is no name conflicts for these.
jQuery serialize hidden (display:none) form elemens does not work. Workaround?
check this out you can find help full answer
Related
I've got a simple form which I'm wanting people to join to be put onto a waiting list for my product - but it's not submitting.
My application is being hosted on localhost:3000 and runs absolutely fine. The page renders and you can fill the inputs in.
But when you click 'submit' it does nothing. I've tried doing a few different 'types' of the button, but no luck.
Here's my code:
<section class="waiting-list-section">
<div class="waiting-container">
<div class="waiting-heading">
<h2>Join our waiting list</h2>
</div>
<div class="waiting-inputs">
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</div>
</div>
</section>
Any tips? :-)
You need a form element wrapped around the input elements and the button.
<form>
<label for="fName">Enter your first name</label>
<input type="text" name="fName" value="">
<label for="lName">Enter your surname</label>
<input type="text" name="lName" value="">
<label for="email">Enter your email</label>
<input type="email" name="email" value="">
<button class="waiting-submit-button glow" type="submit" name="submit">Join</button>
</form>
Second approach would be to add an eventListener on the button and when it is clicked, get the values from the inputs and then do whatever you want to do with that data
So I have already attempted to do this project by myself but the program I'm using as a sandbox seems incredibly picky at how one is to do it. Despite using examples and other aids to help get this done, nothing has worked. I'm having three separate issues that I think I have done correctly but, apparently, had not done correctly. The issues are as followed:
Script & Form Elements
The Regex
The Submit Button
The program will not tell me what's being done wrong either. Might I get some aid?
<section>
<h1>Conference Registration Form</h1>
<p>Required Item (*)</p>
<form action="http://www.example/cg/register" method="post">
<!-- title -->
<div>
<label for="title">Title</label>
<input type="text" name="title" id="titleBox" list="titleList">
<datalist id="titleList">
<option value="Mr."></option>
<option value="Mrs."></option>
<option value="Ms."></option>
<option value="Prof."></option>
<option value="Dr."></option>
<option value="Assist. Prof."></option>
<option value="Assoc. Prof."></option>
</datalist>
</div>
<!-- firstName -->
<label for="firstName">First Name*</label>
<input type="text" name="firstName" id="fnBox" required>
<!-- LastName -->
<label for="lastName">Last Name*</label>
<input type="text" name="lastName" id="lnBox" required>
<!-- address -->
<label for="address">Address*</label>
<textarea name="address" id="addBox"></textarea>
<!-- Company or University -->
<label for="group">Company or University</label>
<input type="text" name="group" id="groupBox">
<!-- E-mail -->
<label for="email">E-mail*</label>
<input type="email" name="email" id="mailBox" required>
<!-- Phone Number -->
<label for="phoneNumber">Phone Number*</label>
<input type="tel" name="phoneNumber" id="phoneNumber" required pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" placeholder="(nnn) nnn-nnnn">
<!-- ACGIP Membership -->
<label for="acgipID">ACGIP Membership Number</label>
<input type="text" name="acgipID" id="idBox" placeholder="acgip-nnnnnn" pattern="^acgip\-\d{6}$">
<!-- Registration Category -->
<label for="regList">Registration Category</label>
<select id="regList" name="">
<option value="member">ACGIP Member ($695)</option>
<option value="nonmember">ACGIP Non-Member ($795)</option>
<option value="student">ACGIP Student ($310)</option>
<option value="poster">ACGIP Poster ($95)</option>
<option value="guest">ACGIP Guest ($35)</option>
</select>
<!-- Button -->
<p><input type="submit" name="continue" value="Continue"></p>
</form>
</section>
The code for the regex is wrong here.
it should be:
<input type="text" name="phoneNumber" id="phoneBox" placeholder="(nnn) nnn-nnnn" pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" required />
NOT
<label for="phoneNumber">Phone Number*</label>
<input type="tel" name="phoneNumber" id="phoneNumber" required pattern="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" placeholder="(nnn) nnn-nnnn">
It gives an error every time. Cheers
Looking for answers for HTML5 ONLY, no JS solutions please!
I'm only just beginning to code so I don't really know what to google to get the answer to this - I've already done a few good hours trying to figure it out in HTML5 only, but what I've found has all involved javascript, or didn't fix my problem. The question is:
Is there a way in HTML5 to reset the validation value once a form has been submitted once, and failed to submit/got rejected because of a missing value on a 'required' attribute? I want to make resubmission possible after someone checks the required box if they left it unchecked before, without refreshing the page.
The form in question is below, sorry for the shitpost aspects;
<html>
<head>
<h1>Register</h1>
<img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>
<body>
<form method="link" action="https://youtu.be/eBRwu63-qfA">
<p>
<h2>Name</h2>
</p>
<label for="first">First:</label>
<input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
<label for "last">Last:</label>
<input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
<p></p>
<!--gender id-->
<p>
<h2>Gender</h2>
</p>
<label for="CM">Cis Man</label>
<input type="radio" id="CM" name="GS1">
<p></p>
<label for="TM">Trans Man</label>
<input type="radio" id="TM" name="GS1">
<p></p>
<label for="CF">Cis Woman</label>
<input type="radio" id="CW" name="GS1">
<p></p>
<label for="TF">Trans Woman</label>
<input type="radio" id="TW" name="GS1">
<p></p>
<label for="NBGF">Nonbinary/Genderfluid</label>
<input type="radio" id="NBGF" name="GS1">
<p></p>
<label for="AG">Agender</label>
<input type="radio" id="AG" name="GS1">
<p></p>
<label for="OTHER">Other</label>
<input type="text" name="OTHER" name="GS1">
<!--Email Password-->
<p>
<h2>Login Details</h2>
</p>
<label for="email">Email:</label>
<input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
<label for="password">Password:</label>
<input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
<!--Bday-->
<p>
<h2>Birthday</h2>
</p>
<label for="bday1">Which Month</label>
<select name="bday1">
<option></option>
<option>Jealousy</option>
<option>Federal Agent</option>
<option>Hell</option>
<option>April</option>
<option>Any Of The Rest</option>
</select>
<label for="bday2">The Day</label>
<select id="bday2">
<option></option>
<option>1</option>
<option>0</option>
<option>Void</option>
</select>
<label for="bday3">The Year Of THE Birth Crime</label>
<select id="bday3">
<option></option>
<option>X</option>
<option>666</option>
<option>Eternal</option>
</select>
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
</form>
</body>
</html>
The SPECIFIC part I'm having trouble with is this bit right here:
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
I'm not sure if there's something inside the rest of the form that's keeping this one part in particular from not working - the others all act as they're supposed to. If one is blank, it pops up with the custom warnings I set up, and after I fill it out, it doesn't cause me any issue anymore. The checkbox is the only one that has the persistent message popping up with the refusal to submit it again. If I check it WITHOUT submitting the form first, everything acts as it was supposed to when I do submit it.
I appreciate your help!
You have to change the oninput to onchange for input tags like this:
<html>
<head>
<h1>Register</h1>
<img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>
<body>
<form method="link" action="https://youtu.be/eBRwu63-qfA">
<p>
<h2>Name</h2>
</p>
<label for="first">First:</label>
<input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
<label for "last">Last:</label>
<input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
<p></p>
<!--gender id-->
<p>
<h2>Gender</h2>
</p>
<label for="CM">Cis Man</label>
<input type="radio" id="CM" name="GS1">
<p></p>
<label for="TM">Trans Man</label>
<input type="radio" id="TM" name="GS1">
<p></p>
<label for="CF">Cis Woman</label>
<input type="radio" id="CW" name="GS1">
<p></p>
<label for="TF">Trans Woman</label>
<input type="radio" id="TW" name="GS1">
<p></p>
<label for="NBGF">Nonbinary/Genderfluid</label>
<input type="radio" id="NBGF" name="GS1">
<p></p>
<label for="AG">Agender</label>
<input type="radio" id="AG" name="GS1">
<p></p>
<label for="OTHER">Other</label>
<input type="text" name="OTHER" name="GS1">
<!--Email Password-->
<p>
<h2>Login Details</h2>
</p>
<label for="email">Email:</label>
<input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
<label for="password">Password:</label>
<input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
<!--Bday-->
<p>
<h2>Birthday</h2>
</p>
<label for="bday1">Which Month</label>
<select name="bday1">
<option></option>
<option>Jealousy</option>
<option>Federal Agent</option>
<option>Hell</option>
<option>April</option>
<option>Any Of The Rest</option>
</select>
<label for="bday2">The Day</label>
<select id="bday2">
<option></option>
<option>1</option>
<option>0</option>
<option>Void</option>
</select>
<label for="bday3">The Year Of THE Birth Crime</label>
<select id="bday3">
<option></option>
<option>X</option>
<option>666</option>
<option>Eternal</option>
</select>
<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')"
onchange="setCustomValidity('')"
updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">
</form>
</body>
</html>
I would like to implement something similar to a google search with radio buttons. Depending on the radio button selected, would change the type of search (search,images,video, etc).
Right now I have:
<div id ="searchtext">
<form method="get" id ="searchbox" action="http://www.google.com/search"/>
<input type="text" name="q" size="30" class="searchtext" maxlength="255" value="" />
<input type="image" value="Search" class="searchbutton" src="images/searchbar/searchbutton.png"/>
<br/>
</div>
<div id="radiosearch">
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.youtube.com/results?q=';"/>Youtube
<span class = "class1">
Change Theme
</span>
</div>
However, clicking on the radio boxes is not changing the form action. Any Ideas?
Try
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.youtube.com/results?q=';"/>Youtube
This is one thing that I really hate within development is forms. Below is my code and what I am trying to do is align the inputs with the labels Name: input. Is there a rule that you use to help remember when coding forms?
CSS:
#newwebsiteForm form{
padding:10px;
margin:10px 0;
width:480px;
position: relative;
}
#newwebsiteForm label{
width:240px;
display:block;
float:right;
}
#newwebsiteForm input{
width:240px;
display:block;
float:left;
}
HTML:
<section id="content">
<h1>Free Quote</h1>
<p>Please fill out the below questionnaire to receive your free web development quote</p>
<form action="" method="post" accept-charset="utf-8">
<select name="requiredOption" id="requiredOption">
<option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option>
<option id="newwebsite" value="newwebsite">New Website</option>
<option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
<option id="other" value="other">Other</option>
</select>
</form>
<div id="newwebsiteSection">
<form action="" id="newwebsiteForm" method="get" accept-charset="utf-8">
<fieldset>
<label>Do You Require Hosting?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Do You Require A Domain?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Do You Have A Logo?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>What is your Domain?</label>
<input type="url" name="domain" value="http://example.com"></input></div>
<label>Type of site Required?<label>
<select name="newwebsiteType" id="newwebsiteType">
<option value="shoppingCart">Shopping Cart</option>
<option value="CMS">Content Management System</option>
<option value="static">Static Website</option>
<option value="otherDevelopment">Other Development</option>
</select>
<label>Do You Require A Design?</label>
<input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input>
<label>Three Favorite colors?</label>
<input name="color1" value=""></input>
<input name="color2" value=""></input>
<input name="color3" value=""></input>
<label>What are your favorite websites?</label>
<input type="text" name="fav1" value=""></input>
<input type="text" name="fav2" value=""></input>
<input type="text" name="fav3" value=""></input>
<label>Comments?</label>
<textarea name="comments" id="comments"></textarea>
<input type="submit" name="submit" value="Send Quote Request">
</form>
</div>
<div id="websiteredevelopmentSection">
<p>Website Redevelopment</p>
</div>
<div id="otherSection">
<p>Other</p>
</div>
</section>
Just because tables are the easier option doesn't make using them right.
Here's a great article about css form design.
http://www.alistapart.com/articles/prettyaccessibleforms
The author suggests storing each label/input element in an ordered list element keeping them grouped.
I've just used this to implement a bunch of forms for various mini sites and it worked a treat!
You can align the label next to the input or above just by changing the ol li label element's display property from display:inline-block to display:block respectively.
Getting the text to align next to a radio button or checkbox can be a bit tricky but is possible by adding and styling a span element.
BEST OF ALL IT'S CROSS BROWSER COMPATIBLE!
Hope that helps.
This is probably related to the question: <div> usage correctly? Can't get the columns to line up: You can also check my comments there for some reference when dealing with semantically-correct forms.
The approach you will need to be in habit of is always structure your markup correctly first before jumping to any CSS (or styling).
A <form> is composed of the following:
The <form> itself.
The <fieldset>: acts a the container of the different sections of your <form>
The <legend>: acts as the heading of the <fieldset>
The <input />: for fields, checkboxes, radio buttons, and submit button
The <button>: an alternative for <input type="submit">, which can wrap something
inside of it.
The <select>: a list of values inside a drop-down menu.
The <label>: from the name itself, the label of the <input />, <button> and <select>
To illustrate, you can check this example:
<form>
<fieldset>
<legend>Form Heading: </legend>
<fieldset>
<legend>Group 1 Heading: </legend>
<label for="input-id">Input Label: </label>
<input id="input-id" />
</fieldset>
<fieldset>
<legend>Group 2 Heading: </legend>
<label for="select-id">Select Label: </label>
<select id="select-id">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</fieldset>
<input type="submit" value="Submit" />
</fieldset>
</form>
With the exception of radio (<input type="radio" />) and checkboxes (<input type="checkbox" />), where the <label> should come after the <input />
You have to use the label element as follows to correctly align them:
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
I wrap each input/label pair in a <div>. This helps a lot with styling.
<div class="form-item">
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name" />
</div>