How can I fix my Mturk submit button? It is not working

Question

When I submitted my external HIT on Mturk, the Submit button is not working. I would appreciate if someone could help me with this. The data gets stored in my server though. Here is my code:

<div id="instruction3" class="instructions" style="display:none"> 
survey questions here
<a href="javascript:SaveData()" id="finalSubmit" type="submit" value="Submit">Submit</a>
</div>
    
function SaveData() {
 (some code here)
 d = {   
  "trialStruct": trialStruct,
  "critStruct": critStruct
  };
  console.log(d)
  SendToServer(curID, d);
}
        
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" /> 
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>
            
function SendToServer(id, curData) {
   $.ajax({
   type : "POST",
   url : "https://xxxxxxxxxxxx/turk/save.php",
   data : { json : JSON.stringify(curData) },
   success : function(data) { 
   document.forms[0].submit();
  }
 });
}

Edited: the flow should be participants click on the submit button and the data gets stored and sent to the externalSubmit page. These are parts of the code from Mturk that I need to implement in my code and perhaps I am not doing it right.

<!-- HTML to handle creating the HIT form -->
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" /> 

<!-- HTML to handle submitting the HIT -->
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>

Answer 1

您应该在表单标签内调用 SaveData() 函数

<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form" onSubmit="SaveData()">

Answer 2

So I think you should try to move the SaveData function to the onSubmit value of the form. So you would be submitting the form and the data would get saved to the server. You have extra html code above but I think that is superfluous for what you are trying to do.

 function SaveData() { (some code here) d = { "trialStruct": trialStruct, "critStruct": critStruct }; console.log(d) SendToServer(curID, d); } function SendToServer(id, curData) { $.ajax({ type : "POST", url : "https://xxxxxxxxxxxx/turk/save.php", data : { json : JSON.stringify(curData) }, success : function(data) { document.forms[0].submit(); } }); }

 <form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form" onSubmit="SaveData()"> <input id="assignmentId" name="assignmentId" type="hidden" value="" /> <p><input onclick="window.location.href = https://workersandbox.mturk.com/mturk/externalSubmit';"id="submitButton" type="submit" value="Submit" /></p> </form>

Answer 3

Here is the working one, I have used https://postman-echo.com/post just to make sure it works.

 function SaveData() { var d = { "trialStruct": trialStruct, "critStruct": critStruct }; console.log(d); SendToServer(curID, d); } function SendToServer(id, curData) { $.ajax({ type: "POST", url: "https://postman-echo.com/post", data: { json: JSON.stringify(curData) }, success: function(data) { $("#mturk_form").submit(); } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="instruction3" class="instructions" style="display:none"> <a href="javascript:SaveData()" id="finalSubmit" type="submit" value="Submit">Submit</a> </div> <form action="https://postman-echo.com/post" id="mturk_form" method="post" name="mturk_form"> <input id="assignmentId" name="assignmentId" type="hidden" value="" /> <p><input id="submitButton" type="submit" value="Submit" /></p> </form>