scala.js form processing in client / access to form on scala.js client

Question

I want submit a form and want to show the user the process with spinner and reload the new information.

@JSExport
  def addToCart(form: html.Form): Unit = {
    form.onsubmit = (e: dom.Event) => {
      e.preventDefault()
    }
    val waitSpan = span(
      `class` := Waiting.glyphIconWaitClass
    )
    val waiting = form.getElementsByTagName("button").head.appendChild(waitSpan.render)
    dom.window.alert(JSON.stringify( form.elements.namedItem("quantity") ))
    Ajax.InputData
    Ajax.post(form.action,withCredentials = true).map{q =>
      //
    }
  }

I have no access to form data. Also I cannot execute an ajax call to proof the form and execute it. I have found no way. Someone has an idea?

Answer 1

jQuery helps. I used them now to serialize the form. But now I have no longer the ability of play forms with bindOfRequest()

val jForm = $("#"+form.id)
val serialized = jForm.serialize()
Ajax.post(s"/js/api/form/${UUID.randomUUID().toString}",withCredentials = false,timeout = 12000,data = serialized,headers = Map("X-CSRFToken"->"nocheck","Csrf-Token"->"nocheck"))

I get always:

occurrence%5B%5D=400g&quantity=1&csrfToken=c1606da9a261a7f3284518d4f1fd63eaa8bbb59e-1483472204854-1c5af366c62520883474c160

But now I don´t know what I have to do. Sorry.

def executeAddToCartForm(articleId: UUID) = silhouette.UserAwareAction.async{implicit req =>
    val form = complexCartForm.bindFromRequest()
    Try(form.get) match {
      case Success((i,seq)) => println("article: " + i)
      case _ => println(form.errors.mkString + " " + req.body.asText + " " + URLDecoder.decode(req.body.asText.get,"UTF-8"))
    }
    Future.successful(Ok("danke"))
  }

Always get failure :( I will have a look at react.

ADDED

Sometimes I need more sleep!

Ajax.post(
      url = form.action,
      withCredentials = true,
      timeout = 12000,
      data = serialized,
      headers = Map("Content-Type" -> "application/x-www-form-urlencoded")
    )

with this: headers = Map("Content-Type" -> "application/x-www-form-urlencoded") I can use the bindFromRequest() as usually :)

Coffee I need more