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>

Ajax does not get PHP Echo [duplicate]

I have trouble, my code doesn't work, because my server script side need a name from the submit button. I'm using Ajax method, and I'm using data: serialize, when I have Click on Submit, it doesn't work. Here is my JavaScript code:
$(function(){
$('#buy_product').submit(function(e){
e.preventDefault();
var submitData = $('#buy_product').serialize();
submitData.push({ name: this.name, value: this.value });
$('.loading').html('{{HTML::image('img/ajax-loader.gif')}}');
$.ajax({
type: "POST",
data: submitData,
url: "{{URL::base()}}/products/view/{{$products->id}}/{{Str::slug($products->name_product, '_')}}",
success: function(msg){
$('#qty').val('');
$('.loading').html(msg);
}
});
});
});
If you have clue, please tell me, I'll be glad.
My button is like this:
<input name="update" id="update" type="submit" value="update">
<input name="empty" id="empty" type="submit" value="empty">

I believe you can't do that but you can use a hidden field
<input type="hidden" name="any_name" value="any_value" />

Try this:
Java Script Code:
<script type='text/javascript'>
$(function(){
$('#form').submit(function(e){
e.preventDefault();
var submitData = $('#form').serialize();
var btnName = $('#submit').attr('name');
var btnVal = $('#submit').val();
var btn = '&'+btnName+'='+btnVal;
submitData += btn;
alert(submitData);
});
});
</script>
HTML Code:
<form action="" id="form" type='post'>
<input type="text" name="name" id="name" value='Scott'/>
<input type="submit" name="submit" id="submit" value='POST'/>
</form>
or use:
var submitData = $('#buy_product').serialize();
submitData += '&btnName=' + $('#your_submitbtn_id').attr('name') + '&btnValue='+ $('##your_submitbtn_id').attr('value');

"How do I use jQuery's form.serialize but exclude empty fields" does not work (with php)

I'd like to use How do I use jQuery's form.serialize but exclude empty fields but it does not work. I used a minimal example that redirects to a php script:
<html><head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').submit(function(){
$("#myForm :input[value!='']").serialize();
alert('JavaScript done');
});
});
</script>
</head>
<body>
<form id="myForm" action="php.php" method="get">
<input id=id1 name=name1 type="text" /><br>
<input id=id2 name=name2 type="text" /><br>
<input id=id3 name=name3 type="text" /><br>
<input id=id4 name=name4 type="text" />
<input type="submit" value="submit form"/>
</form>
</body></html>
An here is the php script
<?php
print_r($_GET);
?>
If I write "111" only into the first textbox, I get from php:
Array ( [name1] => 111 [name2] => [name3] => [name4] => )
Thus, all fields made it into the get parameters.
Can you please help me?
TIA

You cannot use attribute selector for value as it is a changing property.
Use .filter()
$(document).ready(function () {
$('#myForm').submit(function () {
$(this).find(":input").filter(function () {
return $.trim(this.value).length > 0
}).serialize();
alert('JavaScript done');
});
});
Demo: Fiddle
Note: just serializing the input fields does not change in form submission, it can be used only if the form is submitted via ajax.
If you want to do a normal form submission but want to remove the empty fields then use .remove()
$(document).ready(function () {
$('#myForm').submit(function () {
$(this).find(":input").filter(function () {
return $.trim(this.value).length == 0
}).remove();
alert('JavaScript done');
});
});

You can try it with ajax, and get the array data in php file, see below code.
<html><head>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit_form').click(function(e){
$("#myForm :input[value!='']").serialize();
var form_data= $("#myForm :input[value!='']").serializeArray();
$.post("php.php",form_data,function(data){
alert('JavaScript done');
},"json");
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="myForm">
<input id=id1 name=name1 type="text" /><br>
<input id=id2 name=name2 type="text" /><br>
<input id=id3 name=name3 type="text" /><br>
<input id=id4 name=name4 type="text" />
<input type="submit" id="submit_form" value="submit form"/>
</form>

You need to AJAX the form - just calling serialize does not remove the fields from the request
Live Demo
$('#myForm').on("submit",function (e) {
e.preventDefault(); // cancel the form itself
var opts = $(this).find(":input").filter(function () {
return $.trim(this.value).length > 0;
}).serialize();
$.get($('#myForm').attr("action"),opts,function(data) {
alert(data);
});
});

How to include submit button name and values on form Serialize() ajax

I have trouble, my code doesn't work, because my server script side need a name from the submit button. I'm using Ajax method, and I'm using data: serialize, when I have Click on Submit, it doesn't work. Here is my JavaScript code:
$(function(){
$('#buy_product').submit(function(e){
e.preventDefault();
var submitData = $('#buy_product').serialize();
submitData.push({ name: this.name, value: this.value });
$('.loading').html('{{HTML::image('img/ajax-loader.gif')}}');
$.ajax({
type: "POST",
data: submitData,
url: "{{URL::base()}}/products/view/{{$products->id}}/{{Str::slug($products->name_product, '_')}}",
success: function(msg){
$('#qty').val('');
$('.loading').html(msg);
}
});
});
});
If you have clue, please tell me, I'll be glad.
My button is like this:
<input name="update" id="update" type="submit" value="update">
<input name="empty" id="empty" type="submit" value="empty">

I believe you can't do that but you can use a hidden field
<input type="hidden" name="any_name" value="any_value" />

Try this:
Java Script Code:
<script type='text/javascript'>
$(function(){
$('#form').submit(function(e){
e.preventDefault();
var submitData = $('#form').serialize();
var btnName = $('#submit').attr('name');
var btnVal = $('#submit').val();
var btn = '&'+btnName+'='+btnVal;
submitData += btn;
alert(submitData);
});
});
</script>
HTML Code:
<form action="" id="form" type='post'>
<input type="text" name="name" id="name" value='Scott'/>
<input type="submit" name="submit" id="submit" value='POST'/>
</form>
or use:
var submitData = $('#buy_product').serialize();
submitData += '&btnName=' + $('#your_submitbtn_id').attr('name') + '&btnValue='+ $('##your_submitbtn_id').attr('value');

Form Submit connected to js event not working

I have the following code:
<form action="" id="search-form">
<fieldset>
<div class="rowElem">
<input type="text">
<a href="#" onClick="document.getElementById('search-form').submit()">
<div>Search</div>
</a></div>
</fieldset>
</form>
<script>
$(document).ready(function() {
$('#search-form').submit(function(event){
event.preventDefault();
alert("test");
});
});
</script>
When I submit the form I don't see the alert... What am I missing?
Thanks,

You need to remove your obtrusive onclick event and bind to the link instead.
You can't alert AFTER you submit, since that would perform whatever action you give to the form (most likely taking you off the page. If you insisted on doing so, the following would work.
<form action="" id="search-form">
<fieldset>
<div class="rowElem">
<input id="name" type="text"></input>
<a href="#" id="search" >Search</a>
</div>
</fieldset>
</form>
<script>
$(document).ready(function() {
$('#search').bind('click', function () {
// Alert the name BEFORE you do the form post
alert($('#name).val());
$('#search-form').submit(function(event){
});
});
});
</script>
I have a working JSFiddle example here: http://jsfiddle.net/7jqUF/5/
If, instead, you wanted an AJAX solution, you'd want to do something other than a form post, such as an ajax post
<script>
$(document).ready(function() {
$('#search').bind('click', function () {
// Alert the name BEFORE you do the form post
alert($('#name).val());
$.post('/ServerUrl/method', { name: $('#name').val() });
});
});
</script>

Why don't you do something like
<form action="" id="search-form">
<fieldset>
<div class="rowElem">
<input name="query" type="text" /><br />
<a class="search" href="#">Search</a>
</div>
</fieldset>
</form>
and
var form = $('#search-form');
$('.search', form).click(function(event){
event.preventDefault();
var query = $('input[name="query"]', form).val();
alert("test: " + query);
});
Demo: Fiddle
If you want to use the params as part of a ajax request you can do something like
var form = $('#search-form');
$('.search', form).click(function(event){
event.preventDefault();
var params = form.serialize();
alert("test: " + form.serialize());
$.ajax({
url: '...',
data: params,
....
})
});

Please try the following code. After removing the submit code from the $(document).ready function
<a href="#" onclick="document.getElementById('search-form').submit();">