Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: How do I replace an onscreen element with a value?  (Read 5373 times)

0 Members and 1 Guest are viewing this topic.

greenber

    Topic Starter


    Rookie

    • Computer: Specs
    • Experience: Experienced
    • OS: Other
    How do I replace an onscreen element with a value?
    « on: January 09, 2016, 05:21:00 PM »


    Given HTML like this:

    <html>
    <body>

      <input type="text" name="xyz" id="xyz" />
      <select name="regstater2"  size="0" id="regstater" onclick=  "regstater2.value = regstater.value">
        <option value="AL">Alabama</option>...
     
        <option value="WY">Wyoming</option>
      </select>


    </body>
    </html>

    I want to be able to replace the on-screen "<select >with the "value" upon a selection click.

    How do I do that?

    camerongray



      Expert
    • Thanked: 306
      • Yes
      • Cameron Gray - The Random Rambings of a Computer Geek
    • Certifications: List
    • Computer: Specs
    • Experience: Expert
    • OS: Mac OS
    Re: How do I replace an onscreen element with a value?
    « Reply #1 on: January 09, 2016, 05:41:22 PM »
    Ideally you would want to use jQuery for this to make life a lot easier but it could be done in raw Javascript if absolutely required.  Essentially you would need to bind an event handler to the change event of the select.  When the event handler is triggered, simply get the value of the select and then use something like the jQuery replaceWith method to replace the input. http://api.jquery.com/replacewith/

    greenber

      Topic Starter


      Rookie

      • Computer: Specs
      • Experience: Experienced
      • OS: Other
      Re: How do I replace an onscreen element with a value?
      « Reply #2 on: January 10, 2016, 01:30:55 PM »
      Gosh, that seems an incredible amount of work just to do what should be very light weight! Something like turning off the .visible property or setting one element equal to another (if the <select >element has an ID = "Fred" setting Fred.value to something like "SylvesterStallone" should replace the <select > element, no?

      Perhaps something in the DOM object?

      Geek-9pm


        Mastermind
      • Geek After Dark
      • Thanked: 1026
        • Gekk9pm bnlog
      • Certifications: List
      • Computer: Specs
      • Experience: Expert
      • OS: Windows 10
      Re: How do I replace an onscreen element with a value?
      « Reply #3 on: January 10, 2016, 03:05:41 PM »
      Just curious as to what you what to do.
      Do you already have a lo-tech way of  doing it?
      Example:
        Three pages. All three pages have common things. They look alike.
        First page gets something and the will then goo either page 2 or page3 as needed.
      Does that describe what your want?

      camerongray



        Expert
      • Thanked: 306
        • Yes
        • Cameron Gray - The Random Rambings of a Computer Geek
      • Certifications: List
      • Computer: Specs
      • Experience: Expert
      • OS: Mac OS
      Re: How do I replace an onscreen element with a value?
      « Reply #4 on: January 10, 2016, 03:48:22 PM »
      Unfortunately that's really as simple as it can be, you have to do DOM manipulation in Javascript, you can't just set variables to make it work.

      greenber

        Topic Starter


        Rookie

        • Computer: Specs
        • Experience: Experienced
        • OS: Other
        Re: How do I replace an onscreen element with a value?
        « Reply #5 on: January 10, 2016, 07:28:49 PM »
        Actually, I think I found the solution but I can't seem to get the syntax. Presume I have a<select> with the long form states In a list as <object >pairs with the two letters abbreviations in each state' s value.

        Using "WithReplace", and the select being called "regstater" what would be the correct syntax to have in the select's onclick= event?

        I know I'm on the right track but my mind is going tapioca pudding!

        camerongray



          Expert
        • Thanked: 306
          • Yes
          • Cameron Gray - The Random Rambings of a Computer Geek
        • Certifications: List
        • Computer: Specs
        • Experience: Expert
        • OS: Mac OS
        Re: How do I replace an onscreen element with a value?
        « Reply #6 on: January 10, 2016, 07:37:47 PM »
        How much JavaScript do you know?  I'd suggest getting reasonably comfortable with it before attempting this.  You shouldn't really be putting much code in the onclick attribute (ideally not using it at all and using JS event handlers).  The main bulk of your JavaScript logic should be in a separate JavaScript file loaded into the page.

        greenber

          Topic Starter


          Rookie

          • Computer: Specs
          • Experience: Experienced
          • OS: Other
          Re: How do I replace an onscreen element with a value?
          « Reply #7 on: January 10, 2016, 08:11:13 PM »











































































































          > How much JavaScript do you know?

          Well, I prefer *real* programming languages instead...<ducking>

          Seriously, what is the problem with its OnClick event handling? I thought it was pretty robust. No?









          .

          BC_Programmer


            Mastermind
          • Typing is no substitute for thinking.
          • Thanked: 1140
            • Yes
            • Yes
            • BC-Programming.com
          • Certifications: List
          • Computer: Specs
          • Experience: Beginner
          • OS: Windows 11
          Re: How do I replace an onscreen element with a value?
          « Reply #8 on: January 10, 2016, 08:48:02 PM »
          I'm not entirely clear on what you are trying to do, myself. It seems clear that you want to completely replace the combobox with the selection in the combobox, but that seems a bit weird, which is why I ask. if it is, you'll want the onchange event, not onclick. And you'll want to change the HTML itself. You can either do this with the DOM replaceChild() method, or you can create an element to encompass the select tag, and replace the innerHTML of that item:

          Code: [Select]
          <html>
          <body>

            <input type="text" id="xyz" />
          <span id="stateselection">
            <select size="0" id="regstater" onchange= "stateselection.innerHTML=regstater.value">
              <option value="AL">Alabama</option>
              <option value="WY">Wyoming</option>
            </select>
          </span>


          </body>
          </html>

          By the way- this isn't in a form, but the name attribute is only used for form submissions. the id tag is used when dealing with the DOM; Your original script was failing because there was no regstater2 id, for example; but as you have them defined, even if the name was lookup-able, they would be the same item anyway. Not sure what you expected when setting a property to itself :P

          Another reason I'm unsure if this is actually the sort of thing you were after is because if it is the textbox sorta just- sits there and does nothing. If you want to set the value of the textbox to the state when the state combobox is changed, that's fairly similar:

          Code: [Select]
          <html>
          <body>

            <input type="text" id="xyz" />
            <select size="0" id="regstater" onchange= "xyz.value=regstater.value">
              <option value="AL">Alabama</option>
              <option value="WY">Wyoming</option>
            </select>

          </body>
          </html>


          Quote
          Seriously, what is the problem with its OnClick event handling? I thought it was pretty robust. No?
          Nothing really. But it's typically a pain in the *censored* trying to get any non-trivial logic into a string attribute. Typically you would write the code in a separate file as a function, include it in the file by using a <script> tag, and then the event is something like onchange=handlechange().
          I was trying to dereference Null Pointers before it was cool.

          greenber

            Topic Starter


            Rookie

            • Computer: Specs
            • Experience: Experienced
            • OS: Other
            Re: How do I replace an onscreen element with a value?
            « Reply #9 on: January 10, 2016, 10:22:05 PM »























































            > Not sure what you expected when setting a property to itself :P

            Just a way of showing my ignorance of the matter under discussion.

            It worked! http://www.computerhope.com/forum/Smileys/classic/grin.gif

            Seriously,the innerHTML snippet worked, did what I wanted and was quite elegant to boot.

            Many thanks!

            Ross

            .

            greenber

              Topic Starter


              Rookie

              • Computer: Specs
              • Experience: Experienced
              • OS: Other
              Re: How do I replace an onscreen element with a value?
              « Reply #10 on: January 11, 2016, 04:17:01 AM »
              Reading this thread is difficult, not just for me, because of my excessive "\n" usage. I was unable to get the "modify" thing to work properly. I'm a handicapped fellow and sometimes my Dragon NaturallySpeaking doesn't. If you don't mind could you go back and cleanup this thread?

              Thanks!

              Geek-9pm


                Mastermind
              • Geek After Dark
              • Thanked: 1026
                • Gekk9pm bnlog
              • Certifications: List
              • Computer: Specs
              • Experience: Expert
              • OS: Windows 10
              Re: How do I replace an onscreen element with a value?
              « Reply #11 on: January 11, 2016, 09:30:54 AM »
              greenber,
              Thanks for posting! I also have a handicap. Mostly my low vision. And I use DNS to post on this forum. Sometimes. It is so much a bother that often I just use the keyboard and peck away.  :)