Ajax.send not working with empty vars

JavaScript
1

I have this function to send the signup form data to php.
In the form i can dynamically add more rows to a table that holds select drop downs, when i do this, i am incrementing and appending a number to each items ID in the html code in the row.

There is a limit of rows that can be created so i added the vars nl nll pl pll to the ajax.send and also added all possible incremented vars up to the max limit like this:

ajax.send("u="+u+"&e="+e+"&p="+p1+"&c="+c+"&g="+g+"&ct="+ct+"&nl="+nl+"&nll="+nll+"&nl0="+nl0+"&nll0="+nll0+"&nl1="+nl1+"&nll1="+nll1+"&nl2="+nl2+"&nll2="+nll2+"&pl="+pl+"&pll="+pll+"&pl0="+pl0+"&pll0="+pll0+"&pl1="+pl1+"&pll1="+pll1+"&pl2="+pl2+"&pll2="+pll2+"&pl3="+pl3+"&pll3="+pll3+"&pl4="+pl4+"&pll4="+pll4);

If i create the maximum of rows and select data in the dropdowns, then everything goes fine and my user can be registered.

But if i dont generate the maximum then ajax.send is not sending anything.

Is anyone able to help me with this? i have been searching for hours now and i cant find anything and im a programming noobs so i dont relly know what exactly i should look for.

Thanks in advance.

here is the whole function:

    function signup(){
	var u = _("username").value;
	var e = _("email").value;
	var p1 = _("pass1").value;
	var p2 = _("pass2").value;
	var c = _("country").value;
	var g = _("gender").value;
	var ct = _("city").value;
	var nl = _("nativelang").value;
	var nll = _("nlanglevel").value;
	var nl0 = _("nativelang0").value;
	var nll0 = _("nlanglevel0").value;
	var nl1 = _("nativelang1").value;
	var nll1 = _("nlanglevel1").value;
	var nl2 = _("nativelang2").value;
	var nll2 = _("nlanglevel2").value;
	var pl = _("practlang").value;
	var pll = _("planglevel").value;
	var pl0 = _("practlang0").value;
	var pll0 = _("planglevel0").value;
	var pl1 = _("practlang1").value;
	var pll1 = _("planglevel1").value;
	var pl2 = _("practlang2").value;
	var pll2 = _("planglevel2").value;
	var pl3 = _("practlang3").value;
	var pll3 = _("planglevel3").value;
	var pl4 = _("practlang4").value;
	var pll4 = _("planglevel4").value;
	var status = _("status");
	
	if(u == "" || e == "" || p1 == "" || p2 == "" || c == "" || g == "" || ct == "" || nl == "" || pl == ""){
		status.innerHTML = "Fill out all of the form fields marked with a star";
	} else if(p1 != p2){
		status.innerHTML = "Your passwords do not match";
		
	} else {
		_("signupbtn").style.display = "none";
		status.innerHTML = 'Email has been sent!';
		var ajax = ajaxObj("POST", "signup.php");
        ajax.onreadystatechange = function() {
       if(ajaxReturn(ajax) == true) {
           if(ajax.responseText.trim()!= "signup_success"){
			status.innerHTML = ajax.responseText;
			_("signupbtn").style.display = "block";
				} else {
					window.scrollTo(0,0);
					_("signupform").innerHTML = "<div id=\"status\">OK "+u+", <h2>check your email</h2> inbox and junk mail box at <u>"+e+"</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully <h2>activate your account!</h2></div>";
				}
	        }
        }
        ajax.send("u="+u+"&e="+e+"&p="+p1+"&c="+c+"&g="+g+"&ct="+ct+"&nl="+nl+"&nll="+nll+"&nl0="+nl0+"&nll0="+nll0+"&nl1="+nl1+"&nll1="+nll1+"&nl2="+nl2+"&nll2="+nll2+"&pl="+pl+"&pll="+pll+"&pl0="+pl0+"&pll0="+pll0+"&pl1="+pl1+"&pll1="+pll1+"&pl2="+pl2+"&pll2="+pll2+"&pl3="+pl3+"&pll3="+pll3+"&pl4="+pl4+"&pll4="+pll4);
	}
}
2

Whoa…

Can you post the form’s HTML? Also, which frameworks are you using (jQuery, underscore/lodash, custom)?

Whatever you’re using, it looks like it has an AJAX handler, so you may want to check if it also has a form serialization method (usually .serialize()), because that is an insane amount of variables to keep track of.

Without knowing anything, I’d make sure you don’t have any typos, missing &'s or ='s, that you’re l’s aren’t 1’s, and that you haven’t accidentally let an undefined slip by because that could kill the rest of the string without throwing an error

3

Thanks for your input.

I just found out that it returns this error:

Uncaught TypeError: Cannot read property 'value' of null 
signup
onclick

and i am using jquery and a custom function as an underscore, this is my main.js:

   function _(x){
	return document.getElementById(x);
}
function toggleElement(x){
	var x = _(x);
	if(x.style.display == 'block'){
		x.style.display = 'none';
	}else{
		x.style.display = 'block';
	}
}

and ajax.js:

    function ajaxObj( meth, url ) {
	var x = new XMLHttpRequest();
	x.open( meth, url, true );
	x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	return x;
}
function ajaxReturn(x){
	if(x.readyState == 4 && x.status == 200){
	    return true;	
	}
}

and here is the html:

<legend class="legend"><h3>Select your languages</h3></legend>

<ul class="list-unstyled">
    <li>
    <div class="lala">



            <table class="nativelanguages">
                <tr>
                    <td>Spoken language</td>

                    <td style="padding-left: 5px;">Level</td>
                </tr>

                <tr class="initialn">
                    <td>
                        <select class="nativelangdrop" id="nativelang" name="nativelang" required>
                        <option value="none" selected disabled>Select language</option>
                        <?php
                                    if ($file = @fopen('txt/languages.txt', 'r')) {
                                        while(($line = fgets($file)) !== false) {
                                            echo "<option>{$line}</option>";
                                        }
                                        fclose($file);
                                    }
                                    ?>
                    </select></td>

                    <td>
                    <select class="langleveldrop" id="nlanglevel" name="nlanglevel" required>
                        <option value="none" selected disabled>Select level</option>
                            <?php
                                    if ($file = @fopen('txt/levels.txt', 'r')) {
                                        while(($line = fgets($file)) !== false) {
                                            echo "<option>{$line}</option>";
                                        }
                                        fclose($file);
                                    }
                                    ?>
                    </select>
                    </td>

                </tr>
            </table>

            <div class="pmbutton">
            <button href="javascript:;" type="button" class="btn btn-default" id="addBtnNative">
            <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
            </button>
            <button href="javascript:;" type="button" class="btn btn-default" id="remBtnNative">
            <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
            </button>
            </div>
        </div>

        <div class="lala">


            <table style="float:left; margin-top:20px;" id="plang" class="practlanguages">
                <tr>


                    <td>Practicing language</td>

                    <td style="padding-left: 5px;">Level</td>


                </tr>

                <tr class="initialp">
                    <td>
                        <select class="practlangdrop" id="practlang" name="practlang" required>
                            <option value="none" selected disabled>Select language</option>
                                <?php
                                    if ($file = @fopen('txt/languages.txt', 'r')) {
                                        while(($line = fgets($file)) !== false) {
                                            echo "<option>{$line}</option>";
                                        }
                                        fclose($file);
                                    }
                                    ?>
                    </select>
                    </td>

                    <td><select class="langleveldrop" id="planglevel" name="planglevel" required>
                        <option value="none" selected disabled>Select level</option>
                            <?php
                                    if ($file = @fopen('txt/levels.txt', 'r')) {
                                        while(($line = fgets($file)) !== false) {
                                            echo "<option>{$line}</option>";
                                        }
                                        fclose($file);
                                    }
                                    ?>
                    </select>
                    </td>




                </tr>
            </table>


            <div class="pmbutton">
            <button href="javascript:;" type="button" class="btn btn-default" id="addBtnPract">
            <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
            </button>
            <button href="javascript:;" type="button" class="btn btn-default" id="remBtnPract">
            <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
            </button>
            </div>


        </div>
    </li>

</ul>

thanks for your time.

4

I have changed it to this and it works like a charm now:

var u = _("username").value;
var e = _("email").value;
var p1 = _("pass1").value;
var p2 = _("pass2").value;
var c = _("country").value;
var g = _("gender").value;
var ct = _("city").value;
var nl = _("nativelang").value;
var nll = _("nlanglevel").value;
var nl0 = $("#nativelang0").val() ? $("#nativelang0").val() : 'None';
var nll0 = $("#nlanglevel0").val() ? $("#nlanglevel0").val() : 'None';
var nl1 = $("#nativelang1").val() ? $("#nativelang1").val() : 'None';
var nll1 = $("#nlanglevel1").val() ? $("#nlanglevel1").val() : 'None';
var nl2 = $("#nativelang2").val() ? $("#nativelang2").val() : 'None';
var nll2 = $("#nlanglevel2").val() ? $("#nlanglevel2").val() : 'None';
var pl = _("practlang").value;
var pll = _("planglevel").value;
var pl0 = $("#practlang0").val() ? $("#practlang0").val() : 'None';
var pll0 = $("#planglevel0").val() ? $("#planglevel0").val() : 'None';
var pl1 = $("#practlang1").val() ? $("#practlang1").val() : 'None';
var pll1 = $("#planglevel1").val() ? $("#planglevel1").val() : 'None';
var pl2 = $("#practlang2").val() ? $("#practlang2").val() : 'None';
var pll2 = $("#planglevel2").val() ? $("#planglevel2").val() : 'None';
var pl3 = $("#practlang3").val() ? $("#practlang3").val() : 'None';
var pll3 = $("#planglevel3").val() ? $("#planglevel3").val() : 'None';
var pl4 = $("#practlang4").val() ? $("#practlang4").val() : 'None';
var pll4 = $("#planglevel4").val() ? $("#planglevel4").val() : 'None';
var status = $("status");
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.