[RESOLVED] One of those Nagging Why questions that bug me.

minifairy

Ok I'm new to things like Java Script and Ajax and mostly muddle through I tend to get things working at least most of the time but sometimes there are those nagging WHY questions that bug me. This is one of those times. I re-wrote the AJAX forms that I was working with and they are working great. Here is the AJAX bit in the header.

 <script type="text/javascript">
	function sendRequest() {
		new Ajax.Request("show.php?p=c1",{
		method: 'post',
		parameters: 'sid='+$F('sid')+'&fname='+$F('fname')+'&lname='+$F('lname')+'&country='+$F('country')+'&dtype='+$F('dtype'),
		onComplete: showResponse
		});
	}
function showResponse(req){
	$('cont').innerHTML= req.responseText;
	}

</script>

Then the form looks like this

echo "<form action=\"show.php?p=c1\" method=\"post\" onsubmit=\"return false;\">\n";
	#various input lines etc.
echo "<input type=\"submit\" value=\"Submit\" onClick=\"sendRequest()\">\n";

So here is the question. The ajax request is directing to the area where the work is done with a POST why do I need to repeat all the input variables in the parameters, shouldn't they POST over there from the form? Does that F in front of the names the second time indicate field or what?

And now for the biggie. is there some way to include variable named post fields in that parameter list. For example I have a group of checkboxes that will differ based on something someone put in on the previous AJAX form.

dalecosp

minifairy;11047673 wrote:
So here is the question. The ajax request is directing to the area where the work is done with a POST why do I need to repeat all the input variables in the parameters, shouldn't they POST over there from the form?

No; the form isn't being POSTed by the browser, but by the AJAX request (e.g., the JavaScript function), so, the function needs to know what vars to POST, and that's why you give the values to it. JavaScript can read form values, of course; often this would be something like:

var value_from_form = document.getElementById('form_element_id']).value;

Does that F in front of the names the second time indicate field or what?

It's a variable. $F is a legal name for a JS variable, but so is "F" without the dollar sign, and typically JS programmers don't use the dollar sign unless it's some special value(for example, several of the large libraries (like jQuery) use "$" as the varname for their mega-object.

As for what it stands for here, I can't say for sure, but once the page is loaded you should be able to find out a little bit. Open your debugger and go into "console" and type $F and press enter. You could also do "console.log($F), I think.

And now for the biggie. is there some way to include variable named post fields in that parameter list. For example I have a group of checkboxes that will differ based on something someone put in on the previous AJAX form.

Not sure I'm understanding exactly. If the page is being generated by PHP and the server knows these variables and their values, you'd do it in the standard way. But you're saying that you've already submitted these via AJAX? On the same page?

If these values are still in the form, they can be read, as noted above. If they've already been submitted via AJAX, then you could probably place them in a JS object and re-use them later on the same page ...

minifairy

ok let me try and explain a bit better. There is a group of checkboxes on the form their names and ids are generated in a for each loop that steps through a series of values from a DB table. These are not static and can vary in name and number from user to user and even from day to day if the user decides to add or delete some. Is there some way that I can populate the java script parameters bit with a php for each loop? I don't see a way to do that.

dalecosp

Not sure if I'm following you completely, but if it's a "group of checkboxes", I'd consider whether they could all be of the same class, and then you could use JS to getElementsByClassName('foobar') ...

minifairy

Ok it is a group of check boxes and I could give them all the same class. So if I getElementsByClassName('foobar') how do I then insert them into the parameters list for the ajax function

function sendRequest() {
		new Ajax.Request("show.php?p=c1",{
		method: 'post',
		parameters: 'sid='+$F('sid')+'&fname='+$F('fname')+'&lname='+$F('lname')+'&country='+$F('country')+'&dtype='+$F('dtype'),
		onComplete: showResponse
		});
	}

Sorry to be so stupid here but JavaScript just seems to kick my butt. I have a hard time conceptualizing how it works. Some things make perfect sense others not so much.

Bonesnap

If you are serializing your form data and using jQuery you can use their .serialize method on your form and be done with it.

dalecosp

minifairy;11047793 wrote:
Ok it is a group of check boxes and I could give them all the same class. So if I getElementsByClassName('foobar') how do I then insert them into the parameters list for the ajax function
function sendRequest() {
		new Ajax.Request("show.php?p=c1",{
		method: 'post',
		parameters: 'sid='+$F('sid')+'&fname='+$F('fname')+'&lname='+$F('lname')+'&country='+$F('country')+'&dtype='+$F('dtype'),
		onComplete: showResponse
		});
	}
Sorry to be so stupid here but JavaScript just seems to kick my butt. I have a hard time conceptualizing how it works. Some things make perfect sense others not so much.

That's OK. It kicked mine for a while too. The last few years I've been doing better, and I hope to one day simply kill all my JS problems instantaneously like a Hollywood Ninja 😃

Pseudo-code for looping the class elements might be...

var class_elements = document.getElementsByClassName('foo');
for (i=0; i<class_elements.length; ++i);
   var id = class_elements[i].id;
   var value = class_elements[i].value;
   var innerHTML = class_elements[i].innerHTML;
   // alternatively, if needed, you can get the element by its ID, but I don't know that you'd need to.
   var element = document.getElementById(id);
}

Bonesnap;11047799 wrote:
If you are serializing your form data and using jQuery you can use their .serialize method on your form and be done with it.

Yeah, that too 🙂

minifairy

Ok that looks simple enough for stepping through the check boxes but that is only one piece of the stuff on the form, and we aren't getting them into the 'parameters' variable (i presume that is a variable) along with the other 'parameters' that aren't check boxes and aren't of that class.

dalecosp-- good luck with the ninja bit. :-D

Bonesnap... baby steps here I haven't gotten as far as JQuery I'm still pretty foggy on just javaScript and trying to figure out AJAX stuff. Time what I need is a bucket full of time so I can really study all this stuff, and read thouroughly all the links I've come across and the books I have on JavaScript. But Alas I have no time. I'm trying to squeeze some actual learning into pasting bits that I find together to make something do what I want and need it to do.

dalecosp

minifairy;11047805 wrote:
Ok that looks simple enough for stepping through the check boxes but that is only one piece of the stuff on the form, and we aren't getting them into the 'parameters' variable (i presume that is a variable) along with the other 'parameters' that aren't check boxes and aren't of that class.

dalecosp-- good luck with the ninja bit. :-D

Thanks! :p

As for getting them into the parameters var, that's (possibly) simple string building. In the example you show, they're really creating a GET string (the part that comes after the ? in a URL -- forgive me if that's over-the-top explanation). In your example, somehow they're all coming from an array/object named "$F". But you could get them yourself in a fashion similar to what I've shown; if the SendRequest() function is inside the script or function in which you read the form vars, the vars should be available to the function I think (scope isn't necessarily a string point of mine, esp. in JS).

Bonesnap

minifairy;11047805 wrote:
Bonesnap... baby steps here I haven't gotten as far as JQuery I'm still pretty foggy on just javaScript and trying to figure out AJAX stuff. Time what I need is a bucket full of time so I can really study all this stuff, and read thouroughly all the links I've come across and the books I have on JavaScript. But Alas I have no time. I'm trying to squeeze some actual learning into pasting bits that I find together to make something do what I want and need it to do.

I suggested it because I thought it might actually save you time.

Instead of having to fiddle around with...

parameters: 'sid='+$F('sid')+'&fname='+$F('fname')+'&lname='+$F('lname')+'&country='+$F('country')+'&dtype='+$F('dtype'),

...you could simplify it to...

parameters: $('#whateverYourFormsIdIs').serialize(),

...and never have to deal with it again if you add or remove form elements (checkboxes, text inputs, selects, etc.).

"Write less, do more." - jQuery 🙂

minifairy

Bonesnap... Well why didn't you say so? lol If that will work it is great and it answers the question I'll give it a go and let you know how it turns out. One question. How does it come out on the other end though? Does it come through the same way as $_POST['whatever'] variables that are with the names I gave them?

Derokorian

minifairy;11047831 wrote:
One question. How does it come out on the other end though? Does it come through the same way as $_POST['whatever'] variables that are with the names I gave them?

Yes it does. jQuery is a great tool for simplifying your JS, and handling cross browser compatibility (read: helps make things work in IE). If it wasn't for jQuery I'm certain I would NOT in any way shape or form be a JS dev today.

minifairy

:eek: UPDATE: I can't figure out how to get the jquery to work with this. I just don't know enough about the scripts. Somewhere in the prototype.js file is where the 'parameters' are going the function new Ajax.Request is in there and I had a look and got really lost.

Good News is this was working:

BAD NEWS IS: This WAS working.

Now I need some help big time. I need this to go live ASAP and it just blew up. This is even weirder and I can't find the problem.

the AJAX forms and the scripts all work beautifully when I put one specific name in (MINE) or if I put in a totally new person. But now that I have received the rest of the names for the table and input them it won't work with any of the others. I've looked at the code using inspect element and can see nothing different between when I put in my name and someone elses but it doesn't work with other people.

I desperately need help on this one.

here is a link to go have a look and try it. http://marshahedrick.com/gathering/show.php?p=ax1

try putting in my name. Marsha Hedrick. submit, yes this is me. then submit the next one. You will see it goes through fine.

Then try putting in Frank Chee submit, yes this is me, then submit the next one. And none of the POST values come through. WTF????

PLEASE what on earth have I done?

minifairy

OK Sort of figured part of this out. Apparently there is some ? and some () in the table that somehow are making it not post anything. So I can clean the table and make that not mess it up, however, I don't understand why it is doing it in the first place. I put htmlspecialchars on the output so it should replace them shouldn't it?

Nock

The way I get around this annoyance is to use jQuery and it's ajax methods. You can set up a listener on the form submit and serialise the inputs like this:

$('form[name="my-form"]').submit(function() {
    $.ajax({
        url: 'helpers/doSubmit.php',
        method: 'post',
        data: {[B]values: $(this).serialize()[/B]},
        success: function(data) {
            console.log(data)
        }
    });
});