Develop Reference

How to pass different hidden input fields based on the clicked submit button

I have two hidden input fields with the same name but with different id. I want to pass it via an action based on different submit button. When I click on the 'normal' process button it should pass the #normalfee hidden field value, and when clicking on 'urgent' it should pass #urgentfee value.
<form name="home" action="#" method="post">
<input type="hidden" name="fee" id="normalfee" value="49">
<input type="hidden" name="fee" id="urgentfee" value="99">
<input type="submit" name="Normal Process">
<input type="submit" name="urgent process">
</form>

I would use a radio button to select the state of the process and then infer the amount on the receiving end. That way users can't modify the value and you only have one button to submit the form while still having multiple options to choose from.
<form name="home" action="#" method="post">
Fee type:<br>
<input type="radio" name="fee" value="normalfee">Normal<br>
<input type="radio" name="fee" value="ugrentfee">Urgent<br>
<input type="submit" name="Process">
</form>

According to Form Controls
When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form.
You can check the attribute value on button click to remove the name attribute which will ultimately prevents the value from submitting:
$('input[type=submit]').click(function(){
$('#normalfee, #urgentfee').attr('name', 'fee');
if($(this).attr('name') == 'Normal Process'){
$('#urgentfee').removeAttr('name');
$('#urgentfee').attr('disabled', 'disabled');
}
else{
$('#normalfee').removeAttr('name');
$('#normalfee').attr('disabled', 'disabled');
}
var passVal = $('form').serialize();
alert(passVal);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="home" action="#" method="post">
<input type="hidden" name="fee" id="normalfee" value="49">
<input type="hidden" name="fee" id="urgentfee" value="99">
<input type="submit" name="Normal Process">
<input type="submit" name="urgent process">
</form>

disable button untill form filled with specific length

i am trying to create a form which needs to be filled with 9 numeric digits. I would like the submit button to be disabled untill the form is filled exactly with 9 digits. I have found many scripts with button disabled untill form is filled but not with specific length. Could you please help me?
<form name="form1">
<input type="text" name='text1' maxlength="9" class="phone-input">
<input type="button" value="submit" onclick="phonenumber(document.form1.text1); changeDiv();"/>
</form>
Thank You!

You can try to use a pattern. Didn't try it, but it must be something like this:
<input pattern=".{9}">

As suggested by Markus, you can use the pattern attribute to validate the input (specify \d to allow only digits), in addition to required. The validity.valid property of the text field can then be used to enable/disable the button in the input event handler:
<form name="form1">
<input id="txtPhone" type="text" name='text1' pattern="\d{9}" required maxlength="9" class="phone-input" >
<input id="btnSubmit" type="button" value="submit" disabled="disabled" />
</form>
<script>
document.getElementById("txtPhone").addEventListener("input", function () {
document.getElementById("btnSubmit").disabled = !this.validity.valid;
});
</script>
document.getElementById("txtPhone").addEventListener("input", function () {
document.getElementById("btnSubmit").disabled = !this.validity.valid;
});
<form name="form1">
<input id="txtPhone" type="text" name='text1' pattern="\d{9}" required maxlength="9" class="phone-input" >
<input id="btnSubmit" type="button" value="submit" onclick="alert('Submit!');" disabled="disabled" />
</form>

How to genetrate input field and their value based on user input on the other input field in jquery

I have an input field where user will enter isbn number based on the input number i need to populate two input field i.e book title and book author name i am calling a javscript function on onblur of input and i am getting the correct value but my problem is that if user will not move their cursor from the input field and click on submit button then how i will populate these two input field in these scenario onblur is not working
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price">
<input type="text" name="isbn_number" id="isbn_number" onblur="getdetail()">
</form>

Pick your preferred solution and adapt it to your website:
1) If your browser supports it, the easiest is make all your fields required and use onchange instead of onblur. This will force the user to enter an isbn, which will trigger the onchange containing more inputs with required.
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price" required>
<input type="text" name="isbn_number" id="isbn_number" onchange="getdetail()" required>
</form>
2) Do manual submitting after checking fields.
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price">
<input type="text" name="isbn_number" id="isbn_number" onblur="getdetail()">
<input type="submit">
</form>
<script>
document.querySelector('input[type="submit"]').addEventListener('click', function ( event ) {
var valid = false;
event.preventDefault();
// ...
// add validation code here.
// ...
if (valid) document.querySelector('#post').submit();
});
</script>
3) Only activate the submit if everything is valid.
<form name="post" id="post" method="post" action="#">
<input type="text" name="price" id="price">
<input type="text" name="isbn_number" id="isbn_number">
<input type="submit" disabled="disabled">
</form>
<script>
var valid = false;
document.querySelector('#post').addEventListener('change', function ( event ) {
if (event.target.name === 'isbn_number') getdetail();
// ...
// add validation code
// if (stuff && stuff && stuff) valid = true;
if (valid) document.querySelector('input[type="submit"]').removeAttribute('disabled');
});
</script>

How to call trigger.('click')

<div class="kn-submit">
<input type="hidden" name="parent_object" value="">
<input type="hidden" name="parent_field" value="field_510">
<input type="hidden" name="parent_id" value="">
<input name="view_key" type="hidden" value="view_848">
<input name="view_name" type="hidden" value="Edit OperationNu">
<input type="submit" value="Submit">
<div class="kn-spinner" style="display: none"></div>
$('.kn-submit').trigger('mousedown');// those 2 doesnt give results :(
$('.kn-submit').trigger('click');
My issue is that I want to make this button autoclick when specific function is called
Calling trigger on the class doesn't have any effects

You are trying to trigger on div element. You need to trigger click on submit button in this div.
Change it to:
$('.kn-submit input[type="submit"]').trigger('click');
And you dont need this:
$('.kn-submit input[type="submit"]').trigger('mousedown');
But also if you want just submit the form, use your form id and call this:
$('#form_id').submit();

To auto submit the form:
<form id="myform" action="target.php" method="post">
<input type="hidden" name="parent_object" value="">
<input type="hidden" name="parent_field" value="field_510">
<input type="hidden" name="parent_id" value="">
<input name="view_key" type="hidden" value="view_848">
<input name="view_name" type="hidden" value="Edit OperationNu">
<input type="submit" value="Submit">
</form>
<script>
$('#myform').submit();
</script>

Put the class name in the submit button. Also use the anonymous functions because you are calling the trigger function but you are not telling it what to do. Here is two ways you can proceed after you fix the class name:
Method 1:
$(".kn-submit").trigger("click", function(){
// what you want to do
});//trigger function
Method 2:
$(".kn-submit").click(function(){
// what you want to do
});//click function

Change value of input and submit form in JavaScript

I'm currently working on a basic form. When you hit the submit button, it should first change the value of a field, and then submit the form as usual. It all looks a bit like this:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>
And this is how far I've come with the JavaScript code. It changes "myinput"'s value to 1, but it does not submit the form.
function DoSubmit(){
document.myform.myinput.value = '1';
document.getElementById("myform").submit();
}

You could do something like this instead:
<form name="myform" action="action.php" onsubmit="DoSubmit();">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" />
</form>
And then modify your DoSubmit function to just return true, indicating that "it's OK, now you can submit the form" to the browser:
function DoSubmit(){
document.myform.myinput.value = '1';
return true;
}
I'd also be wary of using onclick events on a submit button; the order of events isn't immediately obvious, and your callback won't get called if the user submits by, for example, hitting return in a textbox.

document.getElementById("myform").submit();
This won't work as your form tag doesn't have an id.
Change it like this and it should work:
<form name="myform" id="myform" action="action.php">

Here is simple code. You must set an id for your input. Here call it 'myInput':
var myform = document.getElementById('myform');
myform.onsubmit = function(){
document.getElementById('myInput').value = '1';
myform.submit();
};

No. When your input type is submit, you should have an onsubmit event declared in the markup and then do the changes you want. Meaning, have an onsubmit defined in your form tag.
Otherwise change the input type to a button and then define an onclick event for that button.

You're trying to access an element based on the name attribute which works for postbacks to the server, but JavaScript responds to the id attribute. Add an id with the same value as name and all should work fine.
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" id="myinput" value="0" />
<input type="text" name="message" id="message" value="" />
<input type="submit" name="submit" id="submit" onclick="DoSubmit()" />
</form>
function DoSubmit(){
document.getElementById("myinput").value = '1';
return true;
}

My problem turned out to be that I was assigning as document.getElementById("myinput").Value = '1';
Notice the capital V in Value? Once I changed it to small case, i.e., value, the data started posting. Odd as it was not giving any JavaScript errors either.

I have done this and it works for me.
At first you must add a script such as my SetHolderParent() and call in the html code like below.
function SetHolderParent(value) {
alert(value);
}
<input type="submit" value="Submit" onclick="SetHolderParent(222);" />

You can use the onchange event:
<form name="myform" id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" onchange="this.form.submit()"/>
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="DoSubmit()" />
</form>

This might help you.
Your HTML
<form id="myform" action="action.php">
<input type="hidden" name="myinput" value="0" />
<input type="text" name="message" value="" />
<input type="submit" name="submit" onclick="save()" />
</form>
Your Script
<script>
function save(){
$('#myinput').val('1');
$('#form').submit();
}
</script>