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>

Input fields value not changing in click function

In my previous code I have used two separate input fields % and $ value. % value code:
<td>
<input name="propertytaxpc" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax; ?>" onChange="javascript:propertyTaxPcChanged(true)" />
%
</td>
$ value code:
<td>
$
<input name="propertytaxamt" type="text" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)" />
</td>
In my new code I have input fields changed the two fields to one field. % and $ values both load single input fields loan. I have set % and $ icon on click. Now input fields default % icon also %. When the user changes icon % to $ the value also needs to change.
<div class="col-md-3 padding-rht">
<input name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />
</div>
<div class="col-md-1 padding-lft">
<img src="Content/Images/percent.png" onclick="changeColor(event,this.src)" style="cursor:pointer"/>
</div>
function changeColor(event, _src) {
var fname = _src;
var ImageName = fname.substring(fname.lastIndexOf('/') + 1);
//alert(ImageName);
if (ImageName == "percent.png") {
$(event.target).attr("src", "Content/Images/RedDoller.png");
}
else {
$(event.target).attr("src", "Content/Images/percent.png");
}
}
Can any one take look? I have tried many methods, but they're not working? Thanks in advance.

Your question is not very clear, but if I understand correctly I think what you're trying to achieve is for the percent and amount fields to switch visibility according to the $/% image, right?
If so, what you need to do is toggle the two input fields' visibilty, along with changing the image source. Try the code below:
HTML/PHP:
<div class="col-md-3 padding-rht">
<input id="pct" name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />
<input id="amt" name="propertytaxamt" class="txt" type="text" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)" />
</div>
<div class="col-md-1 padding-lft">
<img id="change" src="Content/Images/percent.png" onclick="changeColor(event,this.src)" style="cursor:pointer"/>
</div>
Javascript:
$(document).ready(function() {
$("#amt").hide();
$("#change").click(function() {
changeColor(this);
});
});
function changeColor(elem) {
var $elem = $(elem);
var ImageName = $elem.attr("src");
ImageName = ImageName.substring(ImageName.lastIndexOf('/') + 1);
if (ImageName == "percent.png") {
$elem.attr("src", "Content/Images/RedDoller.png");
} else {
$elem.attr("src", "Content/Images/percent.png");
}
$("#pct, #amt").toggle();
}
An example JS fiddle demonstrating the technique is here: https://jsfiddle.net/ds8txa1j/

This way it works to me. No jquery or extra lib used. There some alert just to check it works...
<div class="col-md-3 padding-rht">
<input name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="aaa" onChange="javascript:propertyTaxPcChanged(true)" />
<input name="propertytaxamt" class="txt" type="hidden" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)" />
</div>
<div class="col-md-1 padding-lft">
<img src="Content/Images/percent.png" onclick="javascript:changeColor1(this);" style="cursor:pointer"/>
</div>
<script type="text/javascript">
function changeColor1(elem) {
var fname = elem.src;
var ImageName = fname.substring(fname.lastIndexOf('/') + 1);
alert(ImageName);
if (ImageName == "percent.png") {
elem.src = "Content/Images/RedDoller.png";
}
else {
elem.src = "Content/Images/percent.png";
}
alert(elem.src);
}
</script>

jquery .show() by php variable

I'm trying to trigger jquery .show() events triggered by php variables.
Here's my .php (which draws from a form submission on a separate page):
$last_pic_displayed = trim($_POST["last_pic_displayed"]);
if ( strlen($last_pic_displayed) <= 0 )
{ $last_pic_displayed = trim($_GET["last_pic_displayed"]); }
and here's my .show() code:
<script>
var lpic = "<?php echo $last_pic_displayed; ?>";
lpic = parseInt(lpic);
if (lpic == 0) {
$("#1").show();
}
</script>
I use variations on this script for multiple divs with the intention that the correct $last_pic_displayed; value will trigger the correct div to show, but so far none have.
Here's an example of the form that's posting data to my php:
<form id="buttons" action="process_form.php" method="post">
<label for="child_name"><img src="images/enter_name_text.png" alt="Enter Your Name" id="name_text"></label>
<input type="text" id="child_name" name="child_name" />
<section>
<input checked="checked" id="radio1" name="last_pic_displayed" type="radio" value="0" />
<label for="radio1"><img src="images/3_letter_text.png" alt="3 Letter Words" class="level_text">
</label>
</section>
<section>
<input checked="checked" id="radio2" name="last_pic_displayed" type="radio" value="6" />
<label for="radio1"><img src="images/4_letter_text.png" alt="4 Letter Words" class="level_text">
</label>
</section>
<section>
<input checked="checked" id="radio3" name="last_pic_displayed" type="radio" value="13" />
<label for="radio1"><img src="images/5_letter_text.png" alt="5 Letter Words" class="level_text">
</label>
</section>
<section id="submit_button">
<input type="image" name="submit" src="images/submit.png" />
</section>
</form>
Here is an example of the section of code that I'm trying to get to show when the submitted form data matches a certain value along with my script in relation:
<div class="word" id="1" data-value="1">
<img src="images/Bat.png" class="letter_text">
<form id="f1" action="results.php" method="post">
<input type="hidden" name="child_name" value="<?php $child_name; ?>" />
<input type="hidden" name="running_score" value="<?php $running_score; ?>" />
<input type="hidden" name="last_pic_displayed" value="1" />
<input type="hidden" name="correct_spelling" value="BAT" />
<input type="hidden" name="last_pic_flag" value="NO" />
<input type="hidden" name="level" value="3_letter" />
<input type="text" name="submitted_spelling" />
<input type="image" class="submit" src="images/submit.png" />
</form>
</div>
<script>
var lpic = "<?php echo $last_pic_displayed; ?>";
lpic = parseInt(lpic);
if (lpic == 0) {
$("#1").show();
}
alert(lpic);
</script>
I'm pretty new at all this, so I definitely appreciate your help.
EDIT: Updated with syntax corrections; problem currently persists.
EDIT2: Updated with form example.
EDIT3: Updated with parseInt() and example of the div I'm trying to show.

You need to parseInt() the "lpic" variable Like that way :
var lpic = "<?php echo $last_pic_displayed; ?>";
lpic = parseInt(lpic);
if (lpic == 0) {
$("#1").show();
}

use it:-
var lpic = "<?php echo $last_pic_displayed; ?>";
lpic = parseInt(lpic);
if (lpic == 0) {
$("#1").show();
}

use this
<script>
var lpic = "<?php echo $last_pic_displayed; ?>"; // this must in ""
if (lpic == '0') { // must be == instead =
$("#1").show();
}
</script>

multiple image crop using jcrop

i'm trying to crop multiple images using jcrop plugin. this plugin is working for single image crop but i have no idea how to crop multiple images individually from loop. my php file is as follows
<?php
$id=$_GET['id'];
$query_image=mysql_query("SELECT * FROM tbl_images WHERE `id`='$id'");
$j=0;
while($rowq=mysql_fetch_assoc($query_image))
{
$image_source = $rowq['image'];
?>
<div>
<img src="../image_files/<?php echo $image_source;?>" width="550px" id="cropbox_<?php echo $j;?>" />
<form action="crop_image.php?id=<?php echo $id;?>" method="post" onsubmit="return checkCoords()">
<input type="text" id="x" name="x" value="" />
<input type="text" id="y" name="y" value=""/>
<input type="text" id="w" name="w" value=""/>
<input type="text" id="h" name="h" value=""/>
<input type="submit" value="crop">
<input type="reset" value="cancel">
</form>
</div>
<?php
$j++;
}
$count = $j;
?>
and jcrop functions are as follows
<script type="text/javascript">
var i;
var count = "<?php echo $count;?>";
$(function(){
for(i=0; i<count;i++)
{
$('#cropbox_'+i).Jcrop({
aspectRatio: 0,
onSelect: updateCoords
});
}
});
function updateCoords(c)
{
var x = $('#x').val(c.x);
var y = $('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords(k)
{
if (parseInt($('#w_'+k).val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>
but the function updateCoords(c) not returning co-ordinate values. if you have any suggestions on this code then please help me. thank you in advance.

for image form
<form action="crop_image.php?id=<?php echo $id;?>" method="post" onsubmit="return checkCoords('<?php echo $j;?>')">
<input type="text" id="x_<?php echo $j;?>" name="x" value="" />
<input type="text" id="y_<?php echo $j;?>" name="y" value=""/>
<input type="text" id="w_<?php echo $j;?>" name="w" value=""/>
<input type="text" id="h_<?php echo $j;?>" name="h" value=""/>
<input type="submit" value="crop">
<input type="reset" value="cancel">
</form>
for updateCoords(c) function
function updateCoords(c)
{
for(i=0; i<count;i++)
{
var x = $('#x_'+i).val(c.x);
var y = $('#y_'+i).val(c.y);
$('#w_'+i).val(c.w);
$('#h_'+i).val(c.h);
}
};
function checkCoords(k)
{
if (parseInt($('#w_'+k).val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
hi sujan try this

JQuery ignoring form element

I have this JQuery:
$(document).ready(function() {
$("#generate").click(function() {
var texts = [];
alert();
$("form label").each(function() {
var oLabel = $(this);
var oInput = oLabel.next();
texts.push(oLabel.text() + " " + oInput.val());
});
texts[0] += texts[1];
texts[2] += texts[3];
for(i=3;i<texts.length;i++)
texts[i-1] = texts[i];
texts[texts.length-1] = null;
$("#cont").html(texts.join("<br />"));
});
});
What it do is it reads form elements then types them as regular text (there is a purpose for this).
And this is how my form looks like ...
<div id="cont" style="float:right; width:75%; height:auto">
<form onSubmit="return generate();">
<label class="itemLabel" for="name">Name : </label>
<input name="name" type="text" class="itemInput" value="<? echo $queryB[1]; ?>" readonly="readonly" />
<label># Some Text</label><br />
<label for="priPhone" class="itemLabel">Customer Telephone Number : </label>Phone#
<input name="priPhone" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[2]; ?>" />
<label for="secPhone"> // Mobile#</label>
<input name="secPhone" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[3]; ?>" /><br />
<label class="itemLabel" for="email">Customer Email Address : </label>
<input name="email" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[4]; ?>" /><br />
<label>***************</label><br />
<label>Best Regards,</label><br />
<input name="another_field" type="text" /><br />
<label>last thing</label><br />
<button type="button" id="generate">Generate</button>
</form>
</div>
now, when I click the button "Generate", everything goes well except that it ignores "another_field" and doesn't get its value
Anyone got an idea to solve this? (Note: This piece of code will be running on around 25 forms so I need to have it working.)
UPDATE:
Sample output:
Name : username # Some Text
Customer Telephone Number : 90237590 // 3298579
Customer Email Address : email#host.com
***************
Best Regards,
last_field
last thing
Workaround
Since I'm having all the forms have the same ending, I've been able to get to this code:
texts[0] += " " + texts[1];
texts[1] = texts[2] + " " + texts[3];
for(i=4;i<texts.length;i++)
texts[i-2] = texts[i];
texts[texts.length-2] = texts[texts.length-3];
texts[texts.length-3] = $("#agent").val() ;
texts[texts.length-1] = null;
It solved the problem, but I'm looking for a better way to accomplish this.

Try this javascript:
$(document).ready(function() {
$("#generate").click(function() {
var texts = [];
$("form").children().each(function() {
var el = $(this);
if (el.prop('tagName') == "LABEL") texts.push(el.text());
if (el.prop('tagName') == "INPUT") texts.push(el.val());
if (el.prop('tagName') == "BR") texts.push("<br />");
});
$("#cont").html(texts.join(""));
});
});
Working example here:
http://jsfiddle.net/Q5AD4/6/

Your <br/> tag is the next tag after the label before "another_field". You should probably make your next call something like:
var oInput = oLabel.next('input');