SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery, ajax and PHP help please

    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:
    HTML Code:
    <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
    HTML Code:
    <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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code JavaScript:
    $(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!\n\n' + textStatus);
                    },
                    success: function(data, textStatus, jqXHR){
                        if (textStatus != 'success') {
                            alert('An error has occurred while processing the Ajax request!\n\n' + textStatus);
                        } else {
                            $('.success, .error', parent).fadeOut(200);
                            $('.success', parent).show();
                        }
                    }
                });
            }
        });
    });

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers, I just literary figured it out about a minute before you replied. My method is:

    HTML Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •