Help with element.setattribute

[Larry]

Hi, I'm very new to Prototype Javascript so any help would be greatly
appreciated.

My issue is this, I have a form that does calculations. At the bottom
of the form there is a button that when clicked updates the totals and
displays it at the bottom of the page. Here is the code for the
button.

<input type="button" name="update" id="update" value="Update Total"
onclick="footprintcalc.total(); footprintcalc.addElement();" />

This button actually does 2 things totals the numbers in the form like
I mentioned above but also adds a hidden input box that also holds the
totals. Here is the piece of code that does that.

addElement: function () {
var theNewElem = document.createElement('input');
theNewElem.setAttribute('type', '');
theNewElem.setAttribute('id', 'finaltons');
theNewElem.setAttribute('value', totaltotal);
document.getElementById('formtons').appendChild(theNewElem);
}

};

This hidden input box with the id finaltons, is used to set a session
variable which can be used to transfer my final total to another page.
This part is done in C#.

My problem is, if you hit the "Update Total" button multiple times I
get multiple hidden input box's which causes a problem with my session
variable. So what do I have to add to my code so it doesn't add the
input box if its already exists. Can this be done?

[Johan Arensman]

Hello Larry,

First of all how did you find this mailing list? You haven't used a single Prototype method in your code?

You might want to have a look at the following sections:

Creating elements (and adding attributes at the same time):
http://api.prototypejs.org/dom/Element/new/

Or adding attributes using:
http://api.prototypejs.org/dom/Element/writeAttribute/

And also inserting elements into existing elements:
http://api.prototypejs.org/dom/Element/insert/

Further more on how to handle events such as clicks:
http://api.prototypejs.org/dom/Event/on/

And now to your actual problem, you click a button multiple times and each time you click the button your handler creates a new button. Without even thinking about JavaScript, how should any programming language solve this? You don't want multiple elements, so check if the element you are about to create exists?

This could be done by checking if an element with the exact same ID you're about to create already exists. This can be done using the dollar function, which accepts elements or element id's (http://api.prototypejs.org/dom/dollar/).

if (!$('elementId')) {
 // The element does not exist yet, create and insert the new element.
}

I hope you can use the information I gave you, please check the API on how to handle specific tasks with the Prototype Library first.

Greetings,
 Johan

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[Larry Holdsworth]

Hi Johan

 

Yes I realized right after I posted that the one piece of code in my script was an old method and not a Prototype method sorry about that. I do use Prototype methods in the  balance of my script. I’ve been struggling with creating Elements and setting attributes and I got it to work that way, so without changing it to a Prototype method I just went on to pursue my problem. See I told you I was new at this ..lol.

 

I found the mailing list by Googling  Prototype I needed help so I gave it a shot.

 

Thanks so much for the help I’ll check out those sections and go from there.

Larry

[Victor]

Hello!

You can do it in many ways:

1. Create an empty placeholder for hidden input (div at the bottom of your form). You can then easily replace content of this div and don't care about multiple inputs:

addElement: function () {

    $("totalsContainer").update('<input type="hidden" id="finaltons" value="' + totaltotal + '"></input>');

}

2. Create this hidden input in your form on server (in other words, input should always exist), then just replace its value:

addElement: function () {

    $("finaltons").setValue(totaltotal);

}

3. Combine both ways: check for existence of element (if not exists - then create it), then update its value:

addElement: function () {

    var input = $("finaltons");

    if (!input) {

      input = new Element({type: "hidden", id: "finaltons"});

      $("formtons").insert(input);

    }

    input.setValue(totaltotal);

}

[Larry Holdsworth]

Victor,

This is awesome thank-you so much for the help.

Larry

--

You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/kcV7l5b_sIIJ.