We Keep Coding

Sending input names in Django form having javascript code

I have the following code:
<form id="buttonForm" action = "/goSomeWhere" method="post" >
<input type="submit" name="bnext" value="Next Page" >
<input type="submit" name="bprevious" value="Previous Page" >
</form>
When either one of this two buttons are submitted I receive "bnext" or "bprevious" values in Django View request.POST so I can further construct the logic that I need.
But when I'm trying to insert some javascript for the second button I loose those values:
<input type="submit" name="bnext" value="Next Page" >
<input type="submit" name="bprevious" id="bpid" onclick="disable()" value="Previous Page" >
function disable()
{
document.getElementById("bpid").disabled = true;
document.getElementById("buttonForm").submit();
}
There is a way to do this and still receiving input names values ?

Sorry I didn't fully understood that what you are trying to do
If you are trying to stop form submission then:
function disable() {
document.getElementById("bpid").disabled = true;
document.getElementById("buttonForm").preventDefault();
}
If you want that client should not click previous button again then, it is best to change inputType submit to hidden:
function disable() {
document.getElementById("bpid").type="hidden";
document.getElementById("buttonForm").submit();
}
Or
create new <input type=hidden>, set name values ,append to form and submit it:
function disable() {
document.getElementById("bpid"). disabled=true;
newip= document.createElement("input");
newip.type="hidden";
newip.name="bprevious";
newip.value="Previous Page";
document.getElementById("buttonForm").appendChild(newip);
document.getElementById("buttonForm").submit();
}

try to use button instead input like this
<button name="bprevious" id='bpid' onclick='disable()' value="Previous Page">Previous Page</button>

Multiple Form Submits using the same Function

I have a form that is using a function like
$(document).ready(function() {
$("#form1").submit(function() {
But I have 2 other forms that I'd like to use the same function if/when they submit, how would I write that?
$(document).ready(function() {
$("#form1").submit(function(),
$("#form2").submit(function(),
$("#form3").submit(function() {
Thanks

If I understand, you want to share a function for various submit event handlers. This is fairly simple:
function submitHandler() {
// handler stuff here.
}
$(document).ready(function() {
$("#form1").submit(submitHandler);
$("#form2").submit(submitHandler);
$("#form3").submit(submitHandler);
}
and alternative, if you want to handle all forms, is to specify which forms in the jquery selector. You can do this for all forms on the page:
$(document).on('submit','form', function() { });
or, if you just add a class name to the forms you want to use it on:
$(document).on('submit','.formclass', function() { });

You should be able to just do this:
$("#form1, #form2, #form3").submit(function() {
formid = this.id;
console.log('Processing form [' +formid+ ']');
...etc...
Any of the specified IDs will trigger that submit function.
Using the formid var, you can fine-tune any form-specific mods within the function.

You can pass the id of the form to submit them separately.
This code will allow you to have as many forms as you like without having to update the JS.
function submitForm(id) {
$("#" + id).submit(function(e) {
e.preventDefault();
for (let i = 0; i < e.target.length - 1; i++) {
console.log(e.target[i].name, e.target[i].value);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
<input name="name">
<button onClick="submitForm('form1')">Submit</button>
</form>
<form id="form2">
<input name="name">
<button onClick="submitForm('form2')">Submit</button>
</form>
<form id="form3">
<input name="name">
<button onClick="submitForm('form3')">Submit</button>
</form>

By JQuery you can use the below function $("form").submitNow() with any form element.
$.fn.submitNow = function() {
var form = $(this);
// handle form element
console.log(this.id, this.action);
$(this).submit();
}
//use it
$("form").submitNow();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="./action1" id="action1">
<input type="submit" value="form1" />
</form>
<form action="./action2" id="action2">
<input type="submit" value="form2" />
</form>
<form action="./action3" id="action3">
<input type="submit" value="form3" />
</form>

How to get the input type submit ID and apply javascript

I am using below jsp' form to submit the data. Before submitting I want to apply javascript.
<form name="inventory" method="post" action="<%=request.getContextPath() %>/Tdata_Main" class="form-light mt-20" role="form" onsubmit="return validate(this)">
Now, I have three input tags of 'Submit' type
<input type="submit" name="submit" class="btn btn-two" value="Update Inventory">
<input type="submit" name="submit" class="btn btn-two" value="Add Empty Row">
<input type="submit" id="submitDelete" name="submit" class="btn btn-two" value="Delete Row">
After adding three new columns and filling in the data one by one, I added forth one as shown below. Now, I am in no need of this forth empty row hence I want to delete it. But the javascript code is getting applied here too and asking me to fill in the blank fields.
Below is the javascript code that is getting executed on the onSubmit event initiated from form.
<script type="text/javascript">
function validate(form) {
//alert(form.id);
if(form.id != "submitDelete"){ // NOT WORKING
for(var i = 0; i < form.elements.length; i++){
if(form.elements[i].type == "text"){
if(form.elements[i].value.length == 0 || form.elements[i].value.length == "null"){
alert('No value entered in '+form.elements[i].name+'.');
form.elements[i].focus();
return false;
}
}
}
}
if (confirm("Would you like to proceed!") == true) {
return true;
}
else{
return false;
}
}
</script>
How could I avoid getting this javascript code being applied on Delete using Javascript. Kindly suggest.

Your code works fine. Only one thing you should remove the action attribute from your form element and post that data using javascript only.
Also your delete button is disabled. Enable it and it will work fine

ASP.NET MVC and Javascript - Submit button submitting form, onclick #URL.Action not firing

I have two submits, one to submit the form on page 1, the other to submit form on page 1 and redirect to form 2 on page 2.
<input type="submit" value="Submit and Add Expense" onclick="window.location.href='#Url.Action("Create", "Expense")';"/>
The issue is, when this secondary submit button is clicked it just submits the form just like the first submit button. It appears that the redirect #url.action is not firing. Thoughts?

The following code should do the trick.
<input type="submit" id="btnOne" value="One"/>
<input type="button" id="btnTwo" value="One"/>
<script>
var sample = sample || {};
sample.url = '#Url.Action("Create", "Expense")';
</script>
//you can move it to a separate file
<script>
$(function(){
$("#btnTwo").click(function(){
var form = $("form");
form.submit();
setTimeout(function() {
window.location.href = sample.url;
},100);
});
});
</script>

I wound up going the easy route of assigning value property to the button, and then checking the button value in the controller.
// View
<input type="submit" value="Submit" />
<button name="button" value="SubmitAndExpense">Submit and Add Expense</button>
// Controller
[HttpPost]
public ActionResult Create(string button)
{
if (button != "SubmitAndExpense") {...}
}

form buttom disable onsubmit but form is not submited in javasc

<script>
function disableButton() {
var button = document.getElementById('accept');
button.disabled = true;
return true;
}
</script>
<form class="form-horizontal" name ="reg" method="post" action="" onSubmit="return disableButton()"/>
<button class="btn btn-info" name="sub" type="submit" id="accept">
<i class="icon-ok bigger-150"></i>
Submit
</button
When I hit submit button button is disbled but form is not submitted
Kindly any one please do favour

Instead of trying to add functions to your forms, you can simply catch your form submit, disable the button and allow it continue afterwards:
HTML Part:
<form class="form-horizontal" id="reg" name="reg" method="post" action="" />
Javascript Part:
<script type="text/javascript">
var form = document.getElementById('reg');
if (form.attachEvent) {
form.attachEvent("submit", processForm);
} else {
form.addEventListener("submit", processForm);
}
function processForm(e) {
if (e.preventDefault) e.preventDefault();
var button = document.getElementById('accept');
button.disabled = true;
return true;
}
</script>
If you wish to test it out, change above to return false;. This will disable the form submit and only disable the button.

Try the following:
<?php echo "<pre>";var_dump($_POST); echo "</pre>";?>
<script>
function disableSubmit() {
var button = document.getElementById('accept');
button.disabled = true;
myNiceForm.submit();
}
</script>
<form class="form-horizontal" id="myNiceForm" name ="reg" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<input type="text" name="myTestText"/>
<input id="accept" type="submit" onclick="disableButton()"/>
</form>
Things to consider:
If you want your HTML form to be posted, it needs to have a proper
value for the action attribute.
The button with the id of accept doesn't cause the form to be
posted, you also don't have any client-side script to do so, and it's
not a good practice, so a submit button has been added to the form.
When you click the submit button, the disableSubmit() function
invokes, and disables the button, and finally submits the form
programmatically, however, it's not necessary.

Your function does not follow proper syntax. But other than that there's no real reason to return true or false...
var acceptor = document.getElementById("accept");
acceptor.addEventListener("click", toggleButton);
function toggleButton() {
acceptor.disabled = "disabled"
}
<button class="btn btn-info" name="sub" type="submit" id="accept">
<i class="icon-ok bigger-150"></i>
Submit
</button>
Also, your button tag is not closed <button> </button>...
You can simply define the attribute are defined as a boolean true or false, which means you can specify their value and leave everything else out. i.e. Instead of disabled="disabled".
You may want to consider a function buttonToggler... so you can later switch it back easily (although I'm not sure this will help you...
Also... have the script at the bottom of the body rather than the top in-case of a preloading issue (this is not a foolproof solution to the problem where the JS loads faster than the HTML).
<script type="text/javascript">
function toggleButton() {
var acceptor = document.getElementById('accept');
if acceptor.disabled === true{
acceptor.disabled=false;
} else {
acceptor.setAttribute('disabled', 'disabled');
}
</script>
Try that.