jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by mim 6 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Evaluation a GET request on submit Posts

August 9, 2018 at 9:28 am Evaluation a GET request on submit #101462

mim

Participant

Hi,
my objective is to get hold of the parameters attached to a GET request at submit of a form.
Based on the demo ‘Form Submit’ and some extra code to extract the parameters form the URL (thanks to google…) the following code resulted. When I add “_blank” to sampleForm.jqxForm('submit',window.location.href, 'GET'); the URL with attached parameters can be seen. But I don’t want to open up a new page. However, the function getUrl utilises window.location.href, but this url does not cover the attached parameters.
Where I am wrong?
Many thx for your help/advice!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="JavaScript Form, HTML Form, jQuery Forms widget" /> 
    <meta name="description" content="Example of the jQuery Form and submitting the form data via GET and POST methods."/>
    <title id='Description'>jQuery Form Submit function</title>
    <link rel="stylesheet" href="js/jquery/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="js/jquery/jqwidgets/styles/jqx.office.css" type="text/css" />
    <script type="text/javascript" src="js/jquery/scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="js/jquery/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="js/jquery/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="js/jquery/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="js/jquery/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="js/jquery/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="js/jquery/jqwidgets/jqxform.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var template = [
                {
                    bind: 'textBoxValue',
                    type: 'text',
                    label: 'Text input',
                    labelPosition: 'left',
                    labelWidth: '30%',
                    align: 'left',
                    width: '250px',
                    required: true
                },

                {
                    bind: 'dropdownValue',
                    type: 'option',
                    label: 'Drop down list',
                    labelPosition: 'left',
                    labelWidth: '30%',
                    align: 'left',
                    width: '250px',
                    required: true,
                    component: 'jqxDropDownList',
                    options: [
                        { label: 'Option 1', value: 'value1' },
                        { label: 'Option 2', value: 'value2' },
                        { label: 'Option 3', value: 'value3' }
                    ]
                },
                {
                    type: 'blank',
                    rowHeight: '20px',
                },
                {
                    name: 'submitButton',
                    type: 'button',
                    text: 'Submit Form Data',
                    align: 'right',
                    padding: {left: 0, top: 5, bottom: 5, right: 40}
                }
            ];
			
            var sampleValue = {
                'textBoxValue': 'text box value',
                'dropdownValue': 'value3',
            };
			
            var sampleForm = $('#sampleForm');
            sampleForm.jqxForm({
                template: template,
                value: sampleValue,
                padding: { left: 10, top: 10, right: 0, bottom: 10 }
            });
            var btn = sampleForm.jqxForm('getComponentByName', 'submitButton');
            btn.on('click', function () {
                sampleForm.jqxForm('submit',window.location.href, 'GET');
			
				var text = getUrlVars()["textBoxValue"];
                var dropdown = getUrlVars()["dropdownValue"];
				console.log( text );
				console.log( dropdown);
				
            });
        });
	
		function getUrlVars() {
  			  var vars = {};
    		  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        	           vars[key] = value;
   		           });
			 return vars;
       }
		
    </script>
</head>
<body class='default'>
    <div id='sampleForm' style="width: 420px; height: auto;"></div>   
</body>
</html>

August 9, 2018 at 1:13 pm Evaluation a GET request on submit #101466

Admir Hodžić

Participant

I am not sure that I get your question clearly ,
But If you want to stay on page after submit you probably do not want to “submit” it.

Why you do not send your form data in $.ajax request.
There you can stay on page whit all params loaded.
Here is how my snipet of sending data from form to server

function postPovartRobe() {
    var formData = $('#formaPovrataSpn').val();

    formData.arts = arts;
    formData.skls = sklData;
    formData.tagId = docId;
    
    $.ajax({
        url: "../../spn/VratiRobu",
        type: "POST",
        data: formData,
        dataType: "json",
        success: function (data) {
            if (data.valid) {
                $("#spnPovratProzor").jqxWindow('close');
                $("#gridSpnSkl").jqxGrid('updatebounddata', 'cells');
            }
            else {
                $("#errorPovratSpan").html(data.msg).show();
            }

        },
        error: function (jqXHR, textStatus, errorThrown) {
            $("#errorPovratSpan").html("sistemska greška " + textStatus + " " + errorThrown).show();

        }
    });
};

August 9, 2018 at 1:48 pm Evaluation a GET request on submit #101467

mim

Participant

well, many ways lead obviously to Rome ;-)…and many thanks for providing you code snippet!
Indeed, I want to stay onto the page after submit. At submit and extraction of the GET values I would like to publish MQTT messages towards an ARDUINO platform ( this is not provided in the code to reduce post length).

Honestly, I am not so familiar with Web programming, and thus, dealing with AJAX is an additional grade of complexity for me..now.
So I would like firstly to stick closely to the the demo examples which at present are not so well documented regarding the form widget.

I googled a bit and window.location.search should hold the string after the question mark…but when using that with console.log(window.location.search)

So the question remains, which is the variable/function that holds after submit the url with the GET parameters?

Kr,
Michael

August 9, 2018 at 2:10 pm Evaluation a GET request on submit #101470

Admir Hodžić

Participant

Another thing, I am not sure taht is it but on your code you are writing code after
sampleForm.jqxForm('submit',window.location.href, 'GET');
As I understand function submit,
Once when you call it you are refreshing browser and there is no js code after taht.
Do you get execute lines

var text = getUrlVars()["textBoxValue"];
                var dropdown = getUrlVars()["dropdownValue"];
				console.log( text );
				console.log( dropdown);

at all ?

When I try to submit from using builtin form sumbit I am unable do continue executing js code after submit.

August 9, 2018 at 3:18 pm Evaluation a GET request on submit #101471

mim

Participant

I have validate code execution by the following code…and it works ..meaning console.log( test ); printed the string defined in function tstVar,

    btn.on('click', function () {
              sampleForm.jqxForm('submit',window.location.href,'GET');
					console.log(window.location.search) ;
				var test = tstVar();
				console.log( test );
				var text = getUrlVars()["textBoxValue"];
                var dropdown = getUrlVars()["dropdownValue"];
				console.log( text );
				console.log( dropdown);
				
            });
        });
	
			function tstVar() {
				var t = "dfsdf";
				return t;
			}

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.