Jquery, ajax and PHP help please

JavaScript
1

Hi, I was trying to do this with prototype instead but can’t get it to work. I’ve now gone back to trying Jquery to solve the problem.

Basically I have a PHP script that outputs many forms, all with inputs with the same class names. The form will be submitted through ajax to be passed to a PHP script to save it to a database.

Here is the code so far that I’m working from:


<script type="text/javascript" >
	$(function() {
	$(".submit").click(function() {
	var para = $("#para").val();
	var pass= $("#pass").val();
	var dataString = 'para='+ para + '&pass=' + pass;

	if(para=='' || pass=='')
	{
	$('.success').fadeOut(200).hide();
	$('.error').fadeOut(200).show();
	}
	else
	{
	$.ajax({
	type: "POST",
	url: "../results/process.php",
	data: dataString,
	success: function(){
	$('.success').fadeIn(200).show();
	$('.error').fadeOut(200).hide();
	}
	});
	}
	return false;
	});
	});
</script>

and the html


<div class="para-wrap">
<form method="post" name="form">
	<textarea name="para" id="para">
	    Content goes here
	</textarea>
		
	<input name="pass" id="pass" type="hidden" value="Source" />
	<input type="submit" value="submit" class="submit"  />
	<span class="error" style="display:none"> Please Enter Valid Data</span>
	<span class="success" style="display:none"> Registration Successfully</span>			
</form>
</div> <!--end parawrap-->	


	
<div class="para-wrap">

<form method="post" name="form">
	<textarea name="para" id="para">
		Different Content
	</textarea>
		
	<input name="pass" id="pass" type="hidden" value="Source" />
		
        <input type="submit" value="submit" class="submit" />
	<span class="error" style="display:none"> Please Enter Valid Data</span>
	<span class="success" style="display:none"> Registration Successfully</span>		
</form>
</div> <!--end parawrap-->

Any help would really be great, thanks!

2

See how this goes for you as when your using a class you need to find the parent element within the DOM before you can continue or it will select the first occurrence of the class.

$(function() {
    $('.submit').click(function(e) {
        e.preventDefault();
        
        var parent = $(this).parents('form');
        var para = $('#para', parent).val(), pass = $('#pass', parent).val();
        var data = {para: para, pass: pass};
        
        if (para == '' || pass == '') {
            $('.success, .error', parent).fadeOut(200);
            $('.error', parent).show();
        } else {
            $.ajax({
                type: 'POST',
                url: '../results/process.php',
                data: data,
                error: function(jqXHR, textStatus, errorThrown) {
                    alert('An error has occurred while processing the Ajax request!\
\
' + textStatus);
                },
                success: function(data, textStatus, jqXHR){
                    if (textStatus != 'success') {
                        alert('An error has occurred while processing the Ajax request!\
\
' + textStatus);
                    } else {
                        $('.success, .error', parent).fadeOut(200);
                        $('.success', parent).show();
                    }
                }
            });
        }
    });
});
3

Cheers, I just literary figured it out about a minute before you replied. My method is:


<script type="text/javascript" >
	$(function() {
	$(".submit").click(function() {
	var para = $(this).next().val();
	var source =$(this).next().next().val();
	var dataString = 'para='+ para + '&pass=' + pass;

	if(para=='' || source=='')
	{
	$('.success').fadeOut(200).hide();
	$('.error').fadeOut(200).show();
	}
	else
	{
	$.ajax({
	type: "POST",
	url: "../results/process.php",
	data: dataString,
	success: function(){
	$('.success').fadeIn(200).show();
	$('.error').fadeOut(200).hide();
	}
	});
	}
	return false;
	});
	});
</script>

and then I had to move the submit button above the textarea and inputs although I should probably use before and put the submit button in the right order in the form.