CODEWITHSUNDEEP
javascript
Wayne Smallman
Wayne Smallman

Reputation: 1720

Passing parameters to a form, via JavaScript

I have a form which passes a number of parameters. So far, the stock parameters are being passed:

var params = "title=" + document.getElementById("title").value + 
             "&url=" + document.getElementById("url").value + 
             "&snippet=" + document.getElementById("snippet").value +
             "&tags=" + document.getElementById("tags").value +
             "&status_bookmark=" + document.getElementById("status_bookmark").value +
             "&comment=" + document.getElementById("comment").value +
             "&status_comment=" + document.getElementById("status_comment").value;

I'm attempting to append additional form elements to this parameter string, which are:

var i, lng = document.getElementById('addbookmark').length;
// If the length property is undefined, then there is only one checkbox.
if (typeof lng === "undefined") {
    params + "&topic-link-item-1=" + document.getElementById("topic-link-item-1").value;
    params + "&topic-link-comment-box-1=" + document.getElementById("topic-link-comment-box-1").value;
}
else {
    for (i = 0; i < lng; i++) {
        params + "&topic-link-item-" + i + "=" + document.getElementById("topic-link-item-" + i).value;
        params + "&topic-link-comment-box-" + i + "=" + document.getElementById("topic-link-comment-box-" + i).value;
    }
}

Here, I've used code taken from another StackOverflow article, and as you can see, I'm trying to build up a series of paired parameters that match the ad hoc form elements I'm generating elsewhere via jQuery, which works.

However, these values appear not be getting passed via the form, while the other form elements are being passed.

Any suggestions?

Update

I've revised the code, per the suggestions, but it's not working:

var i, formObj = document.form['addbookmark'], formObjLng = document.form['addbookmark'].length;
// If the length property is undefined, then there is only one checkbox.
if ((typeof formObjLng !== "undefined")) {
    for (i = 0; i < formObjLng; i++) {
        if ((formObj.elements['topic-link-item-' + i].type == "checkbox") && (formObj.elements['topic-link-item-' + i].checked)) {
            params = params + "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i)).value;
            params = params + "&topic-link-comment-box-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-comment-box-" + i)).value;
        }
    }
}

As for the form, it's simply a form with an ID of "addbookmark", and to again state what I said earlier, everything else works with the exception of what Im attempting here.

Upvotes: 1

Views: 160

Answers (2)

Bradley Thomas
Bradley Thomas

Reputation: 4097

I'm pretty sure Javascript doesnt' allow text append the way you are doing it.

Should be

params = params +

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

There are 2 issues with your code. You need to URL encode the values using the encodeURIComponent function. Also you need to assign the result back to the params variable when concatenating:

var params = 
    "title=" + encodeURIComponent(document.getElementById("title").value) + 
    "&url=" + encodeURIComponent(document.getElementById("url").value) + 
    "&snippet=" + encodeURIComponent(document.getElementById("snippet").value) +
    "&tags=" + encodeURIComponent(document.getElementById("tags").value) +
    "&status_bookmark=" + encodeURIComponent(document.getElementById("status_bookmark").value) +
    "&comment=" + encodeURIComponent(document.getElementById("comment").value) +
    "&status_comment=" + encodeURIComponent(document.getElementById("status_comment").value);

and also for the other values that you are adding:

var i, lng = document.getElementById('addbookmark').length;
// If the length property is undefined, then there is only one checkbox.
if (typeof lng === "undefined") {
    params += "&topic-link-item-1=" + encodeURIComponent(document.getElementById("topic-link-item-1").value);
    params += "&topic-link-comment-box-1=" + encodeURIComponent(document.getElementById("topic-link-comment-box-1").value);
}
else {
    for (i = 0; i < lng; i++) {
        params += "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);
        params += "&topic-link-comment-box-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-comment-box-" + i).value);
    }
}

Notice how:

params += "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);

which is equivalent to:

params = params + "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);

is not the same as what you were doing initially:

params + "&topic-link-item-" + i + "=" + encodeURIComponent(document.getElementById("topic-link-item-" + i).value);

You were simply concatenating 2 values and never assigning the result back to the params variable.

Upvotes: 1

Related Questions