Reputation: 1
Currently I have a function that checks for a user click on a input[type=text] (css class name applied on that column is "OE_CARD" ) column. I want to check that this textbox contains input, then allow the user to continue, and if it doesn't have input, then allow them to either type input or select another column for the related row.
The nature of the question type will automatically trigger the next row to be shown if the user clicks the OE column even without entering input. So i've added "stopImmediatePropagation()" to prevent this from occuring.
Although now, even when the user does type input, it will just fire a warning asking the user to select a column (even though the OE column now has text in it).
What am I missing?
This is my function call:
$ ( ".sq-cardsort-bucket-c5" ).on( "click", function(e) {
alert( "Handler for `click` called." );
e.stopImmediatePropagation();
setTimeout(dynamicOE,750);
} );
I have also tried the below to check for input:
$ ( ".sq-cardsort-bucket-c5" ).on( "click", function(e) {
alert( "Handler for `click` called." );
if ((.text-input).val().length > 0) {
{e.stopImmediatePropagation(); return false}
else{
{e.stopImmediatePropagation(); return true}
}
setTimeout(dynamicOE,750);
} );
XML radio question for refernce:
<radio
label="Q1"
cardsort:displayCounter="0"
shuffle="rows"
uses="cardsort.6">
<row label="r1"><span class="blueRow">Blue</span></row>
<col label="c5" open="1" openSize="25" randomize="0" ss:colClassNames="OE_CARD"> <span class="blueCol">Blue OTHER</span></col>
</radio>
Any help on what I am missing or have done wrong would be greatly appreciated. Or even a point in the right direction.
Upvotes: 0
Views: 62
Reputation: 331
When you checked for the length of the text input you did not add the element class in quotes, and also forgot to use the dollar that specifies you choose an element here (.text-input).val().length
, the updated code is $(".text-input").val().length
Upvotes: 0