Inline div

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Inline div

bmince
I'm trying to use shadowbox as an inline div with a few form elements.  The form elements don't need to submit, but I just need to be able to tell if a couple checkboxes are checked and the value of a text field.

Here is my code for just the text box.  When I click on the ok button, it calls a javascript function that is simply one line of code alert(document.getElementById("SearchString").value);

It alerts me of the inital value of 1234, but if I change the value in the shadowbox, it still displays 1234.  I read elsewhere in the forum that shadowbox does some sort of html duplication and it might be hard to reference by ID.  If I can't reference by ID, how can I obtain the value of the text field.

<div id="inline-sample" class="noshow">
        <div class="inline-sample-content">
                                                                                                                       
                                                                                                                               
<input id="SearchString" value="1234" type="text" style="width:100%">
<input class="buttonNormal" onclick="SearchTest()" type="button" value="OK" />
                       
        </div>
    </div>


Thanks,
Steve
Reply | Threaded
Open this post in threaded view
|

Re: Inline div

Wizzud
This is where the power of the library you are using comes into its own.

For example, using jQuery as the library enables you to have this as your html...

<div id="inline-sample" class="noshow">
  <div class="inline-sample-content">
                                   
          <input name="SearchString" value="1234" type="text" style="width:100%">
          <input class="buttonNormal" onclick="SearchTest()" type="button" value="OK" />
  </div>
</div>

...and this in script...

function SearchTest(){
  alert( $('#shadowbox_content input[name=SearchString]').val() );
}

Of course there are many different ways of finding the relevant input element. For example, an alternative might be...

  alert( $('table.shadowtable input[name=SearchString]').val() );

...or...

  alert( $('div.inline-sample-content input[name=SearchString]').val() );


The other libraries - Mootools, prototype, etc - have different syntax (sometimes similar, sometimes not) but can usually provide at least the 'find this element' capability.
Combine literacy with curiosity and a whole world of information opens up to you