i have a problem, i want to delete some name and leave some. but the problem when i try to delete one name it deletes the first one yet you have clicked to delete the last one.
so the main point is
how can i delete or send the name value which i want to delete instead deleting the first one or all.
because they all have same name 'info' but different values.
so i want to be deleting some and leave some instead all or only on top ones
any idea how i can do this
$(document).ready(function() {
$("#remove").click(function(event) {
Execute();
});
function Execute() {
$.ajax({
type: 'POST',
url: 'remove.php',
data: {
'info': $("input[name='info']").val()
},
success: function(response) {},
error: function() {
alert("error");
}
});
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">
<input type="text" name="info" value="John">
<button type='button' id='remove'> delete</button>
<input type="text" name="info" value="Jane">
<button type='button' id='remove'> delete</button>
<input type="text" name="info" value="jacobo">
<button type='button' id='remove'> delete</button>
</form>
First, use a class instead of an id for your buttons. The ID should be unique.
Second, you can grab the previous input for the clicked button (target).
$(document).ready(function() {
$('.remove').click(function(event) {
execute($(event.target).prev('input'));
});
function execute($input) {
console.log(`Deleting: ${$input.val()}`);
$.ajax({
type: 'POST',
url: 'remove.php',
data: {
'info': $input.val()
},
success: function(response) {},
error: function() {
alert("error");
}
});
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">
<input type="text" name="info" value="John">
<button type="button" class="remove">Delete</button>
<input type="text" name="info" value="Jane">
<button type="button" class="remove">Delete</button>
<input type="text" name="info" value="jacobo">
<button type="button" class="remove">Delete</button>
</form>
Related
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
});
});
});
I created a page, where I can easily update or insert data. It actually works, but if I click on the edit button, then I close the modal, then I add new data, it updates the previous data instead of inserting a new row. But if I refresh a page, then I update a row, it works. How can I solve this problem?
index.php:
<form method="post" id="insert_form">
<label><b>Name:</b></label>
<input type="text" name="name" id="name" class="form-control" readonly required />
<br />
<label><b>Description:</b></label>
<input type="text" name="hu" id="hu" class="form-control"></textarea>
<br />
<label><b>Cégek:</b></label>
<select name="company[]" id="company" multiple>
<?php
while($row = $huResult2->fetch_array()) {
?>
<option value="<?php echo $row['company_id'];?>"><?php echo $row['company_name'];?></option>
<?php
}
?>
</select>
<br/><br/>
<input type="hidden" name="data_id" id="data_id" />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
<script>
$('#add').click(function() {
$('#insert').val("Insert");
$('#insert_form')[0].reset();
$('#company').multiselect('refresh');
$('#name').removeAttr('readonly');
});
// Edit roles
$(document).on('click', '.edit_data', function() {
$("#company option").prop("selected", false);
$("#name").attr('readonly', true);
var data_id = $(this).attr("id");
// Receive the current datas for the roles
$.ajax({
url: "fetchRole.php",
method: "POST",
data: {
'data_id': data_id
},
dataType: "json",
success: function(data) {
$('#name').val(data.name);
$('#hu').val(data.hu);
$.each(data.companies, function(i, e) {
$("#company option[value='" + e + "']").prop("selected", true);
});
$('#company').multiselect('refresh');
$('#data_id').val(data.id);
$('#insert').val("Update");
$('#add_data_Modal').modal('show');
}
});
});
$('#insert_form').on("submit", function(e) {
e.preventDefault();
// Update and insert
$.ajax({
url: "insertRole.php",
method: "POST",
data: $('#insert_form').serialize(),
beforeSend: function() {
$('#insert').val("Updating...");
},
success: function(data) {
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#role_table').html(data);
location.reload();
}
});
});
</script>
Do one thing make data_id field value blank when you are closing the modal
$('#myModal').on('hidden.bs.modal', function () {
$("#data_id").val("");
})
Maybe it will help
or on click of add new button do the same
$('#add').click(function() {
$('#insert').val("Insert");
$('#insert_form')[0].reset();
$('#company').multiselect('refresh');
$("#data_id").val("");
$('#name').removeAttr('readonly');
});
I have a button and input field, and want to send the value of that field into an ajax call. I'm having a brain freeze at the moment and could use some help. Here's what I have so far.
function submit() {
$.ajax({
type: 'POST',
url: 'http://localhost:8000/getCoords',
dataType: 'json',
data: {name: 'Abduh'},
success: (success) => {
console.log(success);
},
error: (error) => {
console.log(error);
}
});
}
<input type=text id=search placeholder=Search />
<br/>
<button id=submit onclick="submit()">Submit</button>
you should sue quote around properties values
<input type='text' id='search' placeholder=Search />
<br/>
<button id='submit' onclick="submit();">Submit</button>
$("#submit").on("click",function(){
var url= 'http://localhost:8000/getCoords';
$.post( url, { name: $("#search").val() }).done(function(data) {
alert( "Data Loaded: " + data );
});
});
<input type="text" id="search" placeholder="Search" />
<button id="submit">Submit</button>
I've a page which have two different forms:
Form 1:
<form id="info-form" method="POST" action="">
<label for="name">What is your Name? </label>
<input required type="text" name="name" placeholder="Enter your full name here." />
<label for="email">What is your email ID? </label>
<input required type="email" name="email" placeholder="your.name#email.com" />
<label for="mobile-number">What is your 10-Digit Mobile Number? </label>
<input required type="text" name="mobile-number" maxlength="10" placeholder="Enter num." />
<label for="posting-place">What is your current place of residence? </label>
<input type="text" name="place" placeholder="Enter your current residing place here." />
<button type="submit" class="btn btn-lg btn-success">
Submit
</button>
<button type="reset" class="btn btn-lg btn-warning">
Reset
</button>
</form>
Form 2:
<form id="contact-form" method="POST" action="">
<label for="name">What is your Name? </label>
<input type="text" name="name" placeholder="Enter your full name here." />
<label for="email">What is your email ID? </label>
<input type="email" name="email" placeholder="your email" />
<label for="message"> Your Message: </label>
<textarea id="message" name="message" rows="5" placeholder="Type in your message here"></textarea>
<button id="submit_button" type="submit" class="btn btn-lg btn-success">
Send
</button>
<button id="reset_button" type="reset" class="btn btn-lg btn-warning">
Reset
</button>
</form>
I then have these below thank you messages after the closing form tag of both the above two forms
Thank you message after submitting Form 1:
<div style="display:none;" id="thankyou_form">
<p><em>Thank You</em> for submitting!</p>
</div>
Thank you message after submitting Form 2:
<div style="display:none;" id="thankyou_contact">
<p><em>Thank You</em> for contacting! We will get back to you soon!</p>
</div>
I then have two script for displaying the thank you message on the same page after the form is submitted.
<script type="text/javascript">
$(function ()
{
$('form').submit(function (e)
{
e.preventDefault();
$.ajax(
{
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (response)
{
console.log(response);
if(response.result == 'success')
{
// this is for the second form. For the 1st form ID is changed to thankyou_form
document.getElementById("thankyou_contact").style.display = "inline";
}
else
{
// this is for the second form. For the 1st form ID is changed to thankyou_form
document.getElementById("thankyou_contact").style.display = "none";
}
}
});
});
});
</script>
But when I submit the second form the thankyou message is also displayed is the first form. Also, the form is submitted twice.
Can you please inform me how to identify both the javascript separately? Or, Can I combine both the script into one but both submit buttons working independently of each other?
It would be very much helpful and also enlightening for me if you can point out my mistake.
P.S. I'm a beginner.
Edit1: The javascript code was modified (but currently non-working) as per suggestion from David. The new code is:
<script type="text/javascript">
$(function ()
{
$('form').submit(function (e)
{
if(e.target === 'form#info-form')
{
e.preventDefault();
$.ajax(
{
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (response)
{
console.log(response);
if(response.result == 'success')
{
document.getElementById("thankyou_info").style.display = "inline";
}
else
{
document.getElementById("thankyou_info").style.display = "none";
document.getElementById("sorry_info").style.display = "inline";
}
}
});
}
if(e.target === 'form#contact-form')
{
e.preventDefault();
$.ajax(
{
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (response)
{
console.log(response);
if(response.result == 'success')
{
document.getElementById("thankyou_contact").style.display = "inline";
}
else
{
document.getElementById("thankyou_contact").style.display = "none";
document.getElementById("sorry_contact").style.display = "inline";
}
}
});
}
});
});
</script>
Use event.target to determine which form is getting submitted, You need to refine your code as,
if(response.result == 'success')
{
// Determine if the submission came from "Info Form" or "Contact Form"
if(e.target === 'form#info-form')
{
document.getElementById("thankyou_form").style.display = "inline";
}
else
{
document.getElementById("thankyou_contact").style.display = "inline";
}
}
else
{
// this is for the second form. For the 1st form ID is changed to thankyou_form
document.getElementById("thankyou_form").style.display = "none";
document.getElementById("thankyou_contact").style.display = "none";
}
I am new in angularJs .
This is my bit level view
<input type="text" ng-model="todoName" size="30"
placeholder="Add Your Name">
<input type="text" ng-model="todoAge" size="30"
placeholder="Add Your Age">
<input type="hidden" ng-model="todoId" />
<form style="display:'?????????'" ng-submit="addTodo()">
<input class="btn-primary" type="submit" value="add">
</form>
<form style="display:'?????????'" ng-submit="addTodo()">
<input class="btn-primary" type="submit" value="update">
</form>
and this is my angularjs bit level coding
$scope.DisplayUpdate = "none";
I have one screan for manage student details, i want to show add button when first time at this time hide update button , and when update time to show update button and at this time add button was need to hide .
see this line for set to hide and show details in script side using angular js : $scope.DisplayUpdate = "none";
How to i set this value in my button style ?
<form style="display:'?????????'" ng-submit="addTodo()">
<input class="btn-primary" style="display:'?????????'" type="submit" value="add">
</form>
You can use ng-show to hide it
<form ng-show="DisplayUpdate === 'none'" ng-submit="addTodo()">
<input class="btn-primary" type="submit" value="add">
</form>
If you want to remove it from DOM tree, use ng-if
<form ng-if="DisplayUpdate === 'none'" ng-submit="addTodo()">
<input class="btn-primary" type="submit" value="add">
</form>
Don't set the style directly, use the ng-show directive and let Angular handle it for you.
API Docs
Finally i got it .
Below is my code :
JS file :
function TodoCtrl($scope) {
var value = BindStudentList();
function BindStudentList() {
$.ajax({
url: '/Home/Contact1',
type: 'GET',
async: false,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data) {
value = data.data;
}
});
$scope.DisplaySave = true;
$scope.DisplayUpdate = false;
return value;
}
$scope.addTodo = function () {
$.ajax({
url: '/Home/Index1',
type: 'GET',
data: { todoName: $scope.todoName, todoAge: $scope.todoAge },
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data) {
value = data.data;
}
});
};
$scope.Sample = value;
$scope.remaining = function () {
var count = 0;
angular.forEach($scope.Sample, function (todo) {
count += todo.done ? 0 : 1;
});
return count;
};
$scope.editTodo = function (Student) {
$.ajax({
url: '/Home/Edit1',
type: 'GET',
data: { Id: Student.todo.StudentId },
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data) {
$scope.todoName = data.data.StudentName;
$scope.todoAge = data.data.StudentAge;
$scope.todoId = data.data.StudentId;
$scope.DisplayUpdate = true;
$scope.DisplaySave = false;
}
});
};
}
and this is my view code
<!doctype html>
<html ng-app>
<body>
<script src="~/Scripts/angular.js"></script>
<h2>Student Details</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{Sample.length}} remaining</span>
[ archive ]
<input type="text" ng-model="todoName" size="30"
placeholder="Add Your Name">
<input type="text" ng-model="todoAge" size="30"
placeholder="Add Your Age">
<input type="hidden" ng-model="todoId" />
<form ng-show="DisplaySave" ng-submit="addTodo()">
<input class="btn-primary" type="submit" value="Save">
</form>
<form ng-show="DisplayUpdate" ng-submit="addTodo()">
<input class="btn-primary" type="submit" value="Update">
</form>
<br />
<br />
<table>
<tr>
<td><b>Student Name</b></td>
<td><b>Student Age</b></td>
</tr>
<tr ng-repeat="todo in Sample">
<td><span>{{todo.StudentName}}</span></td>
<td><span>{{todo.StudentAge}}</span></td>
<td>
<button value="{{todo.StudentId}}" ng-click="editTodo(this)">Edit</button>
</td>
</tr>
</table>
</div>
<script src="~/Scripts/Todo.js"></script>
</body>
</html>
I added the ng-show="DisplaySave" and ng-show="DisplayUpdate" in my buttons , and i will pass the values like true or false in javascript using angularjs when edit and load time .
Now it's working. I know my code will helps to other person . cheers