juqery: why might i not be able to get input field value?

[unwashed potato!]

i made a quick jquery contact form last night which worked all fine, it simply cancelled the default event, got each input field value, checked not empty, submitted, checked reply, if success then hide form and display thank you message, if not, highlight errors.

i then copied the code for a feedback form, removing the fields i don't need, however it isn't working. I try as much as i can be i just can't see where it's going wrong.

minus a lot of code, this is what i have...

<div class='label' id='flName'>First Name: </div>
<input type='text' name='fName' id='fName' value=''/>

var fName = $("#fName").val();
alert(fName);

and the alert always comes back blank.

i thought it was perhaps something to do with the fact that the form is initially set as display:none by css so it couldn't then find the #fName field, but i removed that css and it still does it so i'm at the end of what i can try.

anyone any ideas what i can do to find the solution?

 

[Tripnologist]

It works fine for me so something else is interfering with it.

 

[Pho]

Have you wrapped your code in:

$(document).ready(function() {
	var fName = $("#fName").val();
	alert(fName);
});

?

 

[unwashed potato!]

Pho: it's wrapped in $(function () { so pretty much same thing, unless i'm mistaken?

i'm struggling to find the issue. i've disabled anyslider jquery plugin i was using and they both work, but when it's re-enabled the form stops.

i've swapped the feedback form and contact form js the other way round and no difference, but when i change the html forms order so feedback form is first that makes the form work, but stops the contact form :s

what the problem appears to be is that it can't get the value of the second form's input fields. edit: maybe not as i've had it make the label turn red if the field is empty and it isn't managing to do this either.

only thing i can think of is as i've used the jquery code twice just with small changes perhaps i've not done it correctly and that's what causing the issue.

anyway here is the jquery i have for the forms, don't think the html is needed?

$(function () {			
			            
            $('#fForm').submit(function(ev){

			ev.preventDefault();
						
			var eCount = 0;
			
			var fName = $("#fName").val();
			var fTown = $("#fTown").val();
			var fMessage = $("#fMessage").val();
			
			alert("fName: "+fName+", fTown: "+fTown+", fMessage: "+fMessage);
			
			if (fName.length < 2) {
			$("#flName").addClass("e");
			eCount++;
			} else {
			$("#flName").removeClass("e");
			}
						
			if (fTown.length < 2) {
			$("#flTown").addClass("e");
			eCount++;
			} else {
			$("#flTown").removeClass("e");
			}

						
			if (fMessage.length < 2) {
			$("#flMessage").addClass("e");
			eCount++;
			} else {
			$("#flMessage").removeClass("e");
			}
			
			if(eCount > 0) {
			//alert('there was '+eCount+' errors');
			}
			else {
			
			$.ajax({
				type: "POST",
				url: 'p/process_fForm.php',
				data: "fName="+fName+"&fTown="+fTown+"+&fMessage="+fMessage,

				error: function(data) {
				alert('error.');
				},
				success: function(data) {
				if(data == "170488") {
				$("#fForm").fadeOut('fast');
				$("#fFormResult").fadeOut('fast');
				$("#fFormSent").html("Thank you for getting in touch. We will be replying soon.");
				$("#fFormSent").fadeIn('fast');
				
				}
				else {
				$('#fFormResult').html(data).fadeIn('fast');
				//alert('Load was performed.'+data);
				}
				}
 
			});

			}
			
            });
			
});

$(function () {
            
            $('#cForm').submit(function(ev){

			ev.preventDefault();
			
			
			var eCount = 0;
			
			var cName = $("#cName").val();
			var cContact = $("#cContact").val();
			var cPostcode = $("#cPostcode").val();
			var cMessage = $("#cMessage").val();
			var cCopy = $("#cCopy").val();
			
			alert("cName: "+cName+", cContact: "+cContact+", cPostcode: "+cPostcode+", cMessage: "+cMessage+", cCopy: "+cCopy);
			
			
			if (cName.length < 2) {
			$("#lName").addClass("e");
			eCount++;
			} else {
			$("#lName").removeClass("e");
			}
						
			if (cContact.length < 2) {
			$("#lContact").addClass("e");
			eCount++;
			} else {
			$("#lContact").removeClass("e");
			}
						
			if (cPostcode.length < 2) {
			$("#lPostcode").addClass("e");
			eCount++;
			} else {
			$("#lPostcode").removeClass("e");
			}
						
			if (cMessage.length < 2) {
			$("#lMessage").addClass("e");
			eCount++;
			} else {
			$("#lMessage").removeClass("e");
			}
			
			if(eCount > 0) {
			//alert('there was '+eCount+' errors');
			}
			else {
			
			$.ajax({
				type: "POST",
				url: 'p/process_cForm.php',
				data: "cName="+cName+"&cContact="+cContact+"+&cMessage="+cMessage+"&cCopy="+cCopy,

				error: function(data) {
				alert('error.');
				},
				success: function(data) {
				if(data == "170488") {
				$("#cForm").fadeOut('fast');
				$("#cFormResult").fadeOut('fast');
				$("#cFormSent").html("Thank you for getting in touch. We will be replying soon.");
				$("#cFormSent").fadeIn('fast');
				
				}
				else {
				$('#cFormResult').html(data).fadeIn('fast');
				//alert('Load was performed.'+data);
				}
				}
 
			});

			}
			
            });
            });

 

[Izi]

jquery will have problems finding your html controls if your html is not well formed.

check your HTML is all ok and the inputs are nested properly.

 

[unwashed potato!]

^ i'm not convinced that's the issue as it goes when i change things around, e.g. just one form then it's ok, if both forms are there it works only on the first, if i remove the anyslider plugin both work.

edit:

odd. just fixed it by adding an empty <li></li> to the end of anySlider. very happy i finally managed to get it fixed. funny how you can spend ages working at somethin to make no progress, then when you've had some time away and come back to it, within 5 minutes you find a solution.