We Keep Coding

How to check if at least one input is completed?

I have this sample:
link
CODE HTML:
<form class="add-patient">
<fieldset style="display: block;">
<label for="new_exam">New exam</label>
<input type="text" name="new_exam" id="new_exam" value="">
</fieldset>
<fieldset style="display: block;">
<label for="x_ray">X ray</label>
<input type="text" name="x_ray" id="x_ray" value="">
</fieldset>
<input type="button" class="btn btn-submit" onclick="sendForm();" value="Create report">
</form>
CODE JS:
function sendForm() {
var status_form = false;
$(".add-patient input").each(function(){
if($(this).val() == ""){
status_form = true;
}
});
console.log(status_form);
var createdBy = jQuery('#created_by').val();
if( status_form )
{
alert('Fill at least one field');
}else{
alert("now it's ok");
}
}
I want to do a check ... if an input is complete when displaying the message "it; s ok" ... otherwise displaying another message
probably means the code clearly what they want to do.
You can help me with a solution please?
Thanks in advance!

Use .filter to get the length of the input elements having value as ''
Try this:
function sendForm() {
var elem = $(".add-patient input[type='text']");
var count = elem.filter(function() {
return !$(this).val();
}).length;
if (count == elem.length) {
alert('Fill at least one field');
} else {
alert("now it's ok");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="add-patient">
<fieldset style="display: block;">
<label for="new_exam">New exam</label>
<input type="text" name="new_exam" id="new_exam" value="">
</fieldset>
<fieldset style="display: block;">
<label for="x_ray">X ray</label>
<input type="text" name="x_ray" id="x_ray" value="">
</fieldset>
<input type="button" class="btn btn-submit" onclick="sendForm();" value="Create report">
</form>

show/hide div if input is 0 or default

I´m working in a payment gateway where the user Name the Price for my digital books. An input box (to text the price) and a "Pay now" button are displayed. BUT:
If the price is less than 0.50 the payment button disapear and the download button appear
If the user introduce a "," instead a "." a box is displayed (please, enter a valid number)
Here is the form with the input box:
<form id="hikashop_paypal_form" name="hikashop_paypal_form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="X" />
<input type="hidden" name="item_name_1" value="X" />
<input id="amount_1" name="amount_1" class="amount_1"/></form>
Pay Now button (it should be hiden if 1 is true)
<div id="PayNow" class="PayNow">
<input id="PayNow_button" type="submit" class="btn btn-primary" value="Pay now" name="" />
</div>
Download Now Button (it should be shown if 1 is true)
<div id="downloadNow" class="downloadNow">
Download now
</div>
Info box (It should be shown if 2 is true)
<div id="info" class="info">
Enter a valid number
</div>
And the question is: How can I do it?
I supose the solution passes by using javascript, but I don´t know how exactly... Thanks for you time...

I don´t know how, but it works for me:
Try it here: IBIZA! Book Download
<form id="pplaunch" action="https://www.paypal.com/cgi-bin/webscr" method="POST">
<input type="hidden" name="cmd" value="_xclick">
<input id="issueid" name="issueid" type="hidden" value="ARCHIVE NAME">
<input type="hidden" id="currency" name="currency" value="EUR">
<input type="hidden" name="business" value="YOUR PAYPAL ID" />
<input type="hidden" value="0" name="test_ipn"></input>
<input type="hidden" name="item_name" value="PRODUC NAME">
<input type="hidden" value="1" name="no_shipping"></input>
<input type="hidden" value="0" name="no_note"></input>
<input type="hidden" value="utf-8" name="charset"></input>
<input type="hidden" value="Super" name="first_name"></input>
<input type="hidden" value="http://www.YOURWEBSITE.com/return" name="return"></input>
<input type="hidden" value="http://www.OURWEBSITE.com/cancel" name="cancel_return"></input>
<div class="nameprice" style="float:left;margin-right:15px;>
<span style="font-size:small;">Name your price: </span><input id="amount" name="amount" size="6" maxlength="5" type="text"> <span style="font-size:small;color:#ccc;">From 0.00€</span>
</div>
<div id="pricerror"></div>
<div class="buttonspace">
<button id="buybutton" class="buybutton" type="button">Checkout</button>
<div id="descargaGratisMensaje"></div>
<div style="display: block;" class="pay">
</div>
</div>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
function newPopup(url, width, height){
popupWindow = window.open(url,'_blank','height='+height+',width='+width+',left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');
return false;
}
function displaybutton(displayclass){
if(displayclass == 'pay'){
$('.pay').css('display','block');
$('#pplaunch').attr('action', 'https://www.paypal.com/cgi-binwebscr');
$('#buybutton').html('Pagar');
}else{
$('.pay').css('display','none');
$('#pplaunch').attr('action', 'http://www.example.com/archive/'+$('#issueid').val());
$('#buybutton').html('Descargar');
$('#descargaGratisMensaje').html('Un Me Gusta podría ser un buen intercambio');
}
}
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n) && (n.search(/0x/i)<0);
}
function price(n){
// return null if n is not a price, or n rounded to 2 dec. places
if(!isNumber(n)){
// maybe the user entered a comma as a decimal separator
n = n.replace(/,/g,'.');
if(!isNumber(n)){
return null;
}
}
// now we know it is a number, round it up to 2 dec. places
return Math.round(parseFloat(n)*100)/100;
}
function pricecheck(){
var data = $.trim($('#amount').val());
var myprice = price(data);
if(myprice == null){
if(data == ''){
$('#pricerror').html('');
}else{
$('#pricerror').html('Please enter a price.');
}
displaybutton('pay');
return false;
}
if(myprice == 0){
$('#pricerror').html('');
displaybutton('nopay');
}else if(myprice < 0.5){
$('#pricerror').html('The minimum price is '+currencysymbol+'0.50.
Please enter either zero, or at least '+currencysymbol+'0.50.');
displaybutton('pay');
}else{
$('#pricerror').html('');
displaybutton('pay');
}
jQuery('.content').hide();
}
var currencysymbol = '$';
$.getScript('//www.geoplugin.ne/javascript.gp?ref=panelsyndicate.com', function() {
if(geoplugin_continentCode() != 'EU'){return;}
$('#currency').val('EUR');
currencysymbol = '€';
$('.currencysymbol').html(currencysymbol);
});
$(document).ready(function(){
var dialog = $('#modal').dialog({
title: 'IBIZA!'
, autoOpen: false
, closeText: ''
, modal: true
, resizable: false
, width: 500
});
$('#buybutton').click(function() {
$('#pplaunch').submit();
});
$('#pplaunch').submit(function() {
var myprice = price($.trim($('#amount').val()));
if((myprice != 0) && ((myprice == null) || (myprice < 0.5))){
$('#pricerror').html('Please enter your price.');
$('#amount').focus();
return false;
}
});
$('.modaltrigger').click(function() {
var issueid = $(this).attr('href').substr(1);
$('#issueid').val(issueid); // Comic ID
$('#include_a_message_to').html(issues[issueid].include_a_message_to); // Destinee of the message
dialog.dialog('option', 'title', issues[issueid].title); // Title of the comic
$('#issuelangs').html(issues[issueid].langs); // Languages in which the comic is available
dialog.dialog('option', 'position', { my: "center", at: "center", of: window });
dialog.dialog('open');
// prevent the default action, e.g., following a link
pricecheck();
return false;
});
$('#amount').bind('input propertychange', function() {
pricecheck();
});
$('.custommsg').hide();
$('.msgtrigger').click(function() {
var cmsg = $('.custommsg');
if(cmsg.is(':visible')){
cmsg.hide();
$('.sendmsg').show();
}else{
$('.sendmsg').hide();
cmsg.show();
$('.msgtxt').focus();
}
return false;
});
$('.msgtxt').keyup(function(){
if($(this).val().length > maxlength){
$(this).val($(this).val().substr(0, maxlength));
}
var remaining = maxlength - $(this).val().length;
$('#msgtxtnumcharsleft').text(remaining);
});
var maxlength = 200;
var remaining = maxlength - $('.msgtxt').val().length;
$('#msgtxtnumcharsleft').text(remaining);
});
</script>

JQUERY form validation not working properly

Basically, when i type in either textarea or textbox the span should show until the criteria is made.
Only when all three are validated should the submit button "save" show().
however all that is happening is the first two textbox spans are showing when i start writing in them (however not from the focus) but do not disappear when the criteria is met
<div id="add">
<div id="close"></div>
<form action="" method="POST">
<div id="name">
Name:<span>Please Enter Full Name</span>
<br/>
<input type="text" name="name" id="textbox">
</div>
<div id="company">
Company<span>Please Enter Company Name</span>
<br/>
<input type="text" name="company" id="textbox1">
</div>
<div id="review">
Review<span>Please Enter Review</span>
<br/>
<textarea name="comment"></textarea>
</div>
<div id="save">
<input type="submit" name="submit">
</div>
</form>
</div>
//...START OF ADDBOX
$('span').hide();
$('#save').hide();
$nameText = $('#name');
$companyText = $('#company');
$commentText = $('#comment');
function nameValid() {
if ($nameText.val().length < 5) {
$('#name span').show();
} else {
$('#name span').hide();
}
}
function companyValid() {
if ($companyText.val().length < 3) {
$('#company span').show();
} else {
$('#company span').hide();
}
}
function commentValid() {
if ($commentText.val().length < 1) {
$('#review span').show();
} else {
$('#review span').hide();
}
}
$nameText.focus(nameValid).keyup(nameValid).keyup(save);
$companyText.focus(companyValid).keyup(companyValid).keyup(save);
$commentText.focus(commentValid).keyup(commentValid).keyup(save);
function save() {
if ($commentText.val().length > 0 && $companyText.val().length > 2 && $nameText.val().length > 4) {
$('#save').show();
} else {
$('#save').hide();
}
}
http://jsfiddle.net/opfczh69/ js-fiddle here

You are referencing your textboxes using the names not their ids so it doesnt match anything.
You need to reference them as #textbox, #textbox1, #comment and give the comment box an id:
$('span').hide();
$('#save').hide();
$nameText = $('#textbox');
$companyText = $('#textbox1');
$commentText = $('#comment');
function nameValid() {
if ($nameText.val().length < 5) {
$('#name span').show();
} else {
$('#name span').hide();
}
}
function companyValid() {
if ($companyText.val().length < 3) {
$('#company span').show();
} else {
$('#company span').hide();
}
}
function commentValid() {
if ($commentText.val().length < 1) {
$('#review span').show();
} else {
$('#review span').hide();
}
}
$nameText.focus(nameValid).keyup(nameValid).keyup(save);
$companyText.focus(companyValid).keyup(companyValid).keyup(save);
$commentText.focus(commentValid).keyup(commentValid).keyup(save);
function save() {
if ($commentText.val().length > 0 && $companyText.val().length > 2 && $nameText.val().length > 4) {
$('#save').show();
} else {
$('#save').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="add">
<div id="close"></div>
<form action="" method="POST">
<div id="name">
Name:<span>Please Enter Full Name</span>
<br/>
<input type="text" name="name" id="textbox">
</div>
<div id="company">
Company<span>Please Enter Company Name</span>
<br/>
<input type="text" name="company" id="textbox1">
</div>
<div id="review">
Review<span>Please Enter Review</span>
<br/>
<textarea name="comment" id="comment"></textarea>
</div>
<div id="save">
<input type="submit" name="submit">
</div>
</form>
</div>
Updated Fiddle

Javascript/Php Chat - Enter isn't work in one textbox

So I made a chat with textboxs. If I press ENTER the chat send the message. It's fine, but in "Warning" thing this isn't work. When I'm pressing Enter, it isn't work. Can someone help me?
//This is for normal users:
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
<br>
//This is for moderators:
<form name="moderating" method="post" action="">
<hr align="center">
<br>
<p><b>Write in color:</b></p>
<script type="text/javascript" src="color_picker/jscolor.js"></script>Select color: <input class="color" name="color_value" type="text" id="color_value" value="FF0F0F">
<input name="colormsg" type="text" id="colormsg" size="25" />
<input name="submitcolormsg" type="submit" id="submitcolormsg" value="Send" />
<br><br>
<p><b>Warning</b></p>
//Is this wrong?! :
<input name="warningmsg" type="text" id="warningmsg" size="63" />
<input name="submitwarningmsg" type="submit" id="submitwarningmsg" value="Warning" />
<br><br>
<p><b>Clear chat log</b></p>
<input name="clear_button" type="submit" id="clear_button" value="Clear" />
<br><br>
<p><b>Turn on/off chat</b></p>
<input type="radio" name="chat_status_group" id="on" value="on" checked><b>On</b> -<input type="radio" name="chat_status_group" id="off" value="off"><b>Off</b> <input name="chat_status_button" type="submit" id="chat_status_button" value="Ok" />
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("***.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
$("#submitcolormsg").click(function(){
var clientcolormsg = $("#colormsg").val();
var color = $("#color_value").val();
$.post("***.php", {
text: clientcolormsg,
color: color
});
$("#colormsg").attr("value", "");
return false;
});
//And here is the wrong?! :
$("#submitwarningmsg").click(function(){
var post_warningmsg = $("#warningmsg").val();
$.post("***.php", {text: post_warningmsg});
$("#warningmsg").attr("value", "");
return false;
});
$("#clear_button").click(function(){
$.post("clear.php");
return false;
});
$("#chat_status_button").click(function(){
var statusmsg = "on";
if(document.getElementById('on').checked) {
statusmsg = "on";
} else {
statusmsg = "off";
}
$.post("chat_status.php", {
text: statusmsg
});
return false;
});
.
.
.
});
</script>
</body>
</html>
I think the problem is here:
$("#submitwarningmsg").click(function(){
var post_warningmsg = $("#warningmsg").val();
$.post("***.php", {text: post_warningmsg});
$("#warningmsg").attr("value", "");
return false;
});
why
$("#warningmsg").attr("value", "");
isn't work?

It doesn't work because you are only checking for a click, not submit. Try changing the last code to:
$("#submitwarningmsg").submit(function(e){
e.preventDefault();
var post_warningmsg = $("#warningmsg").val();
$.post("***.php", {text: post_warningmsg});
$("#warningmsg").val("");
return false;
});
Besides, you are forgetting to open your form in the last 'form':
<form>

How to revert change made by DOM?

So I made a simple javascript form validator which creates a box with the error message using DOM. But I can't figure out a way how to reset all these changes when i reset the form using
<button type="reset">
I would like to know how it's done please.
Thanks.
The Code
<html>
<head>
<script type="text/javascript">
function validate(){
var fname = document.getElementById("fname");
var surname = document.getElementById("surname");
if(fname.value === "" || fname.value === null){
document.getElementById("sbody").style.display = "block";
document.getElementById("fname").style.display = "block";
return false;
}
//Verify Last Name
if(surname.value === "" || surname.value === null){
document.getElementById("sbody").style.display = "block";
document.getElementById("surname").style.display = "block";
return false;
}
}//End Validate Function
</script>
<style type="text/css">
#sbody{
width: 100px;
height: 100px;
background-color: #f3f3f3;
display:none;
}
.vis{
display: none;
font-size: 12px;
}
</style>
</head>
<body>
<section id="sbody">
<span id="fner" class="vis">First Name is missing.</span>
<span id="lner" class="vis">Surame is missing.</span>
</section>
<form id="registerForm" method="POST" action="register.php" onsubmit="return validate()">
<label for="fname" class="labelStyle">First Name: </label>
<input id="fname" name="fname" type="text" value="">
<label for="surname" class="labelStyle">Surname: </label>
<input id="surname" name="surname" type="text" value="">
<button type="submit">Sign Up</button>
<button type="reset">Reset</button>
</form>
</body>
</html>

The browser cannot magically figure out what has to be done to reset the custom changes.
However you can listen to the reset event of the form using element.addEventListener.
DEMO
HTML
<form id="test">
<div id="errors-ct">The form has errors</div>
<button type="reset">Reset</button>
</form>
JS
//wait for the DOM to be ready
document.addEventListener('DOMContentLoaded', function () {
//store a reference to the errors container div
var errorsCt = document.getElementById('errors-ct');
//listen to the reset event of the form
document.getElementById('test').addEventListener('reset', function (e) {
var form = e.target; //this is how you could access the form
//hide the errors container
errorsCt.style.display = 'none';
});
});

If you want to reset the form, as if user hadn't made any selections or added any input, then just set all form element values to their default value, or empty.
jsFiddle
<div>
<form action="/echo/html" method="get">
<input type="text" placeholder="username" />
<br/>
<input type="password" placeholder="password" />
<br/>
<input type="checkbox" value="test" data-default="checked" checked="checked"/>
<br/>
<button type="reset" value="reset" onclick="resetForm()">reset</button>
<br/>
</form>
<div id="err">Some error message</div>
</div>
window.resetForm = function () {
var fields = $('input'),
uname, pass, check;
uname = $(fields.get(0));
pass = $(fields.get(1));
check = $(fields.get(2));
$("#err").text("");
uname.val('');
pass.val('');
if (check.attr("data-default") == "checked") {
check.attr("checked", "checked");
} else {
check.removeAttr("checked");
}
}