Submitting custom form with javascript multiple times from the page

(Edinkin) #1

Hi all we have a feedback form on one of our sites that is submitted via javascript. Submission collects data from where on the page feedback link was clicked as well as what browser and user feedback. Form works just fine, but only submit once without reloading page.

Any ideas why that would happened?

I can see in console that connection is ok but only one submission shows up.

There is another issue that seem to be effecting this form, the site configured to have 2 urls one with www and one without. For some reason Matrix picks url at random and that causes cross origin error.
Anyone came across this? Any solutions?

Form is in the footer of the website, but it is also used to provide feedback on resources by clicking feedback link next to resource https://www.aci.health.nsw.gov.au/portal/paediatric/sources It is a feedback form in a footer

Code that does it below

$(document).on("click",".feedback-btn, .feedback-btn-general", function() {
$('#paeds-feedback-form').find('form').show();
$('#paeds-feedback-form').find('#feedback-success').hide()


var feedbackType = $(this).attr("data-type"); // general / resource
var feedbackResource = $(this).attr("data-resource"); // resource / or page url
var feedbackBrowser = navigator.userAgent;
var feedbackId = $(this).attr("data-id"); 

$("#feedback-comments, #feedback-userinfo").val("");
$("#feedback-resource").val(feedbackResource + " | " + feedbackId);
$("#feedback-browser").val(feedbackBrowser);
$("#feedback-type").val(feedbackType);

$("#feedback-label").html(feedbackResource);



MicroModal.show('paeds-feedback-form');

});

$(document).on(“click”,"#feedback-submit", function(e) {

e.preventDefault();

var comments = $("#feedback-comments").val().replace(/\'|\"/ig,"").trim();
var userInfo =  $("#feedback-userinfo").val().replace(/\'|\"/ig,"").trim();
var resource = $("#feedback-resource").val();
var browser = $("#feedback-browser").val();
var feedbackType =  $("#feedback-type").val();

if(comments == "") {
    $("#feedback-comments").addClass("error");
    return;
}

    
var feedbackData = new FormData();
feedbackData.append('SQ_FORM_496868_PAGE', '1');
feedbackData.append('form_email_496868_referral_url', '');

feedbackData.append('q496868:q1', JSON.stringify(comments));//comments
feedbackData.append('q496868:q2', JSON.stringify(userInfo));//user info
feedbackData.append('q496868:q3', JSON.stringify(resource));//resource
feedbackData.append('q496868:q4', JSON.stringify(browser));//browser
feedbackData.append('q496868:q5', JSON.stringify(feedbackType));//type

feedbackData.append('form_email_496868_submit', 'Submit');

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://aci.health.nsw.gov.au/portal/paediatric/feedback', true); // removed www
xhr.send(feedbackData);

$('#paeds-feedback-form').find('form').hide();
$('#paeds-feedback-form').find('#feedback-success').show();

$("#feedback-comments, #feedback-userinfo, #feedback-resource, #feedback-browser, #feedback-type").val("");
 $("#feedback-comments").removeClass("error");
$("#feedback-label").html("");

//MicroModal.show('paeds-feedback-form');
(Edinkin) #2

Hi all managed to solve cross origin issue sort off by removing hard coded URL, but still can’t workout why I can only submit form once.

Anyone else had this issue? Any help or an idea would be appreciated.

(Harinder Singh) #3

If it is a plain html in the footer then and caching is applied to all your pages. There are good chances that it is happening because of Caching. That is why you are not able to submit twice.

Squiz folks can confirm this better.

(Edinkin) #4

Thanks, I will check this out. seems reasonable.

(Edinkin) #5

Update, thanks for the tip, disabling cache mad a difference, but didn’t fix the problem submissions seem to appear in logs consistently every second time all without page reload.

(Harinder Singh) #6

There are different caching layers including local browser cache.

Instead of plain html, just pull the whole custom form(with blank design applied) via AJAX call. This will resolve the caching issue as it will load the form dynamically everytime you click on Feedback form and submit.