We Keep Coding

Hidden variables are getting sent in the query string

I am building a form in Shopify. On click of a button, I call a JavaScript function that takes some of the fields, sets them in hidden variables and then submits the form...here are some snippets.
<input type="button" name="next" onclick="javascript:validate(); return false;" class="btn" value="Next">
function validate(){
var xv = $( "#x" ).val();
var hd = $("<input>").attr("type", "hidden").attr("name", "hx[aa]").attr("id", "hx[aa]").val("xv");
$('#myForm').append(hd);
$("#myForm").submit();
}
The form method is set to post but when the submit happens, i can see the hx[aa] in the query string.
?hx[aa]=12345
I have a feeling that this has nothing to do with Shopify but something else that I am missing on. Any help is greatly appreciated. Thanks.

Make sure you form has method attribute with value that is equal to post
<form method="post" id="myForm">
<input type="button" name="next" onclick="javascript:validate(); return false;" class="btn" value="Next">
</form>

How to interrupt the form posting , until pressing the confirm button?

There is a form like this:
<form action="" method="post">
<input type="submit" value="Delete Me">
</form>
I would like to change it to , when pressing the submit button, open a warning modal, If press the 'confirm' at the modal, then the form process.
Some attempt code but I wonder are there any way to 'continue' the form process after interrupt it, thanks a lot.
$(function () {
$('.delete_form').on("submit",function(){
$('#deleteModal').modal('toggle');
return false; //pause the submit
});
$('.confirm_del').on("click",function(){
return true; //process the form submit
});
});

Use the following code.
Button is changed into a normal button from submit button..
<form action="" method="post" id="f1">
<input type="button" id="b1" value="Delete Me">
</form>
<script>
$('#b1').click(function(){
$('#deleteModal').modal('toggle');
});
$('.confirm_del').on("click",function(){
$("#f1").submit(); //process the form submit
});
</script>

change
type="submit" to type="button"
and then use its id or class to add an event listener then open the warning alert and submit the form on its response value.

your script should like this:
$(function () {
$('.delete_form').on("submit",function(){
return confirm('Are You Sure');
});
});

Try this one,
<form action="" method="post" onsubmit="return isDeleteConfirm()">
<input type="submit" value="Delete Me">
</form>
function isDeleteConfirm(){
$('.delete_form').on("submit",function(){
$('#deleteModal').modal('toggle');
return false; //pause the submit
});
$('.confirm_del').on("click",function(){
return true; //process the form submit
});
}

<form id="theform">
<button onclick="check()">Send</button>
<script>
function check(){
//display warning
}
function ok(){
//call on ok press
document.getElementById("theform").submit();
}
</script>
Just don't start the submit process until the user accepts the warning...

You can also trigger the submit event of the form when confirm button is clicked.
$('.confirm_del').on("click",function(){
$('.delete_form').trigger("submit")
});

Form doesn’t submit

I’ve a form like this with my Javascript code:
var btnSubmit = document.getElementById("submit");
btnSubmit.addEventListener("click", sending);
function sending() {
btnSubmit.disabled = true;
btnSubmit.value = "Sending...";
btnSubmit.form.submit(); //<----- this doesn't do anything!!!
}
<form id="form_save" action="/ValidatePicsServlet" method="post">
<!-- more inputs -->
<button id="submit" type="button">Save changes</button>
</form>
As you can see, the last line doesn’t do anything, and the data is not submitted.
Where am I wrong?
EDIT: I'm so so sorry! I had a mistake copying the code. The eventListener actually called sending function, that was right. I'm embarrased...

This is because form.submit is override by the submit element you've created inside the form.
Just change the id of your button and it's work like a charm.
var btnSubmit = document.getElementById("submit-button");
btnSubmit.addEventListener("click", sending);
function sending() {
btnSubmit.disabled = true;
btnSubmit.value = "Sending...";
btnSubmit.form.submit();
}
<form id="form_save" action="/ValidatePicsServlet" method="post">
<!-- more inputs -->
<button id="submit-button" type="button">Save changes</button>
</form>

Try adding the 'submit' type to your form button.
<input type="submit" id="submit" value="Submit">

How to disable form validation for some submit button?

In my jsp form page, I have two submit button "Save" and "Cancel". When I click on both buttons it validates the form. I tried to put keyword "formnovalidate" for cancel button. But its not working.
Here I mentioned my button code:
<form id = "myForm" method="POST" onsubmit="return validateForm()" >
..........
<tr >
<td class="td_left"><input type="submit" value="save" onclick="form.action='${pageContext.servletContext.contextPath}/insert'"/></td>
<td class="td_right"><input type="submit" value="Cancel" onclick="form.action='${pageContext.servletContext.contextPath}/home'" formnovalidate /></td>
</tr>
................
</form>
Validations:
function validateForm() {
var x = document.forms["myForm"]["spcrId"].value;
if (x == null || x == "") {
alert("SPCR ID must be filled out");
return false;
}
}
What is the way to disable form validations for "Cancel" button?

I think the problem was because you, on the form's onsubmit attribute, placed a validation call. So, something like this should work without that onsubmit attribute:
<button name="action" class="btn btn-secondary" type="submit" value="Previous" formnovalidate="formnovalidate">Previous</button>

Try this:
<input type="submit" value="Cancel" onclick="this.form.setAttribute('novalidate', 'novalidate'); form.action='${pageContext.servletContext.contextPath}/home'" />
By setting the form's novalidate attribute on the click event you can bypass the validation for only that button.

Instead of type = "submit" you have to use
<input type="button" value="Cancel" />
or you can use
<button type="cancel" onclick="window.location='http://your.com';return
false;">Cancel</button>

try this
var myFormVar = document.myForm.FieldName.value;
if ((myFormVar == "") ) {
document.myForm.FieldName.value = '';
document.myForm.FieldName.focus();
alert ("alert here");
return;
}

You can use:-
`<button type="button"></button>`

How to submit form with Javascript

<input type="submit" name="submit" value="Submit" onclick="check_form();"></div>
If all fields are corrects function check_form() return true, I want submit form, only hwen all fields are correct, how to do it. On this moments when I close JavaScript alerts form auto submit.

You are missing the return
<input type="submit" name="submit" value="Submit" onclick="return check_form();"></div>
and your function
function check_form(){
var isValid = true;
if(.....) {
isValid = false;
}
return isValid;
}
better yet use onsubmit of the form since an Enter key in a textbox can submit it.