First time running but not working from 2nd time - javascript

I am working with a javascript function which works first time but not from the 2nd time.The console shows: Uncaught TypeError: pizza_name is not a function
My html is :
<div class="pizza_name_div">
<input type="text" name="pizza_name" id="pizza_name" placeholder="Enter your pizza name as u like. i.e : my-pizza" value="">
<input type="submit" value="Go" id="pizza_name_submit" onclick="pizza_name()">
</div>
And My js
function pizza_name() {
if( pizza_name != "" ) {
.........
}else{
alert( "please enter a name" );
}
}
It shows alert properly for 1st time.But not form 2nd

Link
js code:
function pizza_name() {
var pizzaName=document.getElementById("pizza_name").value;
if(!pizzaName ) {
alert("no value");
}else{
alert( "please enter a name" );
}
}

Change your code with:
function pizza_name() {
var pizzaName = document.getElementById('pizza_name').value;
if(pizzaName != "") {
//.........
} else {
alert( "please enter a name" );
}
}
It's very important to not assign any value to a possible pizza_name variable inside the function.

You can use jquery for this too
HTML
<div class="pizza_name_div">
<input type="text" name="pizza_name" id="pizza_name" placeholder="Enter your pizza name as u like. i.e : my-pizza" value="">
<input type="submit" value="Go" id="pizza_name_submit" >
</div>
JQUERY
$(document).ready(function(){
$("#pizza_name_submit").on("click", function(){
if( $("#pizza_name").val()) {
alert( $("#pizza_name").val());
}else{
alert("enter value");
}
});
});
demo

Don't re-use names, you're probably overwriting your function to be a string instead.
(that's what I'm assuming happens in the code you didn't show since you're trying to test pizza_name as a string)
function pizza_name() {
if( pizza_name != "" )
You'd be better off naming the function something like getPizzaName. Name the function for what it does, not what it returns.

Related

Unable to validate form elements

I am trynig to learn how to validate form elements using their IDs. I also made a fiddle to check and try manipulating the code but the fiddle is showing error. Here is the fiddle https://jsfiddle.net/obz3jc30/ There is definitely something wrong in the code because of which I am unable to validate. Need help in identifying the issue
HTML
<form name="Form1">
Age :
<input value="" name="Fromage" type="text" id="Fromage">
to
<input value="" name="Toage" type="text" id="Toage">
<button class="check" onclick="function()">Validate</button>
</form>
Script
$('.check').click(function() {
var af=Form1.Fromage.value;
if (af.length == 0 )
{
alert( "Please Enter Age From." );
Form1.Fromage.focus( );
return false;
}
if(h.length>0)
{
if((af.length<2)||(af.length>2))
{
alert( "Age should be 2 digits");
Form1.Fromage.focus( );
return false;
}
else
{
var af3=/[^1-9]/;
if(af.match(af3)!=null)
{
alert( "Please Enter Valid Age");
Form1.Fromage.focus( );
return false;
}
}
}
return true;
}

validation in form not working

I don't know what im doing wrong, i have a form and using this function to check if the input is empty...what Iam trying to do is to highlight the field by adding a class to the text field...but if i add this line
name.addClass("empty");
to the function, the function dont work
function register()
{
if(document.myForma.userid.value == '')
{
name = $("#userid");
document.myForma.userid.focus();
$("#empty").html("This field is required")
name.addClass("empty");
return false;
}
}
Declare your name variable as local, or use a different name for it, - global window.name already exists and is not changeable.
console.log(name);
function register() {
if (document.myForma.userid.value == '') {
var name = $("#userid");
document.myForma.userid.focus();
$("#empty").html("This field is required");
name.addClass("empty");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForma" name="myForma" onsubmit="return register();">
<input id="userid" type="text" />
<div id="empty"></div>
<input type="submit" />
</form>

Error when taking the length of an input

I want to use .length in this script, but when I add .length, the script fails.
The input:
<input type="text" name="myform" class="myform" placeholder="Full Name" value="" maxlength="20" minlength="6" pattern="[a-zA-Z-']+.{6,40}">
Original (working) code :
if ($.trim($("input[name=myform]").val()) === "") {
$("input[name=myform]").addClass("merror");
return false;
}
});
$("input").change(function() {
$(this).removeClass("merror");
}).trigger("change");
After adding .length:
if ($.trim($("input[name=myform]").length === 6)) {
$("input[name=myform]").addClass("merror");
return false;
}
$("input").change(function() {
$(this).removeClass("merror");
}).trigger("change");
You've misplaced a ) or two.
Adding some space to your if statement shows the problem:
if ($.trim(
$("input[name=myform]").length === 6)
) {
You need a closing ). But even then, you're taking the length of $("input[name=myform]") -- which is the list of inputs with the name "myform". It will certainly be 1.
You want to take the length of the value of that input (after trimming), like so:
if ($.trim( $("input[name=myform]").val() ).length === 6)
{

jQuery check value of every input in a given div

I have the following validation script I'm trying to get working:
function validate(id){
// checks only inputs with type "text" inside div id-calc
// e.g #haveprice-calc or #dontknow-calc
var input = $("." + id + "-calc input[type='text']").val();
if (input == ""){
alert("You must fill in all items on the form");
}
}
It is passed an ID (the ID is a div that wraps around these specific elements) and then I would like it to check every input of type text within the div=ID
At present, this code works only for the first input in the HTML. If it's unfilled, the alert appears. Once you fill it, the alert will no longer appear. But it doesn't then check the NEXT text input in the DOM.
Some example HTML
<div class="dontknow-calc">
<label>My materials cost</label><input type="text" name="materialcost" id="materialcost" /><br />
<label>My packing materials cost</label><input type="text" name="packingmaterialcost" id="packingmaterialcost" /><br />
<div class="btn btnCalc" id="dontknow">Calculate</div>
</div>
I expect it needs a foreach loop to run through every text element but I'm not sure how.
JSFiddle
Try this:
function validate(id){
// checks only inputs with type "text" inside div id-calc
// e.g #haveprice-calc or #dontknow-calc
var div = $("." + id + "-calc");
$(div).find("input[type = 'text']").each(function() {
if(this.value == "") {
alert("You must fill in all items on the form");
return false;
}
});
}
You can use .each() for this:
function validate(id)
{
$("." + id + "-calc input[type='text']").each(function()
{
if (this.value == "")
{
alert("You must fill in all items on the form");
return false;
}
});
}
I think what you are trying to do is to give an alert if any of the input fields are empty, in that case use .filter() to find out if any of the inputs are empty if any input is empty then show the alert
$(".btnCalc").click(function() {
var id = this.id;
var valid = validate(id);
console.log(valid)
});
function validate(id) {
// checks only inputs with type "text" inside div id-calc
// e.g #haveprice-calc or #dontknow-calc
var $empties = $("." + id + "-calc input[type='text']").filter(function() {
//may also use .trim() like !this.value.trim();
return !this.value
});
if ($empties.length) {
alert("You must fill in all items on the form");
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dontknow-calc">
<label>My materials cost</label>
<input type="text" name="materialcost" id="materialcost" />
<br />
<label>My packing materials cost</label>
<input type="text" name="packingmaterialcost" id="packingmaterialcost" />
<br />
<div class="btn btnCalc" id="dontknow">Calculate</div>
</div>
<br />
<br />
<div class="haveprice-calc">
<label>My other field</label>
<input type="text" name="materiotherfieldalcost" id="otherfield" />
<br />
<div class="btn btnCalc" id="haveprice">Calculate</div>
</div>
Or you could use the jQuery.Validation plugin (see http://jqueryvalidation.org/category/methods/ for some examples), and then use something like this:
$( "#myform" ).validate({
rules: {
field1: {
required: true
}
field2: {
required: true
}
// etc...
}
});
if you want to use each loop you can write some code like this:
$("." + id + "-calc input[type='text']").each(function(index,val){
// for current item value
console.log(val); // to see what's in the val argument
current_item_value = val.value;
});
I hope it helps

jQuery: passing argument to a function not working

I have problem with passing an argument to my simple function in jQuery:
When function is attached directly to the element everything is OK.
$companyNameInputs.bind('blur keyup',function(){
if ($(this).hasClass('required')) {
if (this.value == ''){
$(this).addClass('inputError');
}else {
$(this).removeClass('inputError');
}
}
});
but when I want to declare this simple check as an different function it doesn't work:
this is my function:
var standardCheck = function($param){
$param.addClass('inputError');
if ($param.hasClass('required')) {
if ($.trim($param).value == ''){
$param.addClass('inputError');
}else {
$param.removeClass('inputError');
}
}
};
and this is how I call it:
$companyNameInputs.bind('blur keyup',function(){
standardCheck($(this));
});
variable declaration:
var $companyNameInputs = $("#companyName")
and the HTML:
<div>
<p>
<input class="text_input" type="text" id="companyName" name="companyName" value="" />
</p>
</div>
please help.
Since param is a jQuery container, you have to call .val() and trim the output of that:
if ($.trim($param.val()) == ''){
or get the corresponding DOM element and its value property.
if ($.trim($param[0].value) == ''){

Categories