We Keep Coding

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

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
Submit
</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>

You should call the SaveData() function inside the form tag
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form" onSubmit="SaveData()">

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>

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">
Submit
</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>

Can submit the file and the other field in the form once?

I want to use jquery to submit the form ，the form with text field and file field ,but it just submit the text field "groupId" , I can't submit the groupId with file field .
the request header just
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
My problem is : can i submit the groupId field and file field once ?If can , what should I do?
the code below
<form id="submitForm" >
<div class="form-group">
<label for="exampleInputEmail1" >groupId</label>
<input type="text" name="groupId" class="form-control" >
</div>
<div class="form-group">
<label for="exampleInputFile" >File input</label>
<input type="file" name="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
<small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</div>
<button id="newItemSubmitButton" type="submit" class="btn btn-primary">submit</button>
<button type="button" class="btn btn-default" >cancel</button>
</form>
js code
var submitForm = $('#submitForm');
$("#newItemSubmitButton").click(function (e) {
console.log("submit");
e.preventDefault();
console.log("after preventDefault");
$.ajax({
data:submitForm.serialize() ,
url: "./testSubmit",
type: "post",
success: function (data) {
// $("#form_output").html(data);
console.log("hello");
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
$('#newItem').modal('hide');
return false;
});

Form get submitted even the form validation fails

I am using http://www.formvalidator.net/index.html to validate my form but the form gets submitted even when the validation get failed.
Form code:
<form name="add-todo" class="form-horizontal" action="" method="post">
<h5>Add New Item</h5>
<div class="form-group">
<div class="col-md-12">
<input type="text" data-validation="required" class="form-control" id="todo-text-input" name="todo-text">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-primary btn-add">Add</button>
</div>
</div>
</form>
jQuery code:
$(document).ready(function() {
$.validate({
modules: 'security'
});
$('form[name=add-todo]').submit(function(e) {
e.preventDefault();
var text = $("#todo-text-input").val();
$('.btn-add').text('Saving ....');
$.ajax({
url: this.action,
type: this.method,
data: {
text: text
},
success: function(response) {
$("#todo-text-input").empty();
$('.messages').removeClass('hide-element');
$('.alert').addClass('alert-success');
$('.alert').text('To do item added successfully.');
$('.alert').fadeTo(2000, 500).slideUp(500, function() {
$('.alert').slideUp(500);
});
}
});
});
});

dont use submit button. You can use
<button type="button" class="btn btn-primary btn-add">Add</button>
after that check your validation status. if its valid then submit the form.

<input type="text" data-validation="required" class="form-control" id="todo-text-input" name="todo-text">
In your input field you don't need to use data-validation="required" just use required like
<input type="text" required class="form-control" id="todo-text-input" name="todo-text">

Please change you form validation code configuration like this:
$.validate({
form : '#registration-form',
modules : 'security',
onSuccess : function($form) {
alert('The form '+$form.attr('id')+' is valid!');
// write your ajax code to submit form data on server
return false; // Will stop the submission of the form
}
});
For more info follow:
http://www.formvalidator.net/index.html#configuration

How to submit multiple forms in one page using POST without refreshing page in Express JS

I am developing an application in ExpressJS, and plan to have the following HTML code in a jade file.
I have the following page with 4 form buttons:
<div class="dog">
<div class="dog_wrapper clearfix">
<div class="col-lg-6 col-md-6 col-sm-6 left_sec">
<div class="panel-heading">LIVE</div>
<div class="col-md-6 col-sm-6">
<div class="livefeed-left">
<form class="button" method="post">
<input type="hidden" value="DEPLOY" id="fieldID" name="fieldName"/>
<input type="submit" value="Raise"/>
</form>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="livefeed-right">
<form class ="button" method="post">
<input type="hidden" value="RECOVER" id="fieldID" name="fieldName"/>
<input type="submit" value="Lower"/>
</form>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 right_sec">
<div class="panel-heading" id="sample" style="width: 100%; height:500px">MAP</div>
<div class="col-md-6 col-sm-6">
<div class="livefeed-left">
<form class= "button" action="" method="post">
<input type="hidden" value="UPLOAD" id="fieldID" name="fieldName"/>
<input type="hidden" value="" id="lngHolderID" name="lngHolderName"/>
<input type="hidden" value="" id="latHolderID" name="latHolderName"/>
<input type="hidden" value="" id="altHolderID" name="altHolderName"/>
<input type="hidden" value="" id="actHolderID" name="actHolderName"/>
<input type="hidden" value="" id="actParamHolderID" name="actParamHolderName"/>
<input type="submit" value="Upload" onclick="compileHolder()"/>
</form>
</div>
Each button will POST an action,however, it refreshes the page every time the user clicks on the button. I read on a separate post that this can be controlled through jQUERY or AJAX.
I added the following script at the end before the tag:
<script type="text/javascript">
$('.button').on('submit', function (event) {
event.preventDefault(); // Stop the form from causing a page refresh.
var data = {
username: $('#username').val(),
password: $('#password').val()
};
$.ajax({
url: 'http://localhost/my/url',
data: data,
method: 'POST'
}).then(function (response) {
// Do stuff with the response, like add it to the page dynamically.
$('body').append(response);
}).catch(function (err) {
console.error(err);
});
});
</script>
</body>
</html>
My question is for the following section:
$('upload').on('submit', function (event) {
event.preventDefault(); // Stop the form from causing a page refresh.
var data = {
username: $('#username').val(),
password: $('#password').val()
};
$.ajax({
url: 'http://localhost/my/url',
data: data,
method: 'POST'
}).then(function (response)
Would the above code work? Also, does url: 'http://localhost/my/url' take in the actual jade file. For example, dogshow.jade?
Sorry for the questions, I am pretty new at this and still feeling my way around.

No this will not work. If u want to send all form data as u name assigned in form just use single line.
var data = $('#upload').serialize();

Shouldn't $('upload') be $('#upload')? In jQuery id's are preceded by # sign.

Working with multiple ajax forms in same page

After a suggestion from this question Multiple forms in in a page - load error messages via ajax
I am trying to work multiple forms in same page. I am trying to append error messages in to the respective input div classes.
I don't want to have different form ids because i need to have single id in the jquery then.
I have forms like
<form class="myform" name="myform">
<div class="name">
<input type="text" name="name" />
</div>
<div class="message">
<input type="text" name="message" />
</div>
<input type="submit" name="submit" />
</form>
<!-- second form -->
<form class="myform" name="myform">
<div class="name">
<input type="text" name="age" />
</div>
<div class="message">
<input type="text" name="gender" />
</div>
<input type="submit" name="submit" />
</form>
and the jQuery part is
$('.myform').on('submit', function(event) {
postform = $(this);
event.preventDefault();
$(this).ajaxSubmit({
url: 'process.php',
type: 'post',
dataType: 'json',
success: function( response ){
$.each(response, function(index, element){
var msgdiv = postform.children('div.' + divclass).append('<span>'+message+'</span>');
}
}
});
});
however the ajax part is working but the error messages do not load in the div tags as defined in the jQuery 'div.' + divclass. Any help would be appreciated

Like this?
postform.find('.message').append('<span>' + message + '</span>');