0

I am not able to submit the code I am writing using jQuery. This is being used in congestion with JSP on the Hybris platform.

The button click event is happening as expected, but for some reason, the form is not being submitted.

//option-1
$("#jsContinueButton").on("click",function(e){
  e.preventDefault();
  $("#MyAddressForm").submit(function(event){
    event.preventDefault();
    });
});

//option-2
$("#jsContinueButton").on("click",function(e){
  e.preventDefault();
  $("#MyAddressForm").submit();
});

<form:form action="/cart/update" method="post" commandName="MyAddressForm" id="MyAddressForm">
  <div class="selected-address-data-container" style="display: none;">
    <input type="hidden" data-old="" name="line1" id="address1" value="address 1" />
    <input type="hidden" data-old="" name="line2" id="address2" value="address 2" />
    <input type="hidden" data-old="" name="suburb" id="suburb" value="suburb" />
    <input type="hidden" data-old="" name="townCity" id="towncity" value="city name" />
    <input type="hidden" data-old="" name="postcode" id="postcode" value="postcode" />
    <input type="hidden" data-old="" name="meshblock" id="meshblock" value="" />
    <input type="hidden" data-old="" name="gps_lat" id="gps_lat" value="123.12" />
    <input type="hidden" data-old="" name="gps_long" id="gps_long" value="123.23" />
    <input type="hidden" data-old="" name="dpid" id="dpid" value="" />
    <input type="hidden" data-old="" name="sufi" id="sufi" value="" />
    <input type="hidden" data-old="" name="rdNumber" id="rdNumber" value="" />
    <input type="hidden" data-old="" name="rural" id="rural" value="false" />
    <input type="hidden" data-old="" name="boxType" id="boxType" value="" />         
  </div>
</form:form>

I am not able to find any reason why the form is not submitting. I expect it to make a network call for action URL.

James Z
  • 11,838
  • 10
  • 25
  • 41
Jatin Waichal
  • 45
  • 7
  • 1
    where is the button to be clicked to launch your submission ? – Rebai Ahmed Aug 10 '19 at 11:44
  • 2
    option-1 is nonsense, it doesn't submit the form but adds a handler that actually cancels the submission if the form is submitted from elsewhere. option-2 should work fine – Chris G Aug 10 '19 at 11:45
  • Add the ` – Rory McCrossan Aug 10 '19 at 12:59
  • @AhmedRebai the button is on a modal which opens up on a click event – Jatin Waichal Aug 13 '19 at 19:40
  • @ChrisG Yes you are correct, but option -2 doesn't work either. – Jatin Waichal Aug 13 '19 at 19:44
  • @RoryMcCrossan but I need to submit the form using js as it the requirement – Jatin Waichal Aug 13 '19 at 19:44
  • That's an odd requirement which goes against most UX and accessibility standards. If you really need to do it this way, then option 2 should work fine. Check your console for errors – Rory McCrossan Aug 13 '19 at 19:46
  • thanks, @RoryMcCrossan I will have a look, but I remember there wasn't any error in there. Any thing specific you would suggest I should look for? like any setting or anything in the console? – Jatin Waichal Aug 13 '19 at 19:53
  • I'd suggest checking that `#MyAddressForm` actually exists in the DOM when you attempt to call it. Other than that, it should work. – Rory McCrossan Aug 13 '19 at 19:54
  • Is the option-2 script *below* the `#jsContinueButton` button? Because if not, that code won't find the button and clicking it does nothing. – Chris G Aug 14 '19 at 12:59
  • Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Chris G Aug 14 '19 at 12:59

2 Answers2

0

In Hybris every post method must have CSRF token , you need to ensure that you are passing that.

Shahid
  • 1
  • 2
-1

add name="MyAddressForm" in your form tag

then run this.

$("#jsContinueButton").on("click",function(e){
  e.preventDefault();
  document.forms["myAddressForm"].submit();
});
Hrv
  • 159
  • 8