Hi, I am a new SAS user. I was tasked to create a form to allow users to either submit their queries through text or filter data variables. The expected result will be for the form to display the 2 radio buttons first before either a text field comes out if the "Text" radio button is chosen, or a dropdown list comes out if the "Table" radio button is chosen. However, everything came out at once since the Javascript functions are not being displayed. This was not the case when I did the code for the form on Visual Studio as everything is being displayed. My SAS code is as shown below: proc sql;
create table table_list as select * from dictionary.tables where
LIBNAME='PUBLIC';
quit;
data _null_;
set table_list end=alldone;
file _webout;
if _n_=1 then
do;
thissrv="&_URL";
thispgm="&_program";
put '<html>';
put '<head>';
put '<meta name="viewport" content="width=device-width,initial-scale=1.0">';
put '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">';
put '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>';
put '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>';
put '</head>';
put '<body onload="inputQuery()">';
put '<h3>Query and Suppress Data</h3>';
put '<FORM id="f1" ACTION="' thissrv +(-1) '" method=get target="frame2">';
put '<input type="hidden" name="_program" value="' thispgm +(-1) '">';
put '<input type="hidden" name=reqtype value="create_input">';
put '<input type="hidden" name=_ODSDEST value="html">';
put '<div class="form-group row justify-content-center">';
put '<div class="col-sm-6">';
put '<div class="form-check form-check-inline">';
put '<input type="radio" class="form-check-input" id="text" name="query" value="Text" onclick="showInput()" />';
put '<label class="form-check-label" for="text">Text</label>';
put '</div>';
put '<div class="form-check form-check-inline">';
put '<input type="radio" class="form-check-input" id="table" name="query" value="Table" onclick="showInput()" />';
put '<label class="form-check-label" for="text">Table</label>';
put '</div>';
put '</div>';
put '</div>';
put '<script>
function inputQuery() {
document.getElementById("query_text").style.display = "none";
document.getElementById("subtext").style.display = "none";
document.getElementById("query_table").style.display = "none";
document.getElementById("subtable").style.display = "none";
document.getElementById("submit").style.display = "none";
document.getElementById("reset").style.display = "none";
document.getElementById("refresh").style.display = "none";
}
function showInput() {
var result = document.querySelector("input[name="query"]:checked").value;
if (result == "Text") {
document.getElementById("query_text").style.display = "block";
document.getElementById("subtext").style.display = "block";
document.getElementById("query_table").style.display = "none";
document.getElementById("subtable").style.display = "none";
document.getElementById("submit").style.display = "block";
document.getElementById("reset").style.display = "block";
document.getElementById("refresh").style.display = "none";
}
else if (result == "Table") {
document.getElementById("query_text").style.display = "none";
document.getElementById("subtext").style.display = "none";
document.getElementById("query_table").style.display = "block";
document.getElementById("subtable").style.display = "block";
document.getElementById("submit").style.display = "none";
document.getElementById("reset").style.display = "none";
document.getElementById("refresh").style.display = "block";
}
}
</script>';
put '<div class="form-group row justify-content-center">';
put '<label class="control-label col-sm-2" id="subtext">Submit Query:</label>';
put '<div class="col-sm-6">';
put '<textarea name="query_text" id="query_text" value="" cols="30" rows="5" placeholder="Enter Query" class="form-control"></textarea>';
put '</div>';
put '</div>';
put '<div class="form-group row justify-content-center b4-form-inline">';
put '<div class="text-left">';
put '<button id="submit" formaction="' thissrv +(-1)
'" formtarget="frame3" type="submit">Submit Query</button>';
put '</div>';
put '<div class="text-right">';
put '<input id="reset" type="reset" value="Reset">';
put '</div>';
put '</div>';
put'<br>';
put '<FORM id="f2" ACTION="' thissrv +(-1) '" method=get target="frame2">';
put '<input type="hidden" name="_program" value="' thispgm +(-1) '">';
put '<input type="hidden" name=reqtype value="create_input">';
put '<div class="form-group row justify-content-center">';
put '<label class="control-label col-sm-2" id="subtable">Select a Table:</label>';
put '<br>';
put '<div class="col-sm-4">';
put '<select class="form-control" id="query_table">';
put '<OPTION VALUE="" selected></option>';
put '<OPTION VALUE="SUPPRESSED_DATA">SUPPRESSED_DATA</option>';
put '<OPTION VALUE="PREPARATION_DATA">PREPARATION_DATA</option>';
end;
if alldone then
do;
put '</select>';
put '</div>';
put '</div>';
put '<div class="form-group row justify-content-center">';
put '<div class="col-sm-4">';
put '<input id="refresh" type="submit" value="Refresh Variable List">';
put '</div>';
put '</div>';
put'<br>';
put '</form>';
put '</body>';
put '</html>';
end;
run; The output screen if running from SAS: If my Javascript codes are being run, it should look like this: Is it better if I use SAS programming language to solve this problem? Or if there is any other way to import my Javascript code? I cannot link this to a new embedded form because my full SAS code requires 2 HTML codes to run properly. Can anyone tell me a way to solve this? Thanks.
... View more
