Passing variables between functions

[Schmoopy]

Ok I haven't done JavaScript for a little while and I'm absurdly rusty, don't have a clue what I'm doing but here's what I have so far:

var error = 0;

function validate(){

if (document.getElementById('name').value == "")
{
	error = 1;
}

else if(document.getElementById('date').value == "")
{
	error = 1;
}

if (error == 1)
{
	alert('You have not completed all fields');
	return error;
}

}

function sendRequest(error) {
	if (error == 0){
	new Ajax.Request("appointments.php", 
		{ 
		method: 'post', 
		postBody: 'name='+ $F('name')+ '&date='+ $F('date')+ '&time='+ $F('time')+ '&where='+ $F('where')+ '&phone_no='+ $F('phone_no')+ '&job_desc='+ $F('job_desc')+ '&quoted_price='+ $F('quoted_price'),
		onComplete: showResponse 
		});
	}
}

What I want to happen is for the script to have error = 0 to begin with, execute some code, if any of the fields are empty, error then = 1.

If there are no errors (error != 1) then proceed with the other function, otherwise do nothing.

Bit of HTML:

onclick="validate(); sendRequest(error);"

This is obviously all to do with scope, and I've gotten a bit lost. At the moment it's validating O.K, it will alert if fields are empty but if they're not it won't proceed with the other function.

Hope someone can help me,

Thanks

[Twey]

function validate() {
  if (document.getElementById('name').value
      && document.getElementById('date').value)
    return true;

  alert("You have not completed all fields.");

  return false;
}

function sendRequest() {
  new Ajax.Request("appointments.php", { 
    method: 'post', 
    postBody: 'name='+ $F('name')+ '&date='+ $F('date')+ '&time='+ $F('time')+ '&where='+ $F('where')+ '&phone_no='+ $F('phone_no')+ '&job_desc='+ $F('job_desc')+ '&quoted_price='+ $F('quoted_price'),
    onComplete: showResponse 
  });
}

onclick="validate() && sendRequest();"

Be careful with your formatting; avoid globals where possible; and never delegate error-handling to an entirely unrelated function.

I'd advise doing something with that postBody too. A huge string like that is not nice. Prototype.js may be one of the worse Javascript libraries available at the moment, but I imagine that even it must have a function to convert an object to a query string. Something like this is much more readable:

function sendRequest() {
  new Ajax.Request("appointments.php", { 
    method: 'post', 
    postBody: Ajax.objectToQueryString({
      name: $F('name'),
      date: $F('date'),
      time: $F('time'),
      where: $F('where'),
      phone_no: $F('phone_no'),
      job_desc: $F('job_desc'),
      quoted_price: $F('quoted_price')
    }),
    onComplete: showResponse 
  });
}

[Schmoopy]

Cheers for that Object.toQueryString can be used instead I think, I'll try it out and see if I can get it to work.

I have this now:

function sendRequest() {
	new Ajax.Request("appointments.php", 
		{ 
		method: 'post', 
		postBody: toQueryString({
			name: $F('name'),
			date: $F('date'),
			time: $F('time'),
			where: $F('where'),
			phone_no: $F('phone_no'),
			job_desc: $F('job_desc'),
			quoted_price: $F('quoted_price')
		}),
		onComplete: showResponse 
		});
}

But it's not working, what am I doing wrong?

Fixed it, used "parameters" instead:

function sendRequest() {
	new Ajax.Request("appointments.php", 
		{ 
		method: 'post', 
		parameters: {
			name: $F('name'),
			date: $F('date'),
			time: $F('time'),
			where: $F('where'),
			phone_no: $F('phone_no'),
			job_desc: $F('job_desc'),
			quoted_price: $F('quoted_price')
		},
		onComplete: showResponse 
		});
}

[Twey]

Aha, that's good. Your formatting is still a bit wacky, though.

Another issue to consider with the 'big string' approach is that everything needs escaping: one of the form elements might contain an & character, for example.

[Schmoopy]

Ok, how do you escape them? And since I don't want to make a new thread, do you know how to lock a field? So if I use a calendar, only the value from the calendar will be used and the user cannot edit the value put into the field.

[Twey]

Well, it would end up looking like this:

    postBody: 'name='+ encodeURIComponent($F('name')) + '&date=' + encodeURIComponent($F('date')) + '&time=' + encodeURIComponent($F('time')) + '&where=' + encodeURIComponent($F('where')) + '&phone_no=' + encodeURIComponent($F('phone_no')) + '&job_desc=' + encodeURIComponent($F('job_desc')) + '&quoted_price=' + encodeURIComponent($F('quoted_price')),

... completely unparseable by human eye.

Since you're using parameters now instead of postBody, though, you don't have to worry about that.

What do you mean by 'lock a field'? Any field sent by JS can be modified before sending. You can disable a form input by saying <input type="text" disabled>, though.

[Schmoopy]

Ah yes, exactly like that - but I mean I'm using Xin Yang's calendar and I want the user not to be able to edit the field and only be able to select the date from the calendar. So disabled is the sort of effect, but then I can't use the value, so is there an equivalent where the value can still be passed?

[ilovephp]

Can someone help me to add a loading GIF to this, for showing progress

Cheers for that Object.toQueryString can be used instead I think, I'll try it out and see if I can get it to work.

I have this now:

function sendRequest() {
	new Ajax.Request("appointments.php", 
		{ 
		method: 'post', 
		postBody: toQueryString({
			name: $F('name'),
			date: $F('date'),
			time: $F('time'),
			where: $F('where'),
			phone_no: $F('phone_no'),
			job_desc: $F('job_desc'),
			quoted_price: $F('quoted_price')
		}),
		onComplete: showResponse 
		});
}

But it's not working, what am I doing wrong?

Fixed it, used "parameters" instead:

function sendRequest() {
	new Ajax.Request("appointments.php", 
		{ 
		method: 'post', 
		parameters: {
			name: $F('name'),
			date: $F('date'),
			time: $F('time'),
			where: $F('where'),
			phone_no: $F('phone_no'),
			job_desc: $F('job_desc'),
			quoted_price: $F('quoted_price')
		},
		onComplete: showResponse 
		});
}