SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying values from form

    Hi guys! In my form i have a checkbox, radio button, drop down menu and an anchor which changes from "+ Add" to "- Added!" when clicked.

    When the user has finished his/her selection I would like the results to appear in their individual span tags. I've figured out how to make the drop down menu's results appear in the span tag when you select from the options manually, but when the user clicks another anchor it changes the dropdown option but it doesn't change the result in the span?

    I used this code to display the drop down's results -
    Code:
     $('#txt3').text( $('#idchange').find('option:selected').text());
    $('#idchange').change(function(){    
        $('#txt3').text( $(this).find('option:selected').text());
    });
    The add button is changed using this code -
    Code:
    $('a.btn').click(function() {
        $('span',this).toggle();
        });
    But again i have no idea how to display the results only when the text = "- Added!" and display nothing when it = "+ Add"

    So how would I display the results if the select option is change programmatically? Also how would i display the results for the radio, checkbox, and the add button?

    Thanks

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Would it be possible that you post a link to the form you are working on?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, I hope jsfiddle is ok? http://jsfiddle.net/lukem13/tA3bv/1/

    Let me know if you need any more info!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    You could do it like this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jQuery manipulating form elements</title>
        <style>
          .add-btn {cursor:pointer;}
          .point {cursor:pointer;}
        </style>
      </head>
      
      <body>
        <ul>
          <li><a class="point" data-idchange-value="0">Change to select1</a></li>
          <li><a class="point" data-idchange-value="1">Change to select2</a></li>
        </ul>
        
        <select id="idchange">
          <option value="0" label="Select1">Selection 1</option>
          <option value="1" label="Select2">Selection 2</option>
        </select>
        
        <label class="check-text"><input type="checkbox" name="checkbox1" value="1" class="checkbox" /> check1</label>
        <label class="check-text"><input type="checkbox" name="checkbox2" value="2" class="checkbox" /> check2</label>
        
        <label><input type="radio" name="radio" value="150" class="radiobutton" /> 150</label>
        <label><input type="radio" name="radio" value="250" class="radiobutton" checked="checked" /> 250</label>
        
        <button data-text-swap="Added" id="button1">Add</button>
        <button data-text-swap="Added" id="button2">Add</button>
        
        <p>Checkboxes checked = <span id="txt1"></span></p>
        <p>Radio button checked = <span id="txt2"></span></p>
        <p>Drop down menu option = <span id="txt3"></span></p>
        <p>Add buttons selected = <span id="txt4"></span></p>
    
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          function updateCheckBox(){
            var val = "";
            $(".checkbox").each(function(){
              if($(this).is(":checked")){
                val += $(this).parent().text();
              }
            });
            val = (val === "")? "none" : val; 
            $("#txt1").text(val);
          }
          
          function updateRadioButtons(){
            var val = $(".radiobutton:checked").val();
            $("#txt2").html(val);
          }
          
          function updateDropDown(){
            $("#txt3").html($("#idchange option:selected").text());
          }
          
          function updateButtons(){
            var val = "";
            $("button").each(function(){
              if($(this).text() === "Added"){
                val += $(this).attr("id") + " ";
              }
            });
            val = (val === "")? "none" : val; 
            $("#txt4").text(val);
          }
          
          $(".point").on("click", function(){
            var selectedOption = $(this).data("idchange-value");
            $("#idchange").val(selectedOption);
            updateDropDown()
          });
          
          $("#idchange").on("change", function(){
            updateDropDown()
          });
          
          $(".checkbox").on("click", function(){
            updateCheckBox();
          });
          
          $(".radiobutton").on("click", function(){
            updateRadioButtons();
          });
          
          $("button").on("click", function() {
            var el = $(this);
            if (el.text() == el.data("text-swap")) {
              el.text(el.data("text-original"));
            } else {
              el.data("text-original", el.text());
              el.text(el.data("text-swap"));
            }
            updateButtons();
          });
          
          // When the page loads
          updateDropDown();
          updateCheckBox();
          updateRadioButtons();
          updateButtons();
        </script>
      </body>
    </html>
    This code has a lot of room for improvement and I'll revisit it in the next day or so, but it's late now and I wanted to give you something to go on.

    If you have any questions to what I've done, just let me know.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works like a charm! Thank you very much!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •