Develop Reference

if checkbox is unchecked during form submission then it will become red

I have a register form and there I have two checkboxes. If it is unchecked and the client clicks on register button then it will become red.
Following is my checkbox codes:-
$('#age_confirmation').change(function(){
var c = this.checked ? '' : 'red';
$('#age_confirmation').css('color', c);
});
$('#terms_of_service').change(function(){
var c = this.checked ? '' : 'red';
$('#terms_of_service').css('color', c);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">
<div style="display:none"></div>
<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> Age Confirmation
<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service
<input type="submit" class="btn btn-tiffany" value="register" />
</form>
Can anyone tell me where I'm wrong. Any help will be appreciated.

You need to wrap sibling text of input with label tag and on change of input change color of relevant label. Setting the color of a checkbox input does not affect the color of the text next to it.
$('#age_confirmation').change(function(){
var c = this.checked ? '' : 'red';
$('#age_confirmation').next().css('color', c);
})
$('#terms_of_service').change(function(){
var c = this.checked ? '' : 'red';
$('#terms_of_service').next().css('color', c);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">
<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/>
<label for="age_confirmation">Age Confirmation</label>
<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>
<label for="terms_of_service">Terms of Service</label>
<input type="submit" class="btn btn-tiffany" value="register" />
</form>
Also you can simplify your code
$('#register :checkbox').change(function(){
$(this).next().css('color', this.checked ? '' : 'red');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">
<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/>
<label for="age_confirmation">Age Confirmation</label>
<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>
<label for="terms_of_service">Terms of Service</label>
<input type="submit" class="btn btn-tiffany" value="register" />
</form>

You're listening the change event on each checkbox.
Reading your question, I think that you want to handle the form's submit event, and then provide some feedback to the user, something like...
EDIT: you will need to wrap the checkbox text in a <label> as well to see the color changing, as #Juan Mendes stated in his answer
<input id="age_confirmation" ...><label for="age_confirmation">Age</label>
<script>
const age = $('#age_confirmation');
const terms = $('#terms_of_service');
$('#register').submit(function() {
age.next().css('color', age.checked ? '' : 'red');
terms.next().css('color', terms.checked ? '' : 'red');
return age.checked && terms.checked;
})
</script>

function check(){
if(document.getElementById("age_confirmation").checked ==false){
$("#lbl_age_confirmation").css("color","red");
}else{
$("#lbl_age_confirmation").css("color","black");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off"><div >
<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/> <lable id="lbl_age_confirmation">Age Confirmation</lable>
<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/> Terms of Service
<input onclick="check()" type="submit" class="btn btn-tiffany" value="register" />
</form>

in your code, following changes has been made,
Added Span and ID in you checkbox text for text coloring.
Added novalidate attribute in form submission, as it was preventing the jQuery operation.
$('#age_confirmation').change(function() {
var c = this.checked ? '' : 'red';
$('#age_confirmation_span').css('color', c);
});
$('#terms_of_service').change(function() {
var c = this.checked ? '' : 'red';
$('#terms_of_service_span').css('color', c);
});
$("#register").submit(function() {
var returnStatus = true;
if ($('#age_confirmation').is(":checked") == true) {
$('#age_confirmation_span').css('color', '');
} else {
$('#age_confirmation_span').css('color', 'red');
returnStatus = false;
}
if ($('#terms_of_service').is(":checked") == true) {
$('#terms_of_service_span').css('color', '');
} else {
$('#terms_of_service_span').css('color', 'red');
returnStatus = false;
}
return returnStatus;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off" novalidate>
<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10" /><span id="age_confirmation_span"> Age Confirmation</span>
<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11" /><span id="terms_of_service_span"> Terms of Service</span>
<input type="submit" class="btn btn-tiffany" value="register" />
</form>

Another approach is to use CSS selectors and a little of JS.
First of all, you'll need to wrap your text in order to affect the color, as was told by others users here...
<form action="" method="post" accept-charset="utf-8" class="form-signin form-register" role="form" id="register" autocomplete="off">
<input type="checkbox" id="age_confirmation" name="age_confirmation" required tabindex="10"/>
<label for="age_confirmation">Age Confirmation</label>
<input type="checkbox" id="terms_of_service" name="terms_of_service" required tabindex="11"/>
<label for="terms_of_service">Terms of Service</label>
<input type="submit" class="btn btn-tiffany" value="register" />
</form>
Then you can select all the label next to an invalid input using pure CSS:
:invalid + label {
color: red;
}
But this will select the labels before you press the submit button.
So, we'll use javascript to append a class to identify a submitting state...
$('input[type=submit]').click(function() {
$('#register').addClass('submitting');
});
And then we can match this using CSS...
.submitting :invalid + label {
color: red;
}
You'll find a working example here: https://jsfiddle.net/yL7je0ap/
Advantages of this solution
Keeps a clean separation between CSS and JS
Uses the built-in HTML5 validation feature
Doesn't need to listen every change

You can do it with JavaScript, like this:
<script type="text/javascript">
function validateForm(form){
if (form.agreement.checked==false){
alert("Please agree to our Terms and Conditons."); //Here you can do some styling
//document.getElementById('terms_of_service').classList.add('redColor')
return false;
}else{
//document.getElementById('terms_of_service').classList.add('whiteColor')
}
}
</script>

Add multiple fields to form

I would like to add a function that generates multiple fields to my form.
This is how my form looks like:
<form action="form_sent.php" method="post">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
In my case I want 3 new fields (name, phone, email) when clicking on "Add more fields".
How can I do this?
https://jsfiddle.net/374cxt5s/

Try this: https://jsfiddle.net/Twisty/q8zj00s0/1/
HTML
<form action="form_sent.php" method="post">
<ul id="fieldList">
<li>
<input name="name[]" type="text" placeholder="Name" />
</li>
<li>
<input name="phone[]" type="text" placeholder="Phone" />
</li>
<li>
<input name="email[]" type="text" placeholder="E-Mail">
</li>
</ul>
<button id="addMore">Add more fields</button>
<br>
<br>
<input type="submit">
</form>
CSS
ul {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
JQuery
$(function() {
$("#addMore").click(function(e) {
e.preventDefault();
$("#fieldList").append("<li> </li>");
$("#fieldList").append("<li><input type='text' name='name[]' placeholder='Name' /></li>");
$("#fieldList").append("<li><input type='text' name='phone[]' placeholder='Phone' /></li>");
$("#fieldList").append("<li><input type='text' name='email[]' placeholder='E-Mail' /></li>");
});
});
This allows you to store the results in array when you submit the form. Since you could have 5 names, phones, and emails, an array is the best way to address that. Then in PHP, you would have $_POST['name'][0] as the first one.

I'm assuming you probably want to create a dynamic form that allows you to add multiple contacts, etc.
CodePen Example
http://codepen.io/anon/pen/yeVRgw
The Basic HTML Setup
So that you can loop through things, and for sake of your own sanity, you'll probably want to segment out each chunk within the form. We'll also set up a hidden input to track how many partitions of name,phone,email have been created. We'll default at 1
<form action="form_sent.php" method="POST">
<input type="hidden" name="contacts" id="contacts" value="1">
<div class="form-contacts-container">
<div class="form-contact" id="form-contact-1">
<input type="text" name="name-1" id="name-1" placeholder="Name">
<input type="text" name="email-1" id="email-1" placeholder="E-mail">
<input type="text" name="phone-1" id="phone-1" placeholder="Phone">
</div>
<!-- We'll be adding additional inputs here -->
</div>
<div class="form-contacts-add">
<input type="button" value="Add More Fields" id="add-fields">
</div>
<div class="form-contacts-submit">
<input type="submit" name="submit" id="submit" value="Submit">
</div>
</form>
The JavaScript
This assumes you are using jQuery, so ensure that this is in your <head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Now we need to do a few things - firstly, attach an event listener to our button and secondly, add a new <div class="form-contact"> with included fields to our form. We'll also need to ensure that we're counting up to make sure each section has a unique name/id, and we'll increase the hidden input value to count how many contacts have been added in total.
<script type="text/javascript">
var total = 1; // Our default for how many contacts we have
$( document ).on( 'click', '#add-fields', function() {
var addBlockId = total = total + 1;
var addBlock = document.createElement('div');
$(addBlock).addClass('form-contact');
$(addBlock).attr('id','form-contact-' + addBlockId);
var inputName = document.createElement('input');
$(inputName).attr('type','text');
$(inputName).attr('name','name-' + addBlockId);
$(inputName).attr('id','name-' + addBlockId);
$(inputName).attr('placeholder','Name');
$(inputName).appendTo($(addBlock));
var inputEmail = document.createElement('input');
$(inputEmail).attr('type','text');
$(inputEmail).attr('name','email-' + addBlockId);
$(inputEmail).attr('id','email-' + addBlockId);
$(inputEmail).attr('placeholder','E-mail');
$(inputEmail).appendTo($(addBlock));
var inputPhone = document.createElement('input');
$(inputPhone).attr('type','text');
$(inputPhone).attr('name','phone-' + addBlockId);
$(inputPhone).attr('id','phone-' + addBlockId);
$(inputPhone).attr('placeholder','Phone');
$(inputPhone).appendTo($(addBlock));
$(addBlock).appendTo($('.form-contacts-container'));
$('#contacts').val(total);
});
</script>
Processing your Form
The last piece of the puzzle is to process your form properly. Not goign to give you all the answers here, but the basic logic would be to grab the $_POST['contacts'] value we've been updated and run a loop through to grab all of your inputs and associated values. For instance in PHP:
$total = $_POST['contacts'];
$contacts = array();
for( $i = 1; $i < $total; $i++ ) {
$this_contact = $array(
'Name' => $_POST['name-' . $i],
'Email' => $_POST['email-' . $i],
'Phone' => $_POST['phone-' . $i]
);
array_push($contacts, $this_contact);
}
var_dump( $contacts );

try something like this :
(function() {
var button=document.getElementById("add-user");
button.addEventListener('click', function(event) {
event.preventDefault();
var cln = document.getElementsByClassName("user")[0].cloneNode(true);
document.getElementById("users").insertBefore(cln,this);
return false;
});
})();
<form id="users" action="form_sent.php" method="post">
<div class="user">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button id='add-user'>Add more fields</button><br><br>
<input type="submit">
</form>
https://jsfiddle.net/9955n4fo/

It might not be a bad idea to wrap your input fields in a div just so when you append the other inputs they appear consecutively. Try something like this in your html
<form action="form_sent.php" method="post">
<div id="fields">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
and then your javascript can be completed as so
$(function() {
$('button').click(function() { addFields(); });
});
function addFields() {
var html = "<input name='name' type='text' placeholder='Name'><br>
<input name='phone' type='text' placeholder='Phone'><br>
<input name='email' type='text' placeholder='E-Mail'><br><br>";
$('#fields').append(html);
}

You need to implement jQuery to change the HTMLs DOM.
So, you add this in your <head></head> tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
You need to modify your HTML like this:
<form action="form_sent.php" method="post">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
<button extra="0">Add more fields</button><br><br>
<input type="submit">
</form>
Then you need to use this jQuery code:
<script>
$("button").on("click",function(){
var extra = $(this).attr("extra") + 1;
$("form").append("<input type='text' placeholder='Other Field' name='field' />");
$(this).attr("extra",extra);
}
</script>
This is the end!! :)

Try This :
Jquery append() function seems to sort out your answer
HTML Code should be as follow :
<form action="form_sent.php" method="post">
<div class = 'xyz'>
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
you JS should be as follow :
$(button).click(function(event){
$('.xyz').append("<input type ='text' class ='name' placeholder = 'Enter name'/><br/>");
$('.xyz').append("<input type='text' class='phone' placeholder='Enter phone'/><br/>");
$('.xyz').append("<input type='mail' class='phone' placeholder='Enter e-mail'/><br/>");
event.preventDefault();
});

This is how I would solve it.
HTML:
<form action="form_sent.php" method="post">
<div id="inputHolder">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button id="addMoreFields">Add more fields</button><br><br>
<input type="submit">
</form>
JS:
$( document ).ready(function() {
$("#addMoreFields").click(function(event) {
event.preventDefault();
$("#inputHolder").append('<input name="name" type="text" placeholder="Name"><br>');
$("#inputHolder").append('<input name="phone" type="text" placeholder="Phone"><br>');
$("#inputHolder").append('<input name="email" type="text" placeholder="E-Mail"><br><br>');
});
});
https://jsfiddle.net/r71odb7t/

First you want to clone the elements you want to be adding. Do that when the page loads. Then when the button is clicked, clone the copy and add a copy to the page. And, you could either add type="button" to the button or use e.preventDefault() so your form does not get submitted when the button is clicked.
$(function() {
var inputs = $('form > button').prev().prev().prevUntil().clone().add('<br><br>');
$('form > button').on('click', function(e) {
e.preventDefault();
$(this).before(inputs.clone());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="form_sent.php" method="post">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
<button>Add more fields</button><br><br>
<input type="submit">
</form>

html and javascript form not working

THis is the code :
<script>
function searchFor(searchEngine,searchQuery){
if (searchEngine="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location=x
}
if (searchEngine="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location=x
}
}
</script>
<form>
<input type="radio" name="searchLoc" value="google"> Google <input type="radio" name="searchLoc" value="yahoo"> Yahoo
<br>
<input type="text" name="searchContent">
<input type="submit" onclick="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search"
</form>
Why is it not working?
Once i click the submit button, nothing happened.
Pls help. Thx.

You should write
<script>
function searchFor(searchEngine,searchQuery){
if (searchEngine=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location=x
}
if (searchEngine=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location=x
}
}
</script>
'==' instead of '=' in comparison
Change submit button also,
<input type="submit" onclick="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search" />

Certain error
a) it should be window.location.href
b) close the submit button tag
c) use '==' equal to for comparision
<script>
function searchFor(searchEngine,searchQuery){
for (var i = 0; i < searchEngine.length; i++) {
if (searchEngine[i].type === 'radio' && searchEngine[i].checked) {
value = searchEngine[i].value;
}
}
if (value=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location.href=x
}
if (value=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location.href=x
}
}
</script>
<form>
<input type="radio" name="searchLoc" value="google"> Google <input type="radio" name="searchLoc" value="yahoo"> Yahoo
<br><input type="text" name="searchContent">
<input type="submit" onclick="searchFor(this.form.searchLoc,this.form.searchContent.value);return false;" value="Search" />
</form>

<script type="text/javascript">
function searchFor(searchEngine,searchQuery){
if (searchEngine=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location=x
}
if (searchEngine=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location=x;
}
}
</script>
<form onsubmit="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;">
<input type="radio" name="searchLoc" value="google"> Google <input type="radio" name="searchLoc" value="yahoo"> Yahoo
<br><input type="text" name="searchContent">
<input type="submit" value="Search"/>
</form>
Modify the code as above. searchEngine="google" should be searchEngine == "google" and use onsubmit on tag instead of onclick on submit button.

instead of:
if (searchEngine="google")
try this:
if (searchEngine === "google")

JavaScript simple submit isn't working

Hey guys i am having some problems with javascript, and i was wondering whether you could help me out?
This is my HTML code
<div class="Answer1">
<form name="form">
Enter your answer here :
<input type="text" size="10" name="answer" value="">
<input type="button" value="Check" onclick="result();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form">
Enter your answer here :
<input type="text" size="10" name="answer" value="">
<input type="button" value="Check" onclick="result2();">
</form>
</div>
and this is my javascript
function result() {
var score = (document.form.answer.value);
if(score == 8) {
document.location.href="CorrectAdditionAnswer.html"
} else {
document.location.href="IncorrectAddition.html"
}
}
function result2() {
var score = (document.form.answer.value);
if(score == 8) {
document.location.href="CorrectAdditionAnswer2.html"
} else {
document.location.href="IncorrectAddition.html"
}
}
If I comment out one of these it works perfectly fine but if its not commented it doesnt work :( I dont understand what ive done wrong :(

You have two form with the same value for name attribute and two input with the same value for name.

js
function result()
{
var score =document.getElementsByName('answer1')[0].value;
if(score == 8)
{
document.getElementsByName('form1')[0].action = "http://www.wordpress.com";
document.getElementsByName('form1')[0].submit();
}
else
{
document.getElementsByName('form1')[0].action = "http://www.bing.com";
document.getElementsByName('form2')[0].submit();
}
}
function result2()
{
var score = document.getElementsByName('answer2')[0].value;
if(score == 8)
{
document.getElementsByName('form2')[0].action = "http://www.wordpress.com";
document.getElementsByName('form2')[0].submit();
}
else
{
document.getElementsByName('form2')[0].action = "http://www.bing.com";
document.getElementsByName('form2')[0].submit();
}
}
html
<div>
<form name="form1">
Enter your answer here :
<input type="text" size="10" name="answer1" value="">
<input type="button" value="Check" onclick=" result();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form2">
Enter your answer here :
<input type="text" size="10" name="answer2" value="">
<input type="button" value="Check" onclick=" result2();">
</form>
</div>

To have same id for several elements put javascript in 'gridlock'. Identify your element with an unique id name is usually faster and easier for DOM / Javascript / jQuery to find the node/element faster.
This format is appropriate method if all of elements are in the same page.
<form name="form1">
Enter your answer here :
<input type="text" size="10" id="answer1" name="answer1" value="">
<input type="button" value="Check" onclick="result1();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form2">
Enter your answer here :
<input type="text" size="10" id="answer2" name="answer2" value="">
<input type="button" value="Check" onclick="result2();">
</form>

Using the same input box to search different things

I have an input which searcher's google web and another input to search google images. For each input i have buttons to fadeIn either. Can the search input be the same but search different sites?
Here is a fiddle of what I currently have: http://jsfiddle.net/kwC36/
To search the web I use:
<form action="http://google.com/search" method="get" class="websearch">
and to search images I use:
<form action="http://www.google.com/images?hl=en&q=" method="get" class="imagesearch">
Thanks alot

Yeah, you can switch action on the form:
$('.web').click(function(){
$('form')[0].action = "http://google.com/search";
// do something
$('.websearch').fadeIn();
});
$('.image').click(function(){
$('form')[0].action = "http://www.google.com/images?hl=en&q=";
// do something
$('.websearch').fadeIn();
});

Assign custom data attributes to the button so the form action can be dynamic:
HTML:
<form id="search-form" action="" method="get" class="websearch">
<input id="search-field" type="text" class="searcher" name="" />
</form>
<input type="button" value="Search the web" class="search-btn" data-action="http://google.com/search" data-field-name="" />
<input type="button" value="Search images" class="search-btn" data-action="http://www.google.com/images?hl=en&q=" data-field-name="q" />
JQuery:
$('.search-btn').click(function(e){
e.preventDefault();
$('#search-field').attr('name',$(this).data('field-name'));
$('#search-form').attr('action',$(this).data('action')).submit();
});

<input type="submit" name="srch_images" value="Search Images">
<input type="submit" name="srch_google" value="Search Google">
if( isset($_POST['srch_images'] )
{
something();
}
else if( isset($_POST['srch_google']) )
{
something_else();
}

You can use the same textbox to search for web and image. Also there is no need to have two form tags. Try this
$('.web').click(function(){
$('form').attr('action', "http://google.com/search").submit();
});
$('.image').click(function(){
$('form').attr('action', "http://www.google.com/images?hl=en&q=").submit();
});

HTML:
<form action="http://google.com/search" method="get" class="websearch">
<input type="text" class="searcher">
<input type="submit" value="Web Search" class="web">
<input type="submit" value="Image Search" class="image">
</form>
Javascript:
$('.image').click(function() {
$(this).parent()
.attr('action', 'http://www.google.com/images?hl=en&q=');
});
That should do it.