Changing from content depending on a select list

Squiz Matrix Support
1

Hi all,

 

I've been tasked with trying to find out whether I can create a select list in a form, and once one of the options is selected, the remainder of the form is changed to reflect the selection. I can't see any options to do this in Squiz and I'm not sure how I would go about it with JavaScript. 

 

Any help would be very much appreciated!

 

Many thanks.

2

Hey again,

 

I also need to check the last character of a text field to make sure it is within a range of characters, e.g. a-k 

 

I've tried "Must end with" but it only accepts 1 character, and trying to create multiple rules with multiple characters just makes the system argumentative.

 

Many thanks, once again.

3

I do this quite often, but yes, it requires javascript.

 

What you need to do it to conditionally hide or show content based on the users selection. Take a look at this example:

 

http://jsfiddle.net/juKr7/

4

Wow thanks Nic, that looks really simple, is it as easy to integrate with Squiz? There doesn't seem to be any way to access underlying CMS HTML code for forms and I'm not too clued up on the whole keywords business :)

 

Wondering how I would implement this through the CMS itself.

5

Wow thanks Nic, that looks really simple, is it as easy to integrate with Squiz? There doesn't seem to be any way to access underlying CMS HTML code for forms and I'm not too clued up on the whole keywords business :)

 

Absolutely there is a way to do it. You need to customize the Page Contents, then add your own HTML and keywords for the fields, labels, etc.

6

If you are nesting (multiple?) forms within another page's contents, how would this affect the submission of forms in regards to caching? Would there be any impact with submission if sending the data via AJAX and displaying the response so that the 'thank you' message doesn't take the user to a new URL?

7

If you are nesting (multiple?) forms within another page's contents, how would this affect the submission of forms in regards to caching? Would there be any impact with submission if sending the data via AJAX and displaying the response so that the 'thank you' message doesn't take the user to a new URL?

 

Generally nesting a Custom Form into another page doesn't work because of caching.

 

But, like you mentioned there are some other ways of doing this such as using ajax to post the values to the custom form URL.

8

The only problem I have is that if I don't nest the custom form within a standard page there is no way to apply the designs to the form that I would usually do through the standard page.

9

Hey Nic, this is what I currently have, there doesn't seem to be anything happen when I select an option:

%form_errors% 
<div>
<fieldset>
%form_contents%
<select id="options">
<option value="">Choose Test</option>
<option value="t1">Test1</option>
<option value="t2">Test2</option>
</select>
<div id="Test1" style="display: none;">
%section_contents_134868%
</div>
<div id="Test2" style="display: none;">
%section_contents_134869%
</div>
</fieldset>
</div>



<script>
$('#options').change(function () {

var val = $(this).val();
if (val == 't1') {
    $('#test1').show();
    $('#test2').hide();
} else {
    $('#test1').hide();
    $('#test2').show();
}
});
</script>

I've put the scripts and style into the HTML as making javascripts and CS sheets on this system can be a bit troublesome for a simple test.

 

Many thanks

10

Don't worry, I didn't notice you had linked Jquery. I've amended so this is my new code (Sorry for the dumps):

<script src="./?a=130737"></script>
<script src="./?a=130736"></script>

<div class=“error”>%form_errors%</div>


<div>

<fieldset>%form_contents%</fieldset>

</div>


<fieldset>

<select id=“options”>

<option value="">Choose Test</option>

<option value=“t1”>test1</option>

<option value=“t2”>test2</option>

</select>

<div id=“test1” style=“display: none;”>

<fieldset>


<h3>%section_title_134868%</h3>

%section_contents_134868%</fieldset>

</div>

<div id=“test2” style=“display: none;”>

<fieldset>


<h3>%section_title_134869%</h3>

%section_contents_134869%</fieldset>

</div>

</fieldset>


<script>

$(’#options’).change(function() {


    var val = $(this).val();
    if (val == 't1') {
        $('#test1').show();
        $('#test2').hide();
    } else {
        $('#test1').hide();
        $('#test2').show();
    }
});



</script>

The problem I have now, is that the titles show, but the section contents never shows. Sorry for all this :D Just really want to figure out how I can make this possible.

11

The problem I have now, is that the titles show, but the section contents never shows. Sorry for all this :D Just really want to figure out how I can make this possible.

 

You need to make sure to wrap your jQuery code with the jQuery ready method:

 

$(function() {
   // put your code here
});

jsFiddle just includes this for you, so that is why you didn't see it...

12

The only problem I have is that if I don't nest the custom form within a standard page there is no way to apply the designs to the form that I would usually do through the standard page.

 

Not sure why you mean by this. I don't see any reason why a Standard Page would be required. Can you explain more? I am sure this isn't needed.

13

I've created a custom form, but the website I am developing on has 3 or more custom design, 1 with just 1 column, one with 2, one with 3 etc (different variants). I tried changing the designs for the custom form and it wouldn't allow me, so I tried looking for the web path for the custom form and there is no option. So the only thing I could do was create a standard page, and nest the custom form in there. 

 

What worries me is that in a previous post I think somebody mentioned not being able to retrieve the data from the form if it was nested on a standard page. I know nothing about AJAX or how to use it with Squiz.

14

Hey Nic, I found something troublesome when hiding the forms. It's fine that they're hidden from view, but when a user goes to submit, if the hidden form has required fields, then the form still asks for these to be filled in. Is there any way (Other than removing all required fields (which could be dangerous) that we can disable these forms from being taken into account when the entire form is submitted?

 

Many thanks,

Dave

15

Hey Nic, I found something troublesome when hiding the forms. It's fine that they're hidden from view, but when a user goes to submit, if the hidden form has required fields, then the form still asks for these to be filled in. Is there any way (Other than removing all required fields (which could be dangerous) that we can disable these forms from being taken into account when the entire form is submitted?

 

Yes, you can make the field required, but then add a Condition that will check if the answer of the Select field matches a certain value.

16

I've created a custom form, but the website I am developing on has 3 or more custom design, 1 with just 1 column, one with 2, one with 3 etc (different variants). I tried changing the designs for the custom form and it wouldn't allow me, so I tried looking for the web path for the custom form and there is no option. So the only thing I could do was create a standard page, and nest the custom form in there. 

 

What worries me is that in a previous post I think somebody mentioned not being able to retrieve the data from the form if it was nested on a standard page. I know nothing about AJAX or how to use it with Squiz.

 

It sounds like your Custom Form is placed in a location on the site that doesn't have webpaths. You need to move it to where you created that Standard Page that it was nested in so that it can have its own webpath rather than requiring nesting.

 

Yes, you need to be very careful nesting Custom Forms into Standard Pages, not a good idea.

 

If you need me to look at your system, just send me a PM or www.zedsaid.com/contact

17

How would I go about changing a form items required status using keywords? You've already shown me how to hide items depending on the select option, so I could use that same code, I'm just not so hot on the keyword manipulation.

18

How would I go about changing a form items required status using keywords? You've already shown me how to hide items depending on the select option, so I could use that same code, I'm just not so hot on the keyword manipulation.

 

What do you mean "using keywords"? Did you make the field as required and then add a condition?

19

I have the fields marked as required, but I have no idea how to add a condition.

20

I have the fields marked as required, but I have no idea how to add a condition.

 

What version of Matrix are you on?

 

Here is a condition I created:

 

 

Do you see the Condition checkbox?

 

This condition that I created says "If the answer of the Housing Plan field does not match the word Residence Hall, then this field is required".