Displaying values from form

JavaScript
1

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 -

 $('#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 -

$('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

Hi there,

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

3

Sure, I hope jsfiddle is ok? http://jsfiddle.net/lukem13/tA3bv/1/

Let me know if you need any more info!

4

Hi there,

You could do it like this:

<!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

Works like a charm! Thank you very much!