Search code examples
javascriptrshinyshinyjs

R shiny: how to clear an input field with a default value using shinyjs?


I'm trying to use the shinyjs package to clear and disable an input field that has a default value in my shiny app. The clear/disable button seems to work. However, when I click submit, the default value is still being submitted (see picture below). How can I make it submit a NULL or an empty string?

enter image description here

library(shinyjs)
library(shiny)

# this is supposed to change the input value to null
jsCode <- 'shinyjs.clear_input = function(params){
    var defaultParams = {
    input_id : null
  };
  params = shinyjs.getParams(params, defaultParams);
  var el = $("#" + params.input_id);
    el.val(null);}'

  shinyApp(

    ui = fluidPage(
      useShinyjs(),  
      extendShinyjs(text = jsCode, functions = c("clear_input")),
      textInput("input",  label = "input", value = "default text"),
      actionButton("clear", label = "clear/disable"),
      actionButton("submit", "submit"),
      tags$div(id="result")
      ),
    server = function(input, output) {
      
      observeEvent(input$clear, {
        js$clear_input("input")
        disable("input")
      })

      observeEvent(input$submit, {
        insertUI("#result", ui=renderText(input$input))
      })
    }
  )

Solution

  • Personally, I am not very comfortable with javascript so I try to avoid as much as possible and do it in R. You can use updateTextInput to update the values in textInput.

    library(shiny)
    library(shinyjs)
    
    shinyApp(
      ui = fluidPage(
        useShinyjs(),
        textInput("input",  label = "input", value = "default text"),
        actionButton("clear", label = "clear/disable"),
        actionButton("submit", "submit"),
        tags$div(id="result")
      ),
      server = function(input, output, session) {
        
        observeEvent(input$clear, {
          updateTextInput(session, "input", value = "")
          disable("input")
        })
        
        observeEvent(input$submit, {
          insertUI("#result", ui=renderText(input$input))
        })
      }
    )
    

    enter image description here