Develop Reference

How to pass multiple input text value to method in controller

I having 3 textbox and I want to send value enter over there to controller method
<input class="form-control" type="text" id="id" name="id">
<input class="form-control" type="text" id="id1" name="id1">
<input class="form-control" type="text" id="id2" name="id2">
#Html.ActionLink("Send", "MethodNameInController", "ColtrollerName", new { id= $('#id').val(),
id1= $('#id1').val(), id2= $('#id2').val()})
and in controller
public ActionResult MethodNameInController(int id, string id1, string id2)
{
//some text here
}
but it's sending null value

If you want to stay on the same view or redirect to another url after, instead of using #Html.ActionLink() try passing the values to the controller using an ajax call.
function submitAjax(){
//purely for readability
var id = $('#id').val();
var id1 = $('#id1').val();
var id2 = $('#id2').val();
//ajax call
$.ajax({
url: "/ControllerName/MethodNameInController",
data: { id: id, id1: id1, id2: id2 },
success: function (result) {
//handle something here
}
});
};
<input class="form-control" type="text" id="id" name="id">
<input class="form-control" type="text" id="id1" name="id1">
<input class="form-control" type="text" id="id2" name="id2">
<button type="button" onclick="submitAjax()">submit</button>
If the method does some processing and then returns you to a different view, you could do a form submit.
function submitForm(){
var $form = $("#idForm");
//optional validation
$form.submit();
};
<form id="idForm" class="form-horizontal" asp-controller="ControllerName" asp-action="MethodNameInController" >
<input class="form-control" type="text" id="id" name="id">
<input class="form-control" type="text" id="id1" name="id1">
<input class="form-control" type="text" id="id2" name="id2">
<!-- type="button" prevents the from from submitting so you can do validation checks in the js -->
<button type="button" onclick="submitForm()">submit</button>
</form>

I got the solution using ajax just want to know is there any direct solution
$(function () {
$('#receipt').unbind('click');
$('#receipt').on('click', function () {
$.ajax({
url: "/Controller/Method",
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: JSON.stringify({
fromDate: $("#fromDate").val(),
toDate: $("#toDate").val(),
id: $("#id").val()
}),
async: false
});
});
});

How to check if submitting form with jQuery if successful?

I have following codes as form, and I wanted to check if the form is been successfully submitted.
I was wondering how I can check on the console. I want to check if the form is been successfully submitted so I can display another form.
<form id="signup" data-magellan-target="signup" action="http://app-service-staging.com" class="epic_app-signup" method="POST">
<div class="grid__column " style="width: 100%;">
<input type="text" name="first_name" placeholder="Name" required/>
</div>
<div class="grid__column " style="width: 100%;">
<input type="text" name="password" placeholder="Password" required/>
</div>
<div class="grid__column " style="width: 100%;">
<input type="text" name="confimred-password" placeholder="Confirmed password" />
</div>
<div class="grid__column " style="width: 100%;">
<input type="date" name="startdate" id="startdate" min="2019-12-16">
</div>
</div>
<button type="submit" class="grid__column" style="width: 50%;"></button>
</div>
</div>
</div>
</form>
and the script,
$('.epic_app-signup').on('submit', function(e) {
e.preventDefault();
var formData = $('.epic_app-signup').serializeArray();
var jsonData = {};
formData.forEach(function(item, index) {
jsonData[item.name] = item.value;
});
console.log('data\n', jsonData);
$.ajax({
url: 'http://app-service-staging.com/api/auth/register',
type:'POST',
data: jsonData,
contentType: 'application/json'
}).done(function(data, textStatus, jqXHR) {
if (textStatus === 'success') {
}
});
});
});

you can do this by various ways currently you are not using ajax request if you want to achieve this without ajax let follow these steps
when user click on submit button your form is submitted received form information(you define the path in action attribute where form submitted) after processing successfully redirect toward a new form
second solution use jquery ajax request
//first form
<form action='test.php' id='form_1' method='post'>
<label>Full Name</label>
<input type='text' name='full_name'>
<input type='submit'>
</form>
//second form
<form action='test.php' id='form_2' method='post' style='display:none'>
<label>Father Name</label>
<input type='text' name='father_name'>
<input type='submit'>
</form>
use jquery cdn
<script src='https://code.jquery.com/jquery-git.js'></script>
<script>
$("#form_1").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert("form submitted successfully");
$('#form_1').hide();
$('#form_2').show();
},
error:function(data){
alert("there is an error kindly check it now");
}
});
return false;
});
</script>

Sending user input text box value via jquery from a partial page to Controller

My partial view has a table with multiple rows with a button in each row (unique across each). When the button is pressed a jquery modal dialog is opened and the user can enter a value in a text box. That value is what i'm not able to get into a jquery variable to send to my MVC controller. All the jquery code is executed from the partial view.
I've tried every example I've seen on the web. I have code already that works, just not through a partial view.
CSHTML:
<form>
<div id="currentandnewtipamount">
<div>#Html.Label("Current Tip Amount: $")
<label for="CurrentTipAmount" ></label>
</div>
<br />
#Html.Label("Tip Edit Amount")
<input type="text" name="NewTipEditAmount" id="NewTipEditAmount" >
</div>
</form>
JQuery:
var TipEditDialog, RRN;
NewTipEditAmount = $("#NewTipEditAmount");
function SubmitTipEditAmount() {
NewTipEditAmount = $("#NewTipEditAmount").val().toString();
{
$.ajax({
type: "POST",
url: "/MyTransactions/UpdateTipAMT",
data: { 'NewTipEditAmount': NewTipEditAmount },
success: function (bool) {
//alert(bool);
}
});
}
}
Below is a working example in another part of the site that does not use a partial view.
JQuery:
var Logindialog, form;
loginusername = $("#loginusername"),
loginpassword = $("#loginpassword"),
loginnewpassword = $("loginnewpassword"),
loginconfirmnewpassword = $("loginconfirmnewpassword"),
allFields = $([]).add(loginusername).add(loginpassword);
function LoginUser() {
loginusername = $("#loginusername").val().toString();
loginpassword = $("#loginpassword").val().toString();
{
$.ajax({
type: "POST",
url: "/User/Login",
data: { 'loginusername': loginusername, 'loginpassword': loginpassword },
success: function (response) {
if (response === true) {
$("#Logindialog-form").dialog("close");
RunPasswordCheck(loginusername, loginpassword);
}
else {
alert("Something is not correct, try again please");
Logindialog.dialog("close");
}
}
});
}
}
CSHTML:
<div id="Logindialog-form" title="Log In" class="divloginformcontent">
<form class="loginformcontent">
<div id="usernameAndpassword" class="Usernamepassword">
<label for="username" class="loginfieldtext">Username</label>
<input type="text" name="loginusername" id="loginusername" class="loginfields" />
<br /><br />
<label for="password" class="loginfieldtext">Password</label>
<input type="password" name="loginpassword" id="loginpassword" class="loginfields" />
<br /><br />
</div>
<input type="submit" tabindex="-1" style="position: absolute; top: -1000px" id="LoginSubmit" /> #*tab index and style allows for the enter button to be used without messing up anything*#
</form>

**
Can you try using the Jquery in the page where Partial view is calling
instead of Inside Partial View.
**

Below is the code which ended up working for my situation. I seemed to need to have an 'id' for every element and reference them throughout the nesting in the jquery.
CSHTML:
<div id="EditTip-form" title="Edit Tip Amount" class="divloginformcontent">
<form class="loginformcontent" id="form">
<div id="currentandnewtipamount">
#Html.Label("Current Tip Amount: $") <label for="CurrentTipAmount" ></label>
<br />
#Html.Label("Tip Edit Amount")
<input type="text" name="NewTipEditAmount" id="NewTipEditAmount" class="forminput">
</div>
</form>
</div>
JQUERY:
function SubmitTipEditAmount() {
NewTipEditAmount = $('#EditTip-form #form #currentandnewtipamount #NewTipEditAmount').val();
{
$.ajax({
type: "POST",
url: "/MyTransactions/UpdateTipAMT",
data: { 'RRN': RRN, 'NewTipEditAmount': NewTipEditAmount },
success: function (bool) {
//alert(bool);
}
});
TipEditDialog.dialog("close");
}
}

How do I make a success alert appear after correct submission in javascript

I want to show the user a form sent correctly alert message with javascript using bootstraps built in alerts.
When I run the code I get the object array of the values (inspecting the page at console log). what I want to do is after it is sent, to display a success alert (if it is a success).
there is test4.sj which contains the javascript code and then there is main.php which is the code for the form.
The code that I have so far is in the snippet.
$('form.ajax').on('submit', function() {
var that = $(this),
type = that.attr('action'),
data = {};
that.find('[name]').each(function(index, value) {
//console.log(value);
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
console.log(data);
/* $.ajax({
url: url,
type: type,
data: data,
success: function(response){
console.log(response);
}
})*/
return false;
})
<body>
<form method="post" class="ajax">
<div>
<input name="name" type="text" placeholder="Your name" required>
</div>
<div>
<input name="lName" type="text" placeholder="Your Last Name">
</div>
<div>
<textarea name="message" placeholder="Your Message"></textarea>
</div>
<input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>

Just add hidden alert panel and show it on AJAX success.
HTML:
<form method="post" class="ajax">
<div class="alert alert-success js-alert hidden" role="alert">
Form was successfully sent!
</div>
...
<div>
<input name="name" type="text" placeholder="Your name">
</div>
...
<button type="submit" class="btn js-btn">Send</button>
</form>
JS:
$('form').on('submit', function( event ) {
var $form = $( this );
event.preventDefault();
$('.js-alert').addClass('hidden');
$('.js-btn').button('loading');
$.ajax({
url: '/someurl',
type: 'POST',
data: $form.serialize(),
success: function(response){
$('.js-alert').removeClass('hidden');
$('.js-btn').button('reset');
}
});
});
Check the fiddle:
https://jsfiddle.net/xw63db57/1/

you can use ajax jqXHR status and statusCode and based up on that you can write the alert code
success(data, textStatus, jqXHR){
var statusCode = jqXHR.status;
var statusText = jqXHR.statusText;
}

Inserting Data into MySQL without calling PHP file inside HTML

I have a form:
<form method="post" action="insert.php">
<input type="text" name="firstname" placeholder="Vorname" required>
<br>
<input type="text" name="lastname" placeholder="Nachname" required>
<br>
<input type="text" name="nickname" placeholder="Spitzname" required>
<br>
<input type="email" name="email" placeholder="Email" required>
<br>
<input type="submit" value="Speichern">
</form>
As you can see my action is action="insert.php" so that calls my insert.php. A new url is created and it is opened in the browser.
But what if i dont want that? I want to stay on the same site where the form is and i would prefer not to call any php directly. i would prefer to call a javascript function. For example, my select i do with ajax:
function getData() {
$.ajax({
url: "queries.php",
data: {action: "retrieve_data"},
dataType: "json",
type: "post",
success: function(output) {
// do stuff
}
});
}
Can i also do something like that with the insert?

<html>
<body>
<form method="post" action="insert.php" id="insertForm">
<input type="text" name="firstname" placeholder="Vorname" required>
<br>
<input type="text" name="lastname" placeholder="Nachname" required>
<br>
<input type="text" name="nickname" placeholder="Spitzname" required>
<br>
<input type="email" name="email" placeholder="Email" required>
<br>
<input type="button" id="insertData" value="Speichern">
</form>
<script type="text/javascript" src="lib/js/jquery-2-1-3.min.js"></script>
<script type="text/javascript">
$(function () {
$('#insertData').click({ inputs:$('#insertForm :input') }, getData);
});
function getData(o) {
var values = {};
o.data.inputs.each(function() {
values[this.name] = $(this).val();
});
$.ajax({
url: "queries.php",
data: {action: "retrieve_data", firstname: values['firstname'], lastname: values['lastname'], nickname: values['nickname'], email: values['email']},
dataType: "json",
type: "post",
success: function(output) {
// do stuff
}
});
}
</script>
</body>
</html>
Here you go, you can always edit is as you want, or what values are optional and such.
Remember i've used a type="button" so the page doesn't reload, so the action could just stay empty.

Since you seem to be using jQuery, this is easy; as explained in the documentation. If you give your form id=insertForm this should work:
$("#insertForm").submit(function(e){
$.ajax({
url: "/insert.php",
type: "post",
data: $(this).serialize();
});
e.preventDefault();
});