#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    16
    Rep Power
    0

    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 change 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
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Can you paste your applicable HTML, along with your JS; so your code's intentions can be accessed, a little better? Although, your post is a little vague; I still can make a general assumption of what your trying to do, but would like to take a closer look @ your code; to know for sure.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by web_loone08
    Can you paste your applicable HTML, along with your JS; so your code's intentions can be accessed, a little better? Although, your post is a little vague; I still can make a general assumption of what your trying to do, but would like to take a closer look @ your code; to know for sure.
    Sure, I hope jsfiddle is ok? http://jsfiddle.net/lukem13/tA3bv/1/

    Let me know if you need any more info!
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Am I missing where you have the span at, in your code; because I am not seeing it? So, let me see; if I am correct..., you are wanting to display the values of all of your selected form elements, in a span... is that right?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by web_loone08
    Am I missing where you have the span at, in your code; because I am not seeing it? So, let me see; if I am correct..., you are wanting to display the values of all of your selected form elements, in a span... is that right?
    The span is located at the bottom -
    Code:
    <h3>Results</h3>
    <p>Checkboxes checked = <span id="txt1"></span></p><br />
    <p>Radio button checked = <span id="txt2"></span></p><br />
    <p>Drop down menu option = <span id="txt3"></span></p><br />
    <p>Add buttons selected = <span id="txt4"></span></p>
    Yes, that is correct.
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Ok, here is how you would go about making this work:
    Code:
    <style>
    .add-btn {cursor:pointer;}
    .point {cursor:pointer;}
    </style>
    
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
    
    $("document").ready(function(){
    
    $("#point_links li a").click(function(){
       $("#idchange").val($(this).html().split("Change to ")[1]);
       $("#idchange").find("option:selected").text();
       $('#txt3').text($("#idchange").find("option:selected").text());
    });
    
    $("#idchange").change(function(){
       $('#txt3').text($("#idchange").find("option:selected").text());
    });
    
    $("input:checkbox").click(function(){
      $("#txt1").html("");
     $("input:checkbox:checked").each(function(e){
       if(e>0){
        $("#txt1").append(", " + $(this).val());
       }
       else {
        $("#txt1").append($(this).val());
       }
     });
    });
    
    
    $("input:radio").click(function(){
       $("#txt2").html($(this).val());
    });
    
    
    });
    
    </script>
    
    <ul id="point_links">
        <li><a class="point">Change to select1</a></li>
        <li> <a class="point">Change to select2</a></li>
    </ul>
    
    
    
    <label class="check-text"><input type="checkbox" name="checkbox1" value="1" /> check1</label>
    
    <label class="check-text"><input type="checkbox" name="checkbox2" value="2" /> check2</label>
    
    <select id="idchange">
      <option value="select1" label="Select1">selction1</option>
      <option value="select2" label="Select2">selection2</option>
    </select>
    
    <label><input id="rbtn" type="radio" name="checkbox" value="150"/> 150</label>
    <label><input type="radio" name="checkbox" value="250" checked/> 250</label>
    
    <a class="btn add-btn"><span>+ Add</span><span style="display:none">- Added!</span></a>
    <a class="btn add-btn"><span>+ Add</span><span style="display:none">- Added!</span></a><br /><br />
    
    
    <p>Checkboxes checked = <span id="txt1"></span></p><br />
    <p>Radio button checked = <span id="txt2"></span></p><br />
    <p>Drop down menu option = <span id="txt3"></span></p><br />
    <p>Add buttons selected = <span id="txt4"></span></p>
    Now..., what are you wanting to do with the "+ Add!" and the "- Add!" links?
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by web_loone08
    Now..., what are you wanting to do with the "+ Add!" and the "- Add!" links?
    Wow, thank you! It works perfectly!

    On my website i will have several features which the user can add - they will select those features by click the "+ Add" button which will then become "- Added!" once clicked.

    Once the button displays "- Added!" the added feature will be shown in the result summary (in the span tag).

    Sorry if i've explained that terribly but hopefully you understand?

    Thanks
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    So..., what you would need to do is specify a specific feature, in your "+ Add!" links. Then create an object to push() each of your features into an object and display every key of that object, with the each() API; in your last span ("#txt4"). Then, when end user removes a certain feature; iterate through each of your object's keys; with a for() loop; in an if...else condition (until your, if... else condition finds the instance of the feature, that is to be removed); then pop(), that specific feature's object key. I will let you give this a try; since I got you started - good luck .
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    16
    Rep Power
    0
    Originally Posted by web_loone08
    So..., what you would need to do is specify a specific feature, in your "+ Add!" links. Then create an object to push() each of your features into an object and display every key of that object, with the each() API; in your last span ("#txt4"). Then, when end user removes a certain feature; iterate through each of your object's keys; with a for() loop; in an if...else condition (until your, if... else condition finds the instance of the feature, that is to be removed); then pop(), that specific feature's object key. I will let you give this a try; since I got you started - good luck .
    Great, I did it! Thank you!

IMN logo majestic logo threadwatch logo seochat tools logo