Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0

    Jquery json to php undefined index


    I'm trying to send form data to be processed but I'm getting an "undefined index" error in php when attempting to reference one of the posted values. I've scaled my code down just to the problem area:


    PHP Code:
    <?php
    header
    ('Content-type: application/json');

    define('INCLUDE_CHECK',true);
    require 
    'connect.php';

    //Just a test to see if I can pick up the value
    echo $_POST['submit'];
    //Failing here - Getting an undefined index error

    /* In my actual php file I return json using the following...
    errorHandler:
        echo json_encode(array("rc" => "FAILURE", "rcMsg" => $err));
        exit;

    success:
        echo json_encode(array("rc" => "SUCCESS", "rcMsg" => 'thx'));
        exit;

    If this is incorrect as well, can someone point out the correct method?  Still a little green in some areas of jquery/php environment.

    */



    ?>
    jquery:

    Code:
    function lrLogin() {
    var $form = $(this);
    var $inputs = $form.find("input, select, button, textarea");
    var serializedData = $form.serialize();
    
    $.ajax({
    	type: 'POST',
    	async:false,
    	url:"php/log_reg_test.php",
    	processData:false,
    	data: serializedData,
    	success: function(json){
    		var $test=$.parseJSON(data);
    		alert($test.rcMsg);
    	},
    	error: function (request, status, error) {
    		alert(request.responseText);
    	}
    });
    //return false;
    };

    form:
    Code:
    <form id="log-reg_login" class="clearfix" action="" method="post">
            <h1>Member Login</h1>
            <label class="grey" for="email">Email:</label>
            <input class="field" type="text" name="login_email" id="login_email" value="" size="23" />
            <label class="grey" for="password">Password:</label>
            <input class="field" type="password" name="login_pWord" id="login_pWord" size="23" />
            <label>
              <input name="login_rememberMe" id="login_rememberMe" type="checkbox" checked="checked" value="1" />
              &nbsp;Remember me </label>
            <div class="clear"></div>
            <input type="submit" name="submit" value="Login" class="bt_login" />
    </form>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    153
    Rep Power
    5
    jquery's serialize() function doesn't include the submit button for some reason. There's a discussion about this on stack overflow if you want to delve deeper into why:

    http://stackoverflow.com/questions/4007942/jquery-serializearray-doesnt-include-the-submit-button-that-was-clicked
  4. #3
  5. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,068
    Rep Power
    9398
    Originally Posted by admoore
    jquery's serialize() function doesn't include the submit button for some reason. There's a discussion about this on stack overflow if you want to delve deeper into why:
    According to HTML, submit buttons should only be sent when using a submit button. Javascript does not use a submit button. That's why you have to send it yourself.
  6. #4
  7. No Profile Picture
    Dazed&Confused
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2002
    Location
    Tempe, AZ
    Posts
    506
    Rep Power
    128
    I'm guessing this is because the 'submit' action sets the value of the 'submit' field strictly in the scope of submitting the form.

    If you're referencing the form outside that scope (even if you're submitting it by other means, such as AJAX) then it's not going to have a value.

    What you might have to do instead is base the jQuery event on the submit button being clicked, rather than the overall form being submitted, so you'll capture the submit button's value. Then reference the form by ID to perform the serialization of everything else.

    This is also a bit better since it decouples the submit button value from your PHP logic, allowing you to present one text while the Javascript translates it to something more programmatic.
    LinkedIn: Dave Mittner
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0
    Originally Posted by requinix
    According to HTML, submit buttons should only be sent when using a submit button. Javascript does not use a submit button. That's why you have to send it yourself.
    I'm a little confused by this statement.

    Originally Posted by admoore
    jquery's serialize() function doesn't include the submit button for some reason. There's a discussion about this on stack overflow if you want to delve deeper into why:
    I checked out the post and attempted the suggestion but still ran into problems. I then tried hard-pushing a value to be sent but no luck...

    Code:
    var formData = $(this).closest('form').serializeArray();
      		formData.push({ name: this.name, value: this.value });
    		formData.push({ name: 'SRC', value: 'LOGIN' });
    		$.ajax({
    			type: 'POST',
    			async:false,
    			url:"php/log_reg_test.php",
    			processData:false,
    			data: formData,
    			success: function(json){
    				var $test=$.parseJSON(data);
    				alert($test.rcMsg);
    			},
    			error: function (request, status, error) {
    				alert(request.responseText);
    			}
    		});

    PHP Code:
    <?php
    header
    ('Content-type: application/json');

    define('INCLUDE_CHECK',true);
    require 
    'connect.php';

    //Just a test to see if I can pick up the value
    echo $_POST['SRC'];
    //Failing here - Getting an undefined index error


    ?>
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0

    Just tried...


    Just tried the following with no luck as well...

    Code:
    jQuery(document).ready(function(jQuery) {
    	// Listeners
    	//$('#log-reg_login').submit( lrLogin );
    
    	$('input:submit').each(function(){
    		$(this).click(function(){
    			var formData = $(this).closest('form').serializeArray();
    			formData.push({ name: $(this).attr('name'), value: $(this).val() });
    		});
    	});
    }); //END OPEN
    PHP Code:
    <?php
    header
    ('Content-type: application/json');

    define('INCLUDE_CHECK',true);
    require 
    'connect.php';

    //Just a test to see if I can pick up the value
    echo $_POST['submit'];
    //Failing here - Getting an undefined index error


    ?>
    Code:
    <form id="log-reg_login" class="clearfix" action="" method="post">
            <h1>Member Login</h1>
            <label class="grey" for="email">Email:</label>
            <input class="field" type="text" name="login_email" id="login_email" value="" size="23" />
            <label class="grey" for="password">Password:</label>
            <input class="field" type="password" name="login_pWord" id="login_pWord" size="23" />
            <label>
              <input name="login_rememberMe" id="login_rememberMe" type="checkbox" checked="checked" value="1" />
              &nbsp;Remember me </label>
            <div class="clear"></div>
            <input type="submit" name="submit" value="Login" class="bt_login" />
          </form>
  12. #7
  13. No Profile Picture
    Dazed&Confused
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2002
    Location
    Tempe, AZ
    Posts
    506
    Rep Power
    128
    Originally Posted by jsbenson
    Just tried the following with no luck as well...

    Code:
    jQuery(document).ready(function(jQuery) {
    	// Listeners
    	//$('#log-reg_login').submit( lrLogin );
    
    	$('input:submit').each(function(){
    		$(this).click(function(){
    			var formData = $(this).closest('form').serializeArray();
    			formData.push({ name: $(this).attr('name'), value: $(this).val() });
    		});
    	});
    }); //END OPEN
    This is on the right track; I just tested it with a console.log() of formData and it contained all of my form's data--including that of the submit button clicked.

    You'll just need to add your AJAX part to that, then have it return false so the form isn't submitted conventionally.
    LinkedIn: Dave Mittner
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0
    Originally Posted by dmittner
    This is on the right track; I just tested it with a console.log() of formData and it contained all of my form's data--including that of the submit button clicked.

    You'll just need to add your AJAX part to that, then have it return false so the form isn't submitted conventionally.
    Maybe there's something wrong with my ajax statement:


    Code:
    //var formData = $(this).closest('form').serializeArray();
    	$.ajax({
    	type: 'POST',
    	async:false,
    	url:"php/log_reg_test.php",
    	processData:false,
    	//data: formData,
    	success: function(json){
    		var $test=$.parseJSON(data);
    		alert($test.rcMsg);
    	},
    	error: function (request, status, error) {
    		alert(request.responseText);
    	}
    });
    //return false;*/
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0
    I had the "return false;" commented out so I could see the results of my php. Nothing would show, as if it didn't open. Then, when I uncommented the return statement, it showed the php results, which actually showed the results I was hoping for.

    Anyone know why it's reversed? I dumped my cache and F5 refreshed the page.

    Is it because of this in my ajax:
    processData:false,
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    153
    Rep Power
    5
    If a form's "action" is blank, many browsers will default to submitting to the same page.

    If you don't return false, the form will actually submit the traditional way, causing the page to refresh and any javascript in progress to immediately abort.

    So what happened is you basically submitted your form the oldschool way to the same page, causing a refresh.
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0
    Originally Posted by jsbenson
    I had the "return false;" commented out so I could see the results of my php. Nothing would show, as if it didn't open. Then, when I uncommented the return statement, it showed the php results, which actually showed the results I was hoping for.

    Anyone know why it's reversed? I dumped my cache and F5 refreshed the page.

    Is it because of this in my ajax:
    processData:false,
    Never mind. I found another default suppressor on the listener. Duh
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0
    I cannot believe I'm still having issues with this. Please, someone, help me. I've been on this for two days now.

    jQuery
    Code:
    jQuery(document).ready(function(jQuery) {
    	$('#log-reg_login').on('submit', function(e) { //use on if jQuery 1.7+
    		e.preventDefault();  //prevent form from submitting
    		var data = $("#log-reg_login :input").serializeArray();
    		lrLogin(data);
    	});
    });
    Code:
    function lrLogin($data) {
    	$.ajax({
    		type: 'POST',
    		async:false,
    		processData:false,
                    data: $data
    		url: "php/log_reg_test.php",
    		success: function(json){
    			var $test=$.parseJSON(data);
    			alert($test.rcMsg);
    		},
    		error: function (request, status, error) {
    			alert(request.responseText);
    		}
    	});
    	return false;
    };
    php:
    PHP Code:
    <?php
    header
    ('Content-type: application/json');

    define('INCLUDE_CHECK',true);
    require 
    'connect.php';

    echo 
    $_POST['submit'];
    ?>

    form:
    Code:
    <form id="log-reg_login" class="clearfix" action="php/log_reg_test.php" method="post">
            <h1>Member Login</h1>
            <label class="grey" for="email">Email:</label>
            <input class="field" type="text" name="login_email" id="login_email" value="" size="23" />
            <label class="grey" for="password">Password:</label>
            <input class="field" type="password" name="login_pWord" id="login_pWord" size="23" />
            <label>
              <input name="login_rememberMe" id="login_rememberMe" type="checkbox" checked="checked" value="1" />
              &nbsp;Remember me </label>
            <div class="clear"></div>
            <input type="submit" name="submit" value="Login" class="bt_login" />
          </form>


    With this, I'm getting "Undefined index: submit" error in php.
  24. #13
  25. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,068
    Rep Power
    9398
    One more time: jQuery will not serialize buttons.
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0
    Originally Posted by jsbenson
    I cannot believe I'm still having issues with this. Please, someone, help me. I've been on this for two days now.

    jQuery
    Code:
    jQuery(document).ready(function(jQuery) {
    	$('#log-reg_login').on('submit', function(e) { //use on if jQuery 1.7+
    		e.preventDefault();  //prevent form from submitting
    		var data = $("#log-reg_login :input").serializeArray();
    		lrLogin(data);
    	});
    });
    Code:
    function lrLogin($data) {
    	$.ajax({
    		type: 'POST',
    		async:false,
    		processData:false,
                    data: $data
    		url: "php/log_reg_test.php",
    		success: function(json){
    			var $test=$.parseJSON(data);
    			alert($test.rcMsg);
    		},
    		error: function (request, status, error) {
    			alert(request.responseText);
    		}
    	});
    	return false;
    };
    php:
    PHP Code:
    <?php
    header
    ('Content-type: application/json');

    define('INCLUDE_CHECK',true);
    require 
    'connect.php';

    echo 
    $_POST['submit'];
    ?>

    form:
    Code:
    <form id="log-reg_login" class="clearfix" action="php/log_reg_test.php" method="post">
            <h1>Member Login</h1>
            <label class="grey" for="email">Email:</label>
            <input class="field" type="text" name="login_email" id="login_email" value="" size="23" />
            <label class="grey" for="password">Password:</label>
            <input class="field" type="password" name="login_pWord" id="login_pWord" size="23" />
            <label>
              <input name="login_rememberMe" id="login_rememberMe" type="checkbox" checked="checked" value="1" />
              &nbsp;Remember me </label>
            <div class="clear"></div>
            <input type="submit" name="submit" value="Login" class="bt_login" />
          </form>


    With this, I'm getting "Undefined index: submit" error in php.

    oh yeah, missed that.
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0

    starting to work, but...


    I've got the values being picked up in php, but I'm getting a null when trying to parse the data in jQuery.

    Code:
    jQuery(document).ready(function(jQuery) {
    		// Listeners
    		$('#log-reg_login').on('submit', function(e) {
    			e.preventDefault();  //prevent form from submitting
    			var data = $("#log-reg_login :input").serializeArray();
    			
    			$.ajax({
    				type: 'POST',
    				async:false,
    				data: data,
    				dataType:"json",
    				url: "php/log_reg_test.php",
    				success: function(json){
    					var test=$.parseJSON(data);
    					alert('success');
    					alert(test.rcMsg);
                                            alert(test);
    				},
    				error: function (request, status, error) {
    					alert('fail');
    					alert(request.responseText);
    				}
    			});
    		});
    	
    		//if mask is clicked
    		$('#mask').click(function () {
    			$(this).fadeOut(100);
    			$('#log-reg').fadeOut(200);
    		});  
    	}); //END OPEN
    Code:
    <div class="leftSide"> 
          <!-- Login Form -->
          <form id="log-reg_login" class="clearfix" action="php/log_reg_test.php" method="post">
            <h1>Member Login</h1>
            <label class="grey" for="email">Email:</label>
            <input class="field" type="text" name="login_email" id="login_email" value="" size="23" />
            <label class="grey" for="password">Password:</label>
            <input class="field" type="password" name="login_pWord" id="login_pWord" size="23" />
            <label>
              <input name="login_rememberMe" id="login_rememberMe" type="checkbox" checked="checked" value="1" />
              &nbsp;Remember me </label>
            <div class="clear"></div>
            <input type="submit" name="submit" value="Login" class="bt_login" />
          </form>
        </div>
    PHP Code:
    <?php
    header
    ('Content-type: application/json');

    define('INCLUDE_CHECK',true);
    require 
    'connect.php';


    if(isset(
    $_POST['login_email'])){
        
    $test $_POST['login_email'];
        echo 
    json_encode(array("rc" => "SUCCESS""rcMsg" => $test));
    }


    ?>

    I get the "success" alert, but the $.parseJSON(data) is null
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo