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>

Submit form on change of dropdown list in Semantic UI?

I would like to submit form when an element is selected - skipping pressing the submit button.
I tried using onchange="this.form.submit()", but it's not working here.
This is the code:
<form action="" method="get">
<div class="ui floating dropdown labeled search icon button dd">
<input type="hidden" name="nutr_code">
<span class="text">Select nutrient</span>
<div class="menu">
<div class="item" data-value="ca">Calcium</div>
<div class="item" data-value="fe">Iron</div>
<div class="item" data-value="mg">Magnesium</div>
<div class="item" data-value="zn">Zinc</div>
</div>
</div>
<br><br>
<input type="submit" value="Show results">
</form>

Because you are using GET method you can redirect with javascript by constructing the url yourself.
$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
location.href = 'http://example.com/?nutr_code=' + value;
}});
Second option is changing the input field 'nutr_code' with the value from the callback as shown above
$('input[name="nutr_code"]').val(value);
and submit the <FORM/> from js.
$('form').submit();
EDIT:
Example of second option.
$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
// Uncomment if semantic is not updating the input before submit.
//$('input[name="nutr_code"]').val(value);
$('form').submit();
}});

You need to define action in form tag or add some method to submit button
<input type="submit" value="Show results" onclick="someFunction()">
You need to define someFunction() too if you follow this way. Thanks

You Can Use Jquery
$(document).ready(function(){
$("input[name='nutr_code']").on('input',function(e){
$("input[type='submit']").trigger( "click" );
});
});

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") {...}
}

AJAX and submit button on form interaction

I'm creating a simple website and a html page on it which contains a table that shows products. I load this table using AJAX and it work properly. Here is a screenshot:
Under the table I have buttons which perform CRUD operations using AJAX.
They communicate to a php script on a server outside of my domain using GET method.
When I click on Add product it opens a form with a button that whose onclick event calls a function which adds a product using AJAX. But, when I click, the whole page reloads and the product is not added. If I put the value that says wheter the call is async to false, it works as intended and the product is added to the table, however that is not the point of AJAX.
This is my code for adding a product(delete and update are almost the same).
<div id="addProductPopup">
<div id="popupContact">
<form id="form" method="post" name="form">
<img id="close" src="/servis/Resursi/Slike/close.png" onclick ="hide('addProductPopup');">
<h2>Dodavanje proizvoda</h2>
<hr>
<input id="name" name="naziv" placeholder="Naziv proizvoda" type="text" required>
<input id="kolicina" name="kolicina" placeholder="Količina proizvoda" type="text" required>
<input id="url" name="url" placeholder="URL slike" type="text" required>
<input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct()">
</form>
</div>
When I click on submit this function is called:
function addProduct(){
var isValid = true;
var url = "http://zamger.etf.unsa.ba/wt/proizvodi.php?brindexa=16390";
var amount = document.form.kolicina.value;
var naziv = document.form.naziv.value;
var slikaurl = document.form.url.value;
var validity = validateFields(naziv, slikaurl, amount);
if(!validity) return false;
var product = {
naziv: naziv,
kolicina: amount,
slika: slikaurl
};
var requestObject = new XMLHttpRequest();
requestObject.onreadystatechange = function(event) {
if (requestObject.readyState == 4 && requestObject.status == 200)
{
loadProducts();
event.preventDefault();
}
}
requestObject.open("POST", url, true);
requestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
requestObject.send("akcija=dodavanje" + "&brindexa=16390&proizvod=" + JSON.stringify(product));
}

It is because you are not preventing the default action of the submit button click.
You can return false from an event handler to prevent the default action of an event so
<input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct(); return false;">
But since you have a form with a submit button, I think it will be better to use the submit event handler like
<form id="form" method="post" name="form" onsubmit="addProduct(); return false;">
....
<input type="submit" value="Pošalji" class="popupButtons">

Your problem is that your submit button still executes a real submit. You could change your addProducts method. The method have to return false to prevent the real submit.

Submit button performs default Submit action for HTML code.
Try to change Submit tag into Button tag. Or after AddProduct() in OnClick JS Action put
return false;

Simple Change put input type="button" instead of tpye="submit"
<input type="button" value="Pošalji" class="popupButtons" onclick="addProduct()">

jQuery not hiding divs (mvc 4)

I have 2 divs:
<div class="lobsummary">
<input type="submit" name ="sbmtbtn">
<input type="submit" name ="sbmtbtn">
</div>
<div class="applicationsummary">
</div>
I want to show applicationsummary when sbmtbtn is submitted so I used the below script:
$('.lobsummary input:submit').submit(function (event) {
$('.applicationsummary').show();
$('.lobsummary').hide();
});
But its not working.
EDIT: The divs are enclosed in <% Html.BeginForm("Index", "Home"); %> which I am using to pass values to my controller from the view.

Use event.preventDefault() it stops the default action
$('.lobsummary input[type=submit]').click(function (event) {
event.preventDefault();
alert($(this).index() + 1);
$('.applicationsummary').show();
$('.lobsummary').hide();
});

#Rajaprabhu Aravindasamy is right,use submit() over a form:
$("form").submit( function () {
return false;
} );
HTML on the client side will be like:
<div class="lobsummary">
<form action="/"method="post">
<input type="submit" name ="sbmtbtn">
</form>
<form action="/"method="post">
<input type="submit" name ="sbmtbtn">
</form>
</div>
<div class="applicationsummary">
</div>
Just use click() to test your jquery selection:
$('.applicationsummary').hide();
$(".lobsummary form:eq(0)").click(function () {
alert(1)
$('.applicationsummary').show();
});
$(".lobsummary form:eq(1)").click(function () {
alert(2)
$('.applicationsummary').hide();
});
Then replace the click to submit.

When the form was submitted, it reloaded the whole page and that's why it was not hiding because it was going back to its default view. So I used if statements in my view to hide the forms.