Ruby Forum Rails Spinoffs (closed, excessive spam) > prototype form input value replacement

Hi everyone,

I have looked through a variety of documentation sources but have come
up empty handed.  I can get the value of a input field within a form
but I am not sure how to replace it successfully.  It is a hidden
variable that I want to change dynamically:

<input type="hidden" id="type" name="color" value="white" />

to

<input type="hidden" id="type" name="color" value="green" />

I am using the "insertion" function to insert a link that connects to
an ajax.updater function from where i would like to initiate the value
change of the html input.

Any help would be appreciated.  I am VERY javascript green, but am
learning more every time i mess up ;)

Sheri

On 5/23/07, muskokee <sherisaddy@gmail.com> wrote:
> to
> Sheri
Maybe I'm confused, but why won't this work?
$('type').value = 'green';

--
Jesse E.I. Farmer
e: jesse@20bits.com
w: http://20bits.com

$('type').value = 'green';

the $('type') is a shortcut to Javascript's 
document.GetElementByID('type')
You can use properties .value, .innerHTML with these for setting values 
and
populating DIV's etc.
Enjoy!

Thanks Jesse.  I'm not sure why that wont work.

The file that the updater is pointing to contains this script ( i am
passing a hidden variable as well~ that i have control over):

<?php
if ($_GET['type'] == 'white' && $_GET['decide'] == 'yes'){
?>
<script type="text/javascript">
$('type').value = 'green';
</script>
<?php
}
?>

this script works when i just want to replace the placeholder with
html - but it doesn't seem to effect the input field at all when the
script is added.

When I submit the form after the replacement it still uses the value
of "white".

Sheri

Thanks Jesse.  I'm not sure why that wont work.

The file that the updater is pointing to contains this script ( i am
passing a hidden variable as well~ that i have control over):

<?php
if ($_GET['type'] == 'white' && $_GET['decide'] == 'yes'){
?>
<script type="text/javascript">
$('type').value = 'green';
</script>
<?php
}
?>

this script works when i just want to replace the placeholder with
html - but it doesn't seem to effect the input field at all when the
script is added.

When I submit the form after the replacement it still uses the value
of "white".

Sheri

Thanks Jesse.  I'm not sure why that wont work.

The file that the updater is pointing to contains this script ( i am
passing a hidden variable as well):

<?php
if ($_GET['type'] == 'white' && $_GET['decide'] == 'yes'){
?>
<script type="text/javascript">
$('type').value = 'green';
</script>
<?php
}
?>

this script works when i just want to replace the placeholder with
html - but it doesn't seem to effect the input field at all when the
script is added.

When I submit the form after the replacement it still uses the value
of "white".

Here is the updater script:

<script type="text/javascript">
function change_color_type(decide) {
   var type = $F('type');
   var url = 'http://www.mysite.com/updater.php';
   var params = 'type=' + type + '&decide=' + decide;
   var ajax = new Ajax.Updater({success: 'mydiv'},url,{method: 'get',
parameters: params, onFailure: reportError});
}
function reportError(request) {
   $F('mydiv') = "An error occurred";
}
</script>

Thanks again,
Sheri

Thanks Jesse.  I'm not sure why that wont work.

The file that the updater is pointing to contains this script ( i am
passing a hidden variable as well~ that i have control over):

<?php
if ($_GET['type'] == 'white' && $_GET['decide'] == 'yes'){
?>
<script type="text/javascript">
$('type').value = 'green';
</script>
<?php
}
?>

this script works when i just want to replace the placeholder with
html - but it doesn't seem to effect the input field at all when the
script is added.

When I submit the form after the replacement it still uses the value
of "white".

Sheri

Thanks Mark!

Do I have to clear the value first? before assigning a new value?

Sheri

No, "just set it and forget it", as Ron Popeil might say...

LOL!

I wonder why it doesn't work then?  Does the script have to be placed
*after* the element?

I think you might want to check the logic in your server side code, or 
the
flow of your app.

muskokee wrote:
> LOL!
> 
> I wonder why it doesn't work then?  Does the script have to be placed
> *after* the element?

Yes. It's sorta like using a variable before you've declared your 
variable. It
needs to have been created as a DOM element by the browser before you 
can use it.

--
Michael Peters
Developer
Plus Three, LP

will keep plugging away.  Sheri :)

Now that you've tried all of that, do you want to know what the real 
problem is?

Here it comes...

You need to pass "evalScripts: true" in the options to Ajax.Updater...!

Yay!

-E

On 5/23/07, muskokee <sherisaddy@gmail.com> wrote:
> >
> > > > > Thanks Mark!
> > > > > > You can use properties .value, .innerHTML with these for setting
> > > come
> >
>
>
> >
>


--
Eric Ryan Harrison

> You need to pass "evalScripts: true" in the options to Ajax.Updater...!

Nope, that's the default setting.

What version of Prototype are you looking at? The version I have
(Prototype 1.5.1) has this:

On line 1172 inside the initialize method of the Ajax.Updater class it
sets the options through Object.extend() on a set of defaults:
1172       this.setOptions(options);

The defaults are:

980     setOptions: function(options) {
981       this.options = {
982         method:       'post',
983         asynchronous: true,
984         contentType:  'application/x-www-form-urlencoded',
985         encoding:     'UTF-8',
986         parameters:   ''
987       }

Then, back in Ajax.Updater inside the updateContent method (that is
being called when the request is over) we see this on line 1187:

1187       if (!this.options.evalScripts) response = 
response.stripScripts();

So it this.options.evalScripts is false (which it is as it's not set)
the response is set to the response without the scripts. Therefor,
when Element.update() is called on the response text, it is without
the script tags and then does not ever call evalScripts() on that
stripped javascript.

Bam!

Is that not the case for you? What version are you using?

-E

On 5/23/07, tobie <tobie.langel@gmail.com> wrote:
>
> > You need to pass "evalScripts: true" in the options to Ajax.Updater...!
>
> Nope, that's the default setting.
>
>
> >
>


--
Eric Ryan Harrison

Sherri,
I just had a chance to look at your code for more than 1 minute.
$('type').value = 'green'; is indeed the way you set a value inside the 
DOM
with Prototype, you can take that to the bank.

I believe this is the reason your code doesn't work:
you never invoke the Javascript that you have written on your page.  You
call a server side PHP piece related to the form submission, and then 
just
have the javascript sitting there in the page.  I would place that JS 
inside
a function, like so:

<script type="text/javascript">
    function setColor(colorStr) {
               $('type').value = colorStr;
      }
</script>
(where the argument variable 'colorStr' can be any text: green, red, 
yellow,
etc etc)

Then I would call that function, passing in the value for "green" in an
event on the page (perhaps the onLoad event?).  You could pass it in, 
for
example:

<body onload="javascript:setColor('green');">

I'm just showing you an example, not sure if that fits in the context of
your app after having just seen 4 lines of code.  But you have to 
trigger
that client-side javascript, the js code won't just execute (like PHP) 
when
the page renders from top to bottom.

I hope that helps.
Mark

LMAO.  We definitely need more Ron Popeil quotes in JavaScript
documentation.  :P

Hi guys, i completely abandoned this idea as i realized that the
problem was exactly what mark indicated.  i passed the information and
then just thought the script would miraculously initialize itself.
Doh!

Thanks for all you help.

Sheri