Submit not submitting form but moving cursor to input field - html

I'm out of options and a bit frustrated. I'm not that familiar with HTML but I have got two forms one where a button of the type="submit" sends my view model to the server side controller and this here where it does not do it. In this form, if I click the submit button the cursor gets moved to the Surcharges[i].Price input field in my table instead. The only difference between the two forms is that this form here has input fields in the table whereas the other has select fields.
<form autocomplete="off" asp-controller="PriceList" asp-action="UpdateSurchargeFixPrices" enctype="multipart/form-data">
<div class="container">
<div class="card">
<div class="card-header bg-primary text-white">
<h4 class="text-center">#localizer["PriceListEdit"]</h4>
</div>
<div class="card-body">
<input hidden value="#Model.BackTo" asp-for="BackTo" />
<table class="table">
<thead>
<tr class="table-secondary">
<th>#localizer["Bezeichnung"]</th>
<th>#localizer["Gruppe"]</th>
<th>#localizer["Code"]</th>
<th>#localizer["Maximaler Wert in"] #Model.Currency</th>
<th>#localizer["Preis in"] #Model.Currency</th>
</tr>
</thead>
<tbody>
#if (Model.Surcharges != null)
{
for (int i = 0; i < Model.Surcharges.Count; i++)
{
<tr>
<td><input hidden value="#Model.Surcharges[i].Id" asp-for="Surcharges[i].Id" /><input value="#Model.Surcharges[i].Description" asp-for="Surcharges[i].Description" /></td>
<td>
<input value="#Model.Surcharges[i].Group" asp-for="Surcharges[i].Group" />
</td>
<td>
<input value="#Model.Surcharges[i].Code" asp-for="Surcharges[i].Code" />
</td>
<td>
<input value="#Model.Surcharges[i].MaxValue" asp-for="Surcharges[i].MaxValue" />
</td>
<td>
<input value="#Model.Surcharges[i].Price" asp-for="Surcharges[i].Price" />
</td>
</tr>
}
}
</tbody>
</table>
</div>
</div>
<a class="btn btn-primary" asp-controller="PriceList" asp-action="BackTo" asp-route-backTo="#Model.BackTo">#localizer["zurück"]</a>
<a class="btn btn-primary" asp-controller="PriceList" asp-action="NewSurchargeFixPrice">#localizer["neuer Aufschlag"]</a>
<button class="btn btn-primary" type="submit">#localizer["speichern"]</button>
</div>
</form>

I change the input field to
< input formnovalidate="formnovalidate".../>
and now I can reach the breakpoint in my controller.

Related

esp32, button onclick Can't find variable: of function

I cant get any of the buttons using onclick to recognise the functions. I get an error "cant find variable". Im very new to all this and at a loss. It doesn't matter which button I click I have the same issues with all of them.
in the below code,
I click on <button onclick="show_admin()">Admin</button> which should call function show_admin().. What am I doing wrong please.
Inspector output
const char main_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset='UTF-8'">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="refresh" content="500; url=/">
<title>System Settings</title>
<body onload="show_admin()">
<div class="banner">
<h1>X Controller</h1>
</div>
<div class="split left">
<div class="centered">
These are my button
<button onclick="show_admin()">Admin</button>
<br/>
<button onclick="show_wifi()">WIFI</button>
<br/>
<button onclick="show_tags()">Tags</button>
<br/>
</div>
</div>
<div class="split right">
<div class="centered" id="showdata">
</div>
</div>
</body>
<script>
These are my functions
function show_admin() {var table_data = <h1>Admin Settings</h1><br/>%s<br/>
<form action="/ADMINSetting" method="POST">
<table><tr>
<td> User Name </td> <td> <input type="String" name="UserName" placeholder="%s"></td>
</tr><tr>
<td> Password </td> <td> <input type="String" name="UserPass" placeholder="%s">
</td></tr></table>
<input type="submit" value="Update Admin Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_wifi() { var table_data = <h1>WIFI Settings</h1><br/>%s<br/>
<form action="/WIFISetting" method="POST">
<table>
<tr>
<td> SSID Network </td> <td> <input type="String" name="WifiSsid" placeholder="%s"></td>
</tr><tr>
<td> SSID Password </td> <td> <input type="String" name="SsidPass" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update Wifi Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_tags() { let table_data = <h1>Tag Settings</h1><br/>%s<br/>
<form action="/DEVICESetting" method="POST">
<table>
<tr>
<td> Access Tag 1 </td> <td> <input type="String" name="TAG1" placeholder="%s"></td>
</tr>
<tr>
<td> Access Tag 2 </td> <td> <input type="String" name="TAG2" placeholder="%s"></td>
</tr>
<tr>
<td> Cleaner Tag 1 </td> <td> <input type="String" name="CTAG1" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update BLE Tag Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
</script>
</body>
</html>
)=====";
I have tried rearranging the function and moving its position. with no luck
Unless you have JSX installed, You can't just stick HTML elements into JavaScript like that. You will need to use quotes around all the HTML.
It looks like you're reusing the same tags anyway, why not stick all those tags into the HTML portion and update the values in Javascript? You can also update the CSS through JavaScript and set display:none if you want to hide an unused element.
I added the below to the html section
<div class="split right">
<div class="centered" id="showdata">
<form id="adminForm">
<table>
<tr>
<td> User Name </td>
<td>
<input type="String" name="UserName" placeholder="%s">
</td>
</tr>
<tr>
<td> Password </td>
<td>
<input type="String" name="UserPass" placeholder="%s">
</td>
</tr>
</table>
<input type="submit" value="Update Admin Details">
</form>
and the following to the script section
function admin(){
document.getElementById("wifiForm").style.display="none";
document.getElementById("tagForm").style.display="none";
document.getElementById("adminForm").style.display="block";
}

Change input format in dynamic table: dropdown, number, date

I'm working on dynamic 3 column table that has 3 input text type : Product, quantity and date
This works good but i want to change type format:
Product column => Dropdown type
Quantity column => number type
Date column => Date type (dd-mm-yyyy)
How i do change it?
Thank you
Original source: link
Code online: https://jsfiddle.net/bvotcode/r61ptxe9/7/
HTML
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Date</th>
</tr>
<tr id="row1">
<td id="product_row1">Car</td>
<td id="quantity_row1">10</td>
<td id="date_row1">20/12/2021</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="product_row2">Book</td>
<td id="quantity_row2">22</td>
<td id="date_row2">26</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="product_row3">Laptop</td>
<td id="quantity_row3">44</td>
<td id="date_row3">19/01/2022</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_product"></td>
<td><input type="text" id="new_quantity"></td>
<td><input type="text" id="new_date"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
</body>
CSS
.pt-3-half { padding-top: 1.4rem; }
Javascript
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var product=document.getElementById("product_row"+no);
var quantity=document.getElementById("quantity_row"+no);
var date=document.getElementById("date_row"+no);
var product_data=product.innerHTML;
var quantity_data=quantity.innerHTML;
var date_data=date.innerHTML;
product.innerHTML="<input type='text' id='product_text"+no+"' value='"+product_data+"'>";
quantity.innerHTML="<input type='text' id='quantity_text"+no+"' value='"+quantity_data+"'>";
date.innerHTML="<input type='text' id='date_text"+no+"' value='"+date_data+"'>";
}
function save_row(no)
{
var product_val=document.getElementById("product_text"+no).value;
var quantity_val=document.getElementById("quantity_text"+no).value;
var date_val=document.getElementById("date_text"+no).value;
document.getElementById("product_row"+no).innerHTML=product_val;
document.getElementById("quantity_row"+no).innerHTML=quantity_val;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_product=document.getElementById("new_product").value;
var new_quantity=document.getElementById("new_quantity").value;
var new_date=document.getElementById("new_date").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='product_row"+table_len+"'>"+new_product+"</td><td id='quantity_row"+table_len+"'>"+new_quantity+"</td><td id='date_row"+table_len+"'>"+new_date+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_product").value="";
document.getElementById("new_quantity").value="";
document.getElementById("new_date").value="";
}
You're using the type="text" for all of the <input> tags. You should consider changing the type of the inputs in your edit_row function.
For numbers, the type of input should be number;
For dates, date;
And finally, to render a dropdown box, the best solution is to use a <select> tag instead of an <input>. Don't forget to write all the options of your dropdown inside of <option> tags (which should be all inside of one <select> tag); Here you can find a simple explanation on how to use the <select> tag.

Additional text boxes return old value, how do I make my textboxes blank?

I have made text boxes for my website using Angular, users have an option to add more information by clicking a button that gives them another group of text boxes to fill in. However, when this happens the new text boxes appear with the previous information I filled in. I want the additional text boxes to be blank as they were with the first set, but I am not sure how to achieve this.
<button type="button" class="close" ng-click="$ctrl.closeInfoModel()">×</button>
<h5 class="title">Add Details</h5>
</div>
<div class="modal-body">
<ng-form name="detailsForm">
<div class="row">
<div class="col-sm-12">
<h5 class="modal-title">Client Details:
<a data-ng-show="!$ctrl.isEditingDetails && !$ctrl.addingAnotherSetOfDetails"
data-ng-click="$ctrl.addingAnotherSetOfDetails = true"><i class="tools-plus fa fa-plus" aria-hidden="true"></i></a>
<span data-ng-show="$ctrl.isEditingDetails || $ctrl.addingAnotherSetOfDetails">
<a title="Save" data-ng-click="$ctrl.saveDetails(detailsForm.$valid)" ><i class="tools-plus fa fa-floppy-o" aria-hidden="true"></i></a>
<a title="Saving" ng-if="$ctrl.isSavingDetails"><i class="tools-plus fa fa-spinner fa-spin" aria-hidden="true"></i></a>
<a title="Cancel" data-ng-click="$ctrl.stopEditingOrAdding()"><i class="tools-plus fa fa-times" aria-hidden="true"></i></a>
</span></h5>
<br>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table" ng-if="$ctrl.clientDetails.length == 0">
<thead>
<tr>
<td><b>Desired Amount</b></td>
<td><b>Credit Limit</b></td>
</tr>
</thead>
<tbody>
<tr>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="desiredAmount" ng-model="$ctrl.inputDesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
<table class="table" ng-if="$ctrl.clientDetails.length > 0">
<thead>
<tr>
<td><b>Desired Amount</b></td>
<td><b>Credit Limit</b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="criteria in $ctrl.clientDetails">
<td ng-if="!$ctrl.isEditingDetails">{{criteria.desiredAmount}}</td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="desiredAmount" ng-model="$ctrl.inputdesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td ng-if="!$ctrl.isEditingDetails">{{criteria.CreditLimitLimit}}</td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
<table class="table" ng-if="$ctrl.addingAnotherSetOfDetails">
<thead>
</thead>
<tbody>
<tr>
<td>
<input name="desiredAmount" ng-model="$ctrl.inputdesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td>
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
</div>
</div>
Component file
All references to the function that adds text boxes are below, I set addingAnotherSetOfDetails to false in the component controller
public stopEditingOrAdding(): void {
this.isEditingDetails = false;
this.addingAnotherSetOfDetails = false;
}
public saveDetailsForClients(isFormValid: boolean): void {
if (!isFormValid) {
return;
}
let clientDetails = new app.domain.detailsCriteriaModel(this.inputDesiredAmount, this.inputCreditLimit);
this.detailsCriteria.push(clientDetails);
this.isEditingDetails = false;
this.addingAnotherSetOfDetails = false;
}

Show Partial view in Bootstrap modal

I am creating MVC app and using Bootstrap Modal to give an opportunity to user to check input data, and to send those data to controller using Ajax. Modal window:
<div class="modal" tabindex="-1" role="dialog" id="myModal" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Check input data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
{
<div class="modal-body">
<table class="table">
<tr>
<td>Category name: </td>
<td><b>#Model.CategoryName </b></td>
</tr>
<tr>
<td>Date: </td>
<td><label id="SelectedDateTimeLabel"></label></td>
</tr>
<tr>
<td>Client name: </td>
<td><input type="text" name="ClientName" id="ClientName" value="#Model.ClientName" /></td>
</tr>
<tr>
<td>Client code: </td>
<td><input type="text" name="ClientCode" id="ClientCode" value="#Model.ClientCode" /></td>
</tr>
</table>
</div>
<input type="hidden" name="CategoryId" id="CategoryId" value="#Model.CategoryId" />
<input type="hidden" name="SelectedDateTime" id="SelectedDateTime" />
<div class="modal-footer" id="divChangeRegion">
<input type="submit" class="btn btn-info" value="OK" data-backdrop="static">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
And after pressing the submit button I execute controller's method which save inputed data in database and send back partial view, whcih I want to input in those Modal
Controller's code:
public ActionResult SelectReservationDateTime(ReservationTimeModel PartialViewModel)
{
...
return PartialView(newModel);
}
Partial view code:
#model EQueue.Data.Ticket
<div class="row">
<div class="col-md-4 offset-md-4">
<table>
<tr>
<td class="border" id="printThis">
You get ticket №<b>#Model.CodeTicket</b><br />
Category Name <br />
<b>"#Model.TicketCategory.NameCategory"</b><br />
</td>
</tr>
<tr>
<td><input type="button" class="btn btn-primary text-center" value="Print ticket" onclick="printTicket('printThis')" data-dismiss="modal"></td>
<td><input type="button">
</tr>
</table>
</div>
</div>
<script>
function printTicket(partForPrint)
{
var printContents = document.getElementById(partForPrint).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
But I get new window instead of creating partial view in existing Modal, can anybody help me?
Firstly I would change this line:
#using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions { UpdateTargetId = "divChangeRegion" }))
To:
#using(Html.BeginForm(null, null, FormMethod.Post, new {id = "whatever"}))
Then have some jquery that uses the id of the form to check if it's been submitted. Once it has you should fire an ajax call to that method of yours that returns a partialview. To implement a partialview you need to specify a div where it will be place using an id and then in your success use this line of code to put the partialview into that div.
$("id of the div").html(result);

Mandatory attribute not working in html webapp

I am using HTML webapp form and the fields are selected as a mandatory (required) but I am able to submit the data without updating required fields.
Below are my detailed HTML and gs script, help me to fix the concern
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["Project Name"] = $("#ProjectName").val();
jsonObj["updateBtn"] = $(btnClicked).text();
google.script.run.withSuccessHandler(afterSaving).saveDate(jsonObj);
}
function afterSaving() {
alert("Thanks, Your response has been recorded");
$("button").attr("disabled", false);
}
</script>
<form action="" method="get">
<div class="container">
<table class="table table-bordered" width="" style="width:54%">
<thead>
<tr class="one">
<th width="33%">
Project Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="form-group txt">
<input name="" type="text" placeholder="" class="form-control input-md" id="ProjectName" required="required">
</div></td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="col-md-2 col-md-offset-5">
<div class="form-group">
<button style="display:block;width:100%" id="updateBtn" name="singlebutton" class="btn btn-success" type="submit" onclick="submitForm()" >Save</button>
</div>
</div>
</div>
You need to remove onclick="submitForm()" and instead add onsubmit="submitForm()" in the form tag.
<form onsubmit="return submitForm()">
Also, add return false; to submitForm function.