Develop Reference

Form before submit when using onsubmit function

I have this form
<form id="form" method="POST" onsubmit="return validate()">
<input type="text" id="name" name="name">
<input type="submit" value="next">
</form>
and this validation
if ($("#name").val() == "") {
return false;
}
return true;
what I am trying to do, is to disable the submit button, I tried to use submit function for the form but its not triggered, the problem is I don't have access to html or js files, only one custom.js file I can add or override other functions.
anyone can help me ?
Thanks

so if you have $("#name") probably you have the jquery library.
in this case you can try remove onsubmit html property directly and use this event from jquery. $("#form").submit(...) and there you can use your validation function with return boolean value

You can override the validate function (but it is a bit dirty):
function validate() {
console.log('default validator');
return false;
}
var defaultValidator = validate;
window.validate = function () {
defaultValidator();
console.log('custom validator');
return false;
};
<form id="form" method="POST" onsubmit="return validate()">
<input type="text" id="name" name="name">
<input type="submit" value="next">
</form>

Try this in your validate function.
$('#form>submit').prop('disabled', true);

Submitting the form with subsequent replacement value

The problem is that when you first click changes value to add to delete but the form not sent when re-clicking on add value change and the form is submitted to add.
How to do ? Click > Send > Replacement
form
<form id="favorite" method="GET" action="" enctype="multipart/form-data" target="iframe">
<input type="submit" id="fav" name="favorite" value="add"/>
</form>
js
$(function(){$('#fav').click(
function() {
$(this).val() == "add" ? delete_item() : add_item();
});
});
function delete_item() {
$('#fav').val("delete");
}
function add_item() {
$('#fav').val("add");
}

I create a jsfiddle to show you how i would do it ...
Html
<div id="MyForm">
<form id="favorite" method="GET" action=""
enctype="multipart/form-data" target="iframe">
<input type="submit" id="fav" name="favorite" value="add" />
</form>
</div>
Js
$(function() {
$("#MyForm").on('click', '#fav', function() {
$(this).val() == "add" ? delete_item() : add_item();
console.dir($(this));
return false;
});
});
function delete_item() {
$('#fav').val("delete");
}
function add_item() {
$('#fav').val("add");
}
I put a return false; so the form'll not be submited in my example, you should remove it to use the code.
I put a container div to use $.on() properly
I put a console.dir so you can debug it, you could remove it to use the code.

Press form submit button if upload format is valid

I need to press the button "submit" if the upload file format is valid. I have managed to check the format using the JavaScript below. My aim is between // and // ...
<script>
function Checkfiles(f){
f = f.elements;
if(/.*\.(gif)|(jpeg)|(jpg)|(doc)$/.test(f['filename'].value.toLowerCase()))
return true; + // and press the button submit //
alert('Please Upload Gif or Jpg Images, or Doc Files Only.');
f['filename'].focus();
return false;
};
</script>
And here's the HTML form:
<form action="something.php" method="post" name="myForm" onsubmit="return Checkfiles(this);">
<input type="file" name="filename" accept="/image*/">
<input type="submit" name="submit">
</form>
Thanks.

Do something like:
document.querySelector('form[name="myForm"] input[type="submit"]').click();

Validate file size and type in a multiple input

i have 3 input file, i wanna make a javascript validation for 3 input file in one submit button form event onSubmit=""
<form action="step2_crud_dev.php" method="post" enctype="multipart/form-data" class="form-horizontal" role="form" id="dataPribadi" >
<div>
<input type="file" name="fUpload1" id="fileUpload1"/>
<input type="file" name="fUpload2" id="fileUpload2"/>
<input type="file" name="fUpload3" id="fileUpload3"/>
</div>
<div>
<input type="submit" name="upload" value="upload" />
</div>
</form>
EDITED CODE
new code that working but, still proccess saving
$(document).ready(function(){
$('#tbl_next').click(function(){
//alert('hello');
$('input[type="file"]').each(function(){
var thisFile = $(this);
var fileSize = thisFile[0].files[0].size;
var fileType = thisFile[0].files[0].type;
//alert(fileSize);
if(fileSize>1048576){ //do something if file size more than 1 mb (1048576)
alert(fileSize +" bites\n ukuran gambar terlalu besar");
return false;
}else{
switch(fileType){
case 'image/png':
case 'image/gif':
case 'image/jpeg':
case 'image/pjpeg':
alert("Acceptable image file!");
break;
default:
alert('Unsupported File!');
return false;
}
}
});
$('form#dataPribadi').submit();
});
});

Change type of submit button to normal button and use onclick handler for it by giving a id as upload,
<form action="step2_crud_dev.php" method="post" enctype="multipart/form-data" class="form-horizontal" role="form" id="dataPribadi" >
<div>
<input type="file" name="fUpload1" id="fileUpload1"/>
<input type="file" name="fUpload2" id="fileUpload2"/>
<input type="file" name="fUpload3" id="fileUpload3"/>
</div>
<div>
<input type="button" id="upload" value="upload" />
</div>
</form>
and your click event handler should be,
$(document).ready(function(){
$('#upload').click(function(){
alert('hello');
$('input[type="file"]').each(function(){
var thisFile = $(this);
var fileSize = thisFile[0].files[0].size;
alert(fileSize);
});
$('form#dataPribadi').submit();
});
});
UPDATED FIDDLE

How to retrieve the values from an form to another html?

My code is ...
<form name="myForm" action="demo_form.html" onsubmit="return validateForm()" method="GET">
<input type="text" name="StuserID" id="basic" value="" placeholder="userID" />
<input type="submit" value="Login"/>
So, when I pressed the Login it will call method validateForm() and returns the boolean
function validateForm()
{
var x=document.forms["myForm"]["StuserID"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
}
Firstly, if the userId is null it should show an alert "Name must be filled out" and return false. In my case, it is succeeding and move to demo_form.html. How can I make it so that form submission and continuing to demo_form.html is only done when function returns true?
Secondly, how do I get the userid in demo_form.html from the form when pressing the login button?

you have to use php file to retrieve data from html form.your html code form should be
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="GET">
<input type="text" name="StuserID" id="basic" value="" placeholder="userID" required />
<input type="submit" value="Login"/>
and then
function validateForm()
{
var x=document.getElementById["StuserID"].value;
if (x=="")
{
alert("Name must be filled out");
return false;
}
else
{
return true;
}
}
your should use following code for demo_form.php file
<?php
$user = $_GET['StuserID'];
echo $user;
?>

1) Because false prevent the default behavior of form submit.
2) Create a session and use userid in session variable

I did't got exact error but in my case this following code works you can try this also
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
alert("sdfdfsf");
// return false;
var x=document.forms["myForm"]["StuserID"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.html" onsubmit="return validateForm()" method="GET">
<input type="text" name="StuserID" id="basic" value="" placeholder="userID" />
<input type="submit" value="Login"/>
</form>
</body>
</html>
and you can use jquery function also
Like .submit