CODEWITHSUNDEEP
jquery
ankur jadiya
ankur jadiya

Reputation: 137

prevent URL change on form submission using jquery submit() function

Hi I have written a jquery code where I am submitting the form using jquery submit() function on click of button . But as the form is submitting Url is getting changed I don't want my url to be changed, I dont want to use ajax as well because I need to refresh the page to get the latest data in a row after submission.

Below is the snippet of code and image attached for the url

$("#itemupdateModelForm").click(function(event) {
        event.preventDefault(); // avoid to execute the actual submit of the form.
        return false;
    });

    $(".itemupdateButton").click(function(event) {
        event.preventDefault(); // avoid to execute the actual submit of the form.
        var form = $('#itemupdateModelForm');
        var url = form.attr('action');
        var newUrl = url + currentRowItemId;
        form.attr('action',newUrl);
        $( "#itemupdateModelForm" ).submit();
        return false;
    });

enter image description here

After submission of form

enter image description here

I want my url to be unchanged after submission of form without ajax Below is the model form

<div class="col-xl-8 col-lg-7">
<div class="itemUpdateTaskForm">
   <form th:action="@{/category/{id}/item/(id=${categoryId})}" th:method="post" th:object=${updateItemModel} id="itemupdateModelForm">               
        <div class="modal fade" id="updateTaskModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel" th:text="${categoryName}">Edit</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title">Current Stock Quantity:</label>
                            <input th:field="*{currentStockQuantity}" value="" type="text" class="form-control" id="crntstckqnty" name="currentstockquantity" placeholder="currentstockquantity" readonly="readonly"/>
                        </div>
                        <div class="form-group">
                            <label for="title">Item Price:</label>
                            <input th:field="*{currentPurchasePrice}" value="" type="text" class="form-control" id="current_item_price" name="current_item_price" placeholder="Current Item Price" />
                        </div>
                        <div class="form-group">
                            <label for="status">Unit:</label>
                            <select id="unit" class="form-control" name="unit" th:field=*{unit}>
                                <option th:each="status : ${T(com.inventory.domain.ItemWeightUnit).values()}"
                                        th:text="${status}" th:value="${status}">
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="title">Take Item:</label>
                            <input th:field="*{updatedQuantity}" value="" type="text" class="form-control" id="updatedQuantity" name="updatedQuantity" placeholder="updateQuantity"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <input type="button" class="btn btn-primary itemupdateButton" value="save"/>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Upvotes: 0

Views: 3150

Answers (2)

Siddharth Rathod
Siddharth Rathod

Reputation: 638

You can reload your page after record update successfully, like below i use javascript for it.

window.location.reload(true);

here is reference link

Upvotes: 1

danikaze
danikaze

Reputation: 1654

If you don't want to use AJAX, then a GET/POST request need to be done.

The easiest way would be to have a redirect to the original page from the page receiving the form data.

That is, once /category/1/item/9 has processed the form data, redirect to /categ/Masala. This way the refresh you desire to have the latest data will be done too.

Another way is to process the data in the same URL than the form is, but with different method (POST instead of GET), or rely in a logic like if post data is available process it, if not, display the form, but you still would need to redirect or render the page anyways.

Upvotes: 0

Related Questions