Show specific div and hide others based on select tag in iframe AJAX/jQuery?

Question

Yes, I know there's a lot of good answers for this question, however, I can't seem to make/adapt the code to work in my situation. This is a big project I'm working on, to make digital worksheets. I'm trying to make certain panels visible depending on the value of a tag, however all the code I've tried I can't adapt to work with my case as the question template (where it gets submitted is based on the ?q= number) is in a iframe to save time and file size. Would it be possible to do a button to update the visible panels, or do AJAX for it whilst being in a iframe? I don't have any experience in AJAX or jQuery, and yes I've tried to lean them but they in my opinion is too complicated.

I found this answer, but it doesn't work for some reason.

Tip: If your giving me completed code (thank you!) just know that Text, Paragraph, and Mathematical all lead to div type-1

<html>  
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../assets/f.css">
<script src="../assets/fjquery.js"></script>
<script src="../assets/f.js"></script>
<script src="../assets/fm.js"></script>
</head> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>

    <label>Question
    <input type="text" placeholder="e.i Who was the discoverer of evolution?" name="q-name" required>
    </label>
    <div class="large-12 columns">
        <label>Question Type 
        <span style="color: #bbb;"> <i>Click 'Update Field' after selection.</i></span>
        <select id="qtype" name="qtype">
        <option value="2">Multiple Choice</option>
        <option value="3">Radio choice</option>
        <option value="1">Text</option>
        <option value="1">Paragraph</option>
        <option value="4">Selection Dropdown</option>
        <option value="1">Mathmatical</option>
        </select>
        </label>
        <a onClick="updateQTp()">Update Field</a> |
        <a onClick="hide()">Hide All Fields</a> 
        <p id="tester"></p>
    </div>

    <div class="large-12 columns">

    <!--TEXT, PARAGRAPH, MATH--><div id="type-1">

    <div class="panel">
        <label>Answer Type (Text, Paragraph, Mathmatical)</label>
        <input id="radio1" type="radio" name="tpm" value="simple" checked><label for="radio1">Has Simple Answer</label>
        <input id="radio2" type="radio" name="tpm" value="complex"><label for="radio2">Has Complex Answer</label>
        <input id="radio3" type="radio" name="tpm" value="human"><label for="radio3">Needs manual correction</label>
        <hr style="padding: 4; margin: 0;" />

    <label>Correct Answer (Simple Answer Only)
    <input type="text" placeholder="e.i Charles Darwin" name="abox">
    </label>

    </div>

    </div><!--MULTI CHOICE--><div id="type-2">

    <div class="panel">
        <label>Answer Type (Multiple Choice)</label>
        <ol style="list-style-type: square;">
         <li><label><input id="mc-tbox" type="checkbox" name="mc-1"> Correct</label><input id="mc-tbox" type="text" placeholder="A" name="mc-l1" ></li>
         <li><label><input id="mc-tbox" type="checkbox" name="mc-2"> Correct </label><input id="mc-tbox" type="text" placeholder="B" name="mc-l2" ></li>
         <li><label><input id="mc-tbox" type="checkbox" name="mc-3"> Correct </label><input id="mc-tbox" type="text" placeholder="C" name="mc-l3" ></li>
         <li><label><input id="mc-tbox" type="checkbox" name="mc-4"> Correct </label><input id="mc-tbox" type="text" placeholder="D" name="mc-l4" ></li>
        </ol>
    </div>

    </div><!--RADIO CHOICE--><div id="type-3">

    <div class="panel">
        <label>Answer Type (Radio Choice)</label>
        <ol style="list-style-type: circle;">
         <li><input id="rc-tbox" type="text" placeholder="A" name="rc-l1" >     </li>
         <li><input id="rc-tbox" type="text" placeholder="B" name="rc-l2" ></li>
         <li><input id="rc-tbox" type="text" placeholder="C" name="rc-l3" ></li>
         <li><input id="rc-tbox" type="text" placeholder="D" name="rc-l4" ></li>
        </ol>
        <select name="rd-crt">
        <label>Correct letter
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
        <option value="">D</option>
        </label>
        </select>
    </div>

    </div><!--DROPDOWN--><div id="type-4">

    <div class="panel">
        <label>Answer Type (Dropdown)</label>
        <ol style="list-style-type: circle;">
         <li><input id="rc-tbox" type="text" placeholder="A" name="rc-l1" ></li>
         <li><input id="rc-tbox" type="text" placeholder="B" name="rc-l2" ></li>
         <li><input id="rc-tbox" type="text" placeholder="C" name="rc-l3" ></li>
         <li><input id="rc-tbox" type="text" placeholder="D" name="rc-l4" ></li>
        </ol>
        <select name="sd-crt">
        <label>Correct letter
        <option value="">A</option>
        <option value="">B</option>
        <option value="">C</option>
        <option value="">D</option>
        </label>
        </select>

    </div>

    </div>

    </div>

    <div class="large-10 columns">
    <label>Help Text
    <input type="text" placeholder="e.i Enter a name" name="qhelp">
    </label>
    </div>
    <div class="small-5 columns">
    <label>
    <input id="useht" type="checkbox" name="useht" value="use" required checked>
    Use Help Text</label>
    <label>
    <input type="checkbox" id="showwork" name="showwork"> 'Show Work' Textarea
    </label>
    </div>
    <div class="large-12 columns">  
    <label>Public Comments<textarea cols="20" rows="2" name="pcomm"></textarea></label>
    <label>Private Comments<textarea cols="20" rows="2" name="pcommprv"></textarea></label>
    </div>

    <script>
    document.getElementById("type-1").hide();
    document.getElementById("type-2").hide();
    document.getElementById("type-3").hide();
    document.getElementById("type-4").hide();
    $('#qtype').change(function() {
    $('.my-div-class:visible').hide();
    $('#type-' + $('#qtype').val()).show();
    });
    </script>
    </html>

so you want to hide and show based on the requested view ? like hide multiple choice when simple answer panel is requested , something like that? — pritesh, Feb 15 '16 at 04:25
check here on How to communicate between iframe and the parent site-- http://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site -- http://stackoverflow.com/questions/1600488/calling-javascript-function-in-iframe — Tasos, Feb 15 '16 at 04:40

McLemore · Answer 1 · 2016-02-16T19:12:55.987

0

Do you have to send information to a server before the changes take place? Because if not you can do this using JQuery. (field = question field, new_field = field to fade in, and answer = correct answer)

$(document).on('change', "#qtype", function() {
    if ($("#qtype").val() == "1") {
            $("#type-1").fadeIn("slow");
    }

    else if ($("#qtype").val() == "2"){
            $("type-2").fadeIn("slow");

    }   

    else if ($("#qtype").val() == "3") {
            $("type-3").fadeIn("slow");
    }

    else {
           $("type-4").fadeIn("slow");
    }
});

That should work if I understand your question and concerns correctly. There might be minor problems with brackets in there.

edited Feb 16 '16 at 19:12

answered Feb 15 '16 at 04:33

McLemore

568
1
5
15

This is almost perfect, however, how would I do this for all 4 div's? Example: I select Radio Choice, then when i click update (or ajax if possible) it will show div type-3. – Jacob Jewett Feb 15 '16 at 06:42
Oh and I cant do the html hiding in php (I wish i could) as the form data is not completed at the point where the dropdown is. – Jacob Jewett Feb 22 '16 at 04:37
@JacobJewett does my answer work or is there a problem with it? – McLemore Feb 22 '16 at 04:53
Oh, when I try it, it does nothing. – Jacob Jewett Feb 23 '16 at 01:48
This is a extremely idiotic question...wheres the js console? – Jacob Jewett Feb 24 '16 at 02:29
Hit F12 and then explore until you find Console – McLemore Feb 24 '16 at 02:30
Uh, oops I forgot to post that I tried -- using JS -- to do the CSS display: none; for all of the panels then when the updateQTp() function is called it updates the selected panel with display: inline; using the switch statement, but it doesn't do anything. I can't provide to code right now as im waiting for a new network cable for my server. It only shows the panel of the value when the page is loaded, and never chenges when I click Update. – Jacob Jewett Feb 25 '16 at 00:06

Show specific div and hide others based on select tag in iframe AJAX/jQuery?

1 Answers1