CODEWITHSUNDEEP
javascripthtml
Nagendra Stack
Nagendra Stack

Reputation: 11

How to pass form data from html to URL parameter without imput tags?

HTML CODE:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../css/preloader.css">
    <script src="../js/jquery.preloader.min.js"></script>
    <script src="../js/scriptRuleEngine.js"></script>
</head>
<body ng-app ng-controller="OrderFormControllerForRE">
<header>
    <div class="container">
        <div id="branding">
            <h1><span class="highlight">Modify Rule Engine </span></h1>
        </div>

    </div>
</header>

<section class="col-md-12 col-lg-12 dateSection">
    <!--<form method="get">-->
    <table id="ruleEngine" class="table table-sm table-inverse table-responsive table-striped table-bordered"
           cellpadding="20" width="100%">
        <thead>
        <tr>
            <th>Rule Name</th>
            <th>Priority</th>
        </tr>
        </thead>
        <tfoot>
        <tr ng-repeat="(key,value) in ruleEngineJSON">
            <td>{{key}}</td>
            <td><select>
                <option selected value="{{value}}">{{value}}</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select></td>
        </tr>
        </tfoot>
    </table>
    <span class="submitButton">
        <button class='btn btn-primary' onclick="updateRuleEngine()">Update Rule Engine </button>
    </span>
    <!--</form>-->

</section>

<footer>
    <p>Salesforce Free Code Review For Syngenta, Copyright &copy; 2017</p>
    <p>Developed By - ****</p>
</footer>
</body>
</html>

Controller : 

@RequestMapping(value = "/getRuleEngine", method = RequestMethod.GET)
    public String getRuleEngine(@RequestParam Map<String, String> mapOfRuleAndPriority) throws IOException {

        Gson gson = new GsonBuilder().create();
        Map<String, String> ruleEngine;
        try {
            ruleEngine = ViewAndModifyRuleEngine.modify(mapOfRuleAndPriority);
        } catch (Exception e) {
            return gson.toJson(e.getMessage());
        }

        if (!ruleEngine.isEmpty()) {
            return gson.toJson(ruleEngine);
        }
        return gson.toJson(ruleEngine);

    }

JavaScript : 

function OrderFormControllerForRE($scope, $http) {
        var urlString = window.location.href;
        var urlParams = parseURLParams(urlString);

        var jsonData = $.ajax({
            url: "http://********:8989/getRuleEngine",
            dataType: "json",
            crossDomain: true,
            async: false
        }).responseText;

        if (!jsonData || jsonData === "") {
                window.location.pathname = "../html/noDataFetched.html";
        }

        var parsed = JSON.parse(jsonData);

        if (parsed.error) {
            window.location.pathname = "../html/error.html";
        }

        $scope.ruleEngineJSON = parsed;
}

function navigateRuleEngine() {
    window.location.pathname = "../html/modifyRuleEngine.html";
}

function updateRuleEngine() {
    window.location.pathname = "../html/modifyRuleEngine.html";
}

function parseURLParams(url) {
    var queryStart = url.indexOf("?") + 1,
        queryEnd = url.indexOf("#") + 1 || url.length + 1,
        query = url.slice(queryStart, queryEnd - 1),
        pairs = query.replace(/\+/g, " ").split("&"),
        parms = {}, i, n, v, nv;

    if (query === url || query === "") return;

    for (i = 0; i < pairs.length; i++) {
        nv = pairs[i].split("=", 2);
        n = decodeURIComponent(nv[0]);
        v = decodeURIComponent(nv[1]);

        if (!parms.hasOwnProperty(n)) parms[n] = [];
        parms[n].push(nv.length === 2 ? v : null);
    }
    return parms;
}

After changing the values on the html table from the UI I need to pass the key value pair to the url parameters, so that the values are updated, for eg: **********:8989/getRuleEngine?ApexXSSFromURLParam=2. The data on the html table also comes from the same controller. Hence the input tag cannot be used here.

Is there a way I can achieve this?

Update 1

As I am using angular js, I found out there is a way to achieve this , I converted my html snippet to 

<section class="col-md-12 col-lg-12 dateSection">
    <!--<form method="get">-->
    <table id="ruleEngine" class="table table-sm table-inverse table-responsive table-striped table-bordered"
           cellpadding="20" width="100%">
        <thead>
        <tr>
            <th>Rule Name</th>
            <th>Priority</th>
            <th></th>
        </tr>
        </thead>
        <tfoot>
        <tr ng-repeat="(key,value) in ruleEngineJSON">
            <td>{{key}}</td>
            <td>{{value}}</td>
            <td><button type="button" class="btn btn-default"
                        ng-click="modifyPriority(key)">Modify</button></td>
        </tr>
        </tfoot>
    </table>
    <!--</form>-->

</section>

JS:

    $scope.ruleName = "";
    $scope.priority = "";
    $scope.modifyPriority = function(ruleName) {
            $scope.ruleName = ruleName;
            $scope.priority = $scope.ruleEngineJSON[ruleName];
    };

But I cannot figure out how to change the value in the ng-repeat (key,value) in ruleEngineJSON" section when I click modify, the value section should be editable. How can I do this?

Upvotes: 1

Views: 1788

Answers (1)

Val
Val

Reputation: 196

There are two ways to do what you need. First, whenever you do you AJAX or HTTP call to your server, parse a DOM element you need to read data from and append it as a query parameter.

As you haven't provided code that mutates HTML, here's an example code that would do exactly what you need but use some fake '.selector' class to get data from.

    var dataFromHTML = $('.selector').html();

    var jsonData = $.ajax({
        url: "http://********:8989/getRuleEngine?PARAMETER=" + dataFromHTML,
        dataType: "json",
        crossDomain: true,
        async: false
    }).responseText;

Then you can Access your PARAMETER's value in your Java Controller.

The second way is to keep track of all the data in your javaScript to avoid DOM parsing and use the same Query parameter to pass the value to Java controller.

Upvotes: 1

Related Questions