We Keep Coding

How to add elements to a form before submitting? WITHOUT AJAX

Is there a way to add data to a form before submitting it?
or add this form to a formdata and submit the formdata (without .$post, .$ajax or
XMLHttpRequest). the formdata can be submitted as a normal form.

You could do form submit event
function test(){
document.querySelector('#new_insert').value="hi"
//do stuff here
return true
}
<form action="action.php" method="get" onsubmit="return test()">
<input type="text" name="one"/>
<input id="new_insert" name="new" type="text">
<input type="submit">
</form>

<form onsubmit="return addfield();" id="myform">
<input type="text" name="txtname" value="Your name">
<input type="submit" name="btnsubmit" value="Submit">
</form>
<script>
function addfield(){
var oldhtml=document.getElementById("myform").html();
var newhtml='<input type="text" name="txtcity" value="Your city">';
document.getElementById("myform").html(oldhtml+newhtml);
}
</script>

you can add any hidden input you want:
<input type="text" name="my_hidden_input" value="my_value" id="hidden_input" hidden/>
and change the value whenever you want (on form submit or after page gets load)
$('#hidden_input').val("my_second_value")

How to run form action and click event simultaneously on button click

I am having a form like this
<form name="test" action="action.php" method="get">
<input type="text" />
<input type="button" value="download"/></form>
I need a click event for download button. Eg. If i click download it should submit as action.php and run $('#button').click(function(){ also. How can I do it.

Perform the operation on 'download' button click then trigger the form submit using trigger
$('.download').click(function(e){
alert('downloading!') //Your Download Logic HERE
$(this).parent().trigger('submit')//Trigger Form SUBMIT ONCE THE OPERATION IS DONE
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="test" action="action.php" method="get">
<input type="text" />
<input type="button" value="download" class="download"></form>

Firstly note that <form> elements are not self closing, so your current HTML is invalid; the input elements need to be within the form itself.
Once that is fixed you can trigger() a submit event on the parent form to the #button element, like this:
$('#button').click(function() {
console.log('Custom logic here...');
$(this).closest('form').trigger('submit');
});
$('form').on('submit', function(e) {
e.preventDefault();
console.log('Submitting form...');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="test" action="action.php" method="get">
<input type="text" />
<input type="submit" value="search" />
<input type="button" value="download" id="button" />
</form>

You can simply submit your form by javascript, after clicking download button:
$('#button').click(function(){
...
document.forms["myform"].submit();

submit function does not trigger onsubmit return function?

I think I have a misunderstanding of the onsubmit attribute. I thought that every submission, like a <input type="submit" ...>, <button></button> or any javascript form.submit() trigger the onsubmit="return function();" after the submit. In other words, I will never see the "last triggered" log.
Example:
function triggerFirst() {
console.log("first triggered");
myForm.submit();
}
function triggerLast() {
console.log("last triggered");
return true;
}
<form id="myForm" onsubmit="return triggerLast();">
<input type="button" onclick="triggerFirst();" value="trigger">
</form>
This example will never trigger the onsubmit, why? I thought onsubmit means if someone submits? Is that false?

It works.
UPDATED:
Place the 2nd function inside first.
function triggerFirst() {
alert('wow');
triggerLast()
}
function triggerLast() {
alert('wowpsubmit');
return true;
}
<form id="myForm" onsubmit='return triggerLast();'>
<input type="button" onclick="triggerFirst();" value="trigger" >
</form>

An HTML form does not require javascript to work. Refer the code below:
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
The <form action="action_page.php"> declaration is run once the form is submitted.
The <input type="submit" value="Submit"> is a built in type that triggers the form action to run.
See more here

In your triggerFirst function the inner function call to submit does nothing. That submit function is not defined. I think here you want to make the function submit so below I passed a reference to the form into the triggerFirst function. This should clarify things for you. Open the console to view the output.
function triggerFirst(form) {
console.log('triggerFirst')
console.log(form);
form.submit();
}
function triggerLast() {
console.log('triggerLast')
return true;
}
<form onsubmit="return triggerLast();">
<input type="button" onclick="triggerFirst(this.form);" value="trigger">
</form>

use js functions return value for html form action attribute

I want to use the return value of a JS function as the URL for a form get action. Is it possible or do I need to set the form attributes with a function call in the onSubmit attribute?
edit: this is basically what i want to do
<div class="search">
<form method="get" action="https://duckduckgo.com/" id="search-form">
<input id="searchbar" type="text" name="q" size="31" maxlength="255" value="" autofocus="autofocus"/>
</form>
<script type="text/javascript">
document.getElementById("search-form").action = "bang()";
</script>
</div>
the bang function is an implementation of the bang system from DDG in JS, so i can easily add bangs to a searchbox in my webpage.

You can use the onsubmit event for the form to set the action before the actual submit happens.
<form id="testForm" methods="get" action="#" onsubmit="setFormUrl()">
Search: <input type="text" name="q" />
<input type="submit" value="Go" />
</form>
function bang()
{
return "http://www.google.com";
}
function setFormUrl()
{
var url = bang();
document.getElementById('testForm').setAttribute('action', url);
}

javascript function call for single form

I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?

Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.

type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();