0

It is reasonable to let unchecked box based on user's choice, but the unchecked box always causes form error in the server side, 

def config(path: String) = Action { implicit request =>
    configForm.bindFromRequest.fold(
      formWithErrors => { // if checkedbox is not checked, the action in the server side will match this line
        BadRequest(formWithErrors.toString)
      },
      configs => {
        . ....})}

The configForm:

val configForm = Form(
    mapping(
      "k" -> optional(number),
      "gc" -> optional(text),
      "doStateCutOff" -> optional(text),
      "stateCutoff" -> number(),
       "doTimeCutOff" -> optional(text),
      "timeCutoff" -> number(), 
      "doRegex" -> optional(text),
      "regex" -> nonEmptyText,
      "dochecklist" -> optional(text), 

      "pl" -> mapping(

       "fs" -> checked("File System"),
      "fsh" -> nonEmptyText,

      "location" -> checked("Location"),
      "locationh" -> nonEmptyText,

      "pic" -> checked("Picture"),
      "pich" -> nonEmptyText,

      "deviceid" -> checked("DeviceID"),
      "deviceidh" -> nonEmptyText,

      "network" -> checked("Network"),
      "networkh" -> nonEmptyText
      )
      { (_, fs, _, loc, _, pic, _, dev, _, ntw ) => PropertyCheckList(fs,  loc,  pic, dev, ntw)  }
       { pl => Some(true, pl.filesystem, true, pl.location, true, pl.picture,true, pl.deviceid, true, pl.network)} 
          ) 
    { 
      (k, gc, doStateCutOff, stateCutoff, doTimeCutoff, timeCutoff,//verbose, 
          doRegex, regex, dochecklist,  
          propertyList ) 
      => { 
         Configs(k, gc, doStateCutOff, stateCutoff, doTimeCutoff, timeCutoff,
             doRegex, regex, dochecklist,  
             propertyList
             ) } 
      }

    { 
      configs => { 

        Some(configs.k, configs.gc, configs.doStateCutOff, configs.stateCutoff, configs.doTimeCutoff, configs.timeCutoff, 
            configs.doRegex, configs.regex, configs.dochecklist,  
          configs.propertyList ) 
      }
    } 
      )

Then I thought up a workaround that just change an attached input text box to checkbox, whenever checkbox is clicked, then I flip the vlaues in the inputtext box, and set checkbox always true so that the server will not complain.

Then the question is that, no matter what I tried to based on the answer Setting "checked" for a checkbox with jQuery? it is just not working!

Does the checkbox's value can only be set by the server side?????

In the form:

  @checkbox(
            configForm("fs"), 
            '_id -> "fs",
            '_label -> "File System", 
            '_showConstraints -> false
        )

   @inputText(  configForm("fsh"), 
                '_id -> "fsh",
              '_showConstraints -> false
         )

In the script:

I tried to test the set checkedbox value (when init the form in the sever side, I set the checkbox initial value to be false):

 <script>
        $(document).ready(function (){ 

       var curO = $("#fs").is(":checked");
                if(!curO) {
                  alert(!curO) // true
                  $("#fs").attr('checked', 'checked'); // prop does not work too.. 
                   alert($("#fs").is(":checked")); // still false
                  }

and in the checkbox event function:

$("#fs").onchange(function(){
                var curO = $("#fs").is(":checked");
                if(!curO) {
                  $(this).attr("checked", !curO);
                  }

                var curInput = $("#fsh").val();
                if(curInput == "true"){
                    $("#fsh").val("false") ; 
                }else {
                $("#fsh").val("true") ; 
                }

Thanks for any hint!!!

Community
  • 1
  • 1
monica
  • 1,035
  • 1
  • 9
  • 21
  • Would you please post your code about checkbox? – OQJF Apr 15 '13 at 07:06
  • Are you setting the "fs" field as required on your form? I would guess that might be the problem since it wouldn't be included in the posted data for an unchecked box. If not then what is the error you were getting? You shouldn't need this workaround. – estmatic Apr 16 '13 at 19:23
  • @estmatic if the checkedbox is not checked, the server side's matching line is updated. – monica Apr 16 '13 at 20:10
  • Right, that's what you should be trying to fix, not the workaround. Maybe post the code for your configForm `Form` class. – estmatic Apr 16 '13 at 20:52
  • @estmatic I further updated with configForm. Thanks for digging to the original problem first. – monica Apr 16 '13 at 21:05

2 Answers2

2

Then I thought up a workaround that just change an attached input text box to checkbox, whenever checkbox is clicked,

If you mean change the type attribute of an <input> element after it is created and inserted into the document, be aware that does not work in IE 6/7/8 if you have to support them. You might want to create both and hide/remove as appropriate.

$("#fs").attr('checked', 'checked'); // prop does not work too..

Did you try this?

$("#fs").prop('checked', true);

For toggling the checkbox,

  var curO = $("#fs").is(":checked");
  if(!curO) {
    $(this).attr("checked", !curO);
  }

This block of code can be replaced with:

this.checked = !this.checked;

although if you wanted to use jQuery (not needed here) you could use:

$(this).prop("checked", !this.checked);

Dave Methvin
  • 1,458
  • 10
  • 12
  • Thanks for the response first. and I changed to use `prop`, like `$(this).prop("checked", true);` to always check the checkbox, it still can not set the unchecked checkbox to be checked. I think it is some problem related to Play Framework... – monica Apr 16 '13 at 18:39
1

Try declaring your fs field as boolean on your form class. I'm not terribly familiar with Scala, but I think the checked(...) is what's making the field required and that's why your form submit was failing when the checkbox wasn't checked.

val configForm = Form(
  ...
  "fs" -> boolean,
  ...
}
estmatic
  • 3,449
  • 1
  • 19
  • 28