The form begins:
<% using (Html.BeginForm("Index", "recordssbook", FormMethod.Post, new { id = "SubmitForm" }))
{ %>
The submit button I would like to validate (there are other submit buttons in the same form):
<div><input type="submit" value="Delete Selected" id ="DeleteButton" name="DeleteButton" onclick="deleteRecordsDialog();"/></div>
The buttons in my confirm dialog in js that automatically returns false:
function deleteRecordsDialog() {
var returnThis;
var numRecords = selectedRecordsArr.length;
document.getElementById("popupContainer");
var html = ""
html= html + '<table>';
html= html + '<tr>';
html= html + '<td class="warning-icon-cell"></td>';
html= html + '<td style="padding-left: 5px;">';
if (numAddresses == 1) {
html = html + '<p>You have chosen to delete a record.</p>';
}
else {
html = html + '<p>You have chosen to delete ' + numRecords + ' records.</p>';
}
html= html + '<p>Are you sure you wish to proceed?</p>';
html= html + '</td>';
html= html + '</tr>';
html = html + '</table>';
if (numAddresses == 1) {
html = html + '<div><input type="button" value="Yes, Delete Contact" style="width: 160px; onclick="document.DSubmitForm.HDeleteButton.submit(); CloseDialog();"/> <input type="button" value="Cancel" onclick="CloseDialog();"/></div>';
}
else {
html = html + '<div><input type="submit" value="Yes, Delete Contact(s)" style="width: 160px; onclick="document.DSubmitForm.HDeleteButton.submit(); CloseDialog();"/> <input type="button" value="Cancel" onclick="CloseDialog();"/></div>';
}
html = html + '</div>';
html = html + '</div>';
html = html + '</div>';
html = html + '</div>';
OpenDialog(html, 350, 180, false, "Delete Contact")
return false;
}
My issues:
Even with onclick returning false the form is submitted:
I can change the input type to button instead of submit, and this should work if I can get the psuedo submit to work
is _doPostBack another way to submit the form?: From my google searches I think this should simulate the submit but when I make the submit button a regular button as stated in number 1 clicking "Yes, Delete Record(s)" doesn't submit the form.
I have multiple submit buttons which makes this more complex
I cannot use JQuery's easy .dialog
If someone can help me out in getting this to work I would GREATLY appreciate it!
Thanks!!
EDIT
So the html a list of records with buttons that can query based on letter, add a record, delete a record and edit a record. All of these buttons are submit buttons in the same form.
<td><input type="submit" value="ABC" name="SubmitButton"/></td>
<td><input type="submit" value="DEF" name="SubmitButton" /></td>
<td><input type="submit" value="GHI" name="SubmitButton" /></td>
<td><input type="submit" value="JKL" name="SubmitButton"/></td>
<td><input type="submit" value="MNO" name="SubmitButton"/></td>
<td><input type="submit" value="PQRS" name="SubmitButton" /></td>
<td><input type="submit" value="TUV" name="SubmitButton"/></td>
<td><input type="submit" value="WXYZ" name="SubmitButton" /></td>
<div><input type="button" value="Add Contact" id="addAddress" onclick="AddAddresDialog()" /></div>
<div><input type="button" value="View & Edit Selected" id="EditButton" name="EditButton" onclick="updateAddressDialog()"/></div>
<div><input type="submit" value="Delete Selected" id ="DeleteButton" name="SubmitButton" /></div>
I only want to add the confirm dialog to the delete button being clicked. I want to confirm it using a custom dialog window which is a div on the site master that appears as a pop up by being placed on top of a mask that covers the whole screen which is created in deleteRecordsDialog().
What I want to do is change the submit button for the delete task (id="DeleteButton) to a regular button that just opens the dialog created by deleteRecordsDialog() instead of the form submission it does now. The "Yes, Delete Contact(s)" button in the custom confirm dialog should take on that task of submitting the form with the value "Delete Selected" just as the submit button does now.
It is hard to really understand what you are trying to do without your html. However, you can try out the following:
HTML:
<div>
<input type="submit" value="Delete Selected" id ="DeleteButton" name="DeleteButton" onclick="deleteRecordsDialog();"/>
<input type="button" id ="DeleteButtonSubmit" name="DeleteButtonSubmit" style="display:none;" />
</div>
Javscript:
To create button for modal:
html = html + '<div><input type="button" value="Yes, Delete Contact(s)" style="width: 160px; onclick="deleteContact();"/> <input type="button" value="Cancel" onclick="CloseDialog();"/></div>';
Function to post the delete confirmation:
function deleteContact()
{
document.getElementById('DeleteButtonSubmit').click();
}
This function will click a hidden button below the button the user initially clicked. if you setup this button correctly, the form should submit with all of the information you need.
Related
I'm trying to send a request and get answer from my own synonyms api. The api works very well. And the javascript is getting the answer, but it keeps refreshing the page and in the end there's no output in my html.
This is my html script:
<form method="POST">
<input type="text" class="question" />
<button class="gen-syn">Generate synonyms</button>
<input type="submit" value="Save"/>
</form>
And this is my javascript:
$(document).on('click','.gen-syn',function(){
var questionVal = $(".question").val();
if (questionVal == ''){
$(".question").focus();
}
else {
$.ajax({
type :'POST',
url : "http://192.168.1.9:5000/synonyme_word/"+questionVal,
success : function(response){
var divSynonymes = $(document.createElement('div'));
$(".question").after(divSynonymes);
for (var a in response){
$(divSynonymes).append('<h1 class="titre-textareal-question-icona-go " value=>'+a+'</h1>'+
'<div class="form-group row" >'+
'<div class="col-sm-12 listeSyn">'+
'</div>'+
'</div>'
);
for (syn in response[a]){
var synonyme = response[a][syn]
$(".listeSyn").append(
'<input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110-100" autocomplete="off" />'+
'<div class="btn-group">'+
'<label for="frm-test-elm-110-100" class="btn btn-primary">'+
'<span class="fa fa-check-square-o fa-lg"></span>'+
'<span class="fa fa-square-o fa-lg"></span>'+
'<span class="content">'+synonyme+'</span>'+
'</label>'+
'</div>');
}
}
},
});
return False;
}
});
I didn't make any reload, but the navigator keeps reloading after calling the api (when I click on Generate synonyms button)
Get rid of the <form> altogether. Its behaviour messes with your code. Just use a <div>.
This should fix your issue.
<input type="text" class="question" />
<button class="gen-syn">Generate synonyms</button>
<input type="submit" value="Save"/>
you need only one button to make a API call and then your JS code is creating dynamic div and other elements to show the synonyms.
Hope this helps.
Thnaks in advance. I am new in web developing and stuck in one problem. I am creating a form in which I want variable number of input fields. So I have tried to create dynamic input fields creation by taking help of some online sources. I have tried everything I could imagine but the code is not working.
So far I have written this code : index.html
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>Dynamic Add Input Fields</header>
<form name="form1" id="form1">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
<td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
</tr>
</table>
<input type="button" name="submit" id="submit" value="Submit"/>
</form>
<script type="text/javascript" >
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="row'+i+'" class="btn_remove" Value="X" /></td></tr>');
});
$('.btn_remove').on('click','.btn_remove',function () {
var button_id = $(this).attr("id");
$("#row"+button_id+"").remove();
});
});
</script>
</body>
</html>
Now when I run this code then the output comes :
Dynamic Add Input Fields
[ Input Fields ] [Add Button]
[Submit Button]
So it soould work like when I click "Add" button then it should add one more input field and a "remove" button beside it.
But if I click the "Add" button, nothing happens, just URL changes.
You need add event handler for each new item
$('#dates').append(
$('<div class="'+classname+'">'+dd+'<br /><span class="month_selector">'+dm+'</span></div>')
.click(function(){
// handle click
})
);
jQuery: adding event handler to just created element
I am trying to write a feature where a table data is generated from a database along with buttons like editing that particular row. The data is generated through a foreach from laravel. One of these buttons is called Edit User.
When the Edit User is clicked a form div will be .toggle('show') which will show the form.
Now I think the problem is the buttons have the same id for the toggle so when I press the second, third and so on buttons the form doesn't toggle.
Here is my script.js
$(document).ready( function() {
$("#form1").hide();
$("#form2").hide();
$("#createuser1").click(function() {
console.log('Create user button clicked');
$("#form2").hide();
$("#form1").toggle('slow');
});
$("#edituser1").click(function() {
console.log('Edit user button clicked');
$("#form1").hide();
$("#form2").toggle('slow');
});
});
//start of checkuser
function fetchUser(field, query) {
console.log('The field is ' + field + ' and the userid is ' + query);
}
my html file (main.blade.php)
<tbody>
#foreach($users as $user)
<tr>
<td>{{$user->userid}}</td>
<td>{{$user->firstname}}</td>
<td>{{$user->lastname}}</td>
<td>{{$user->username}}</td>
<td>{{$user->password}}</td>
<td>
#if($user->status == 0)
Inactive
#elseif($user->status == 1)
Active
#endif
</td>
<td>
<input class="btn btn-danger btn-inverse" type="button" value="Inactive" />
<input name="edituser" type="button" onclick="fetchUser('edituser', {{$user->userid}})" id="edituser1" class="btn btn-success btn-inverse" value="Edit User"/>
</td>
</tr>
#endforeach
</tbody>
This is the part where it toggles the forms (also part of main.blade.php)
<div class="container" id="form1">
#include('create')
</div>
<div class="container" id="form2">
#include('edit')
</div>
I have only included parts of the code to avoid chunks of unrelated code. But feel free to ask for any more details.
Help me solve the part where the other edit buttons doesn't toggle the edit user form.
I think it is better not to have inline click event handler if you have already a click handler in your code.
Change the id to a class:
<tbody>
#foreach($users as $user)
<tr>
<td>{{$user->userid}}</td>
<td>{{$user->firstname}}</td>
<td>{{$user->lastname}}</td>
<td>{{$user->username}}</td>
<td>{{$user->password}}</td>
<td>
#if($user->status == 0)
Inactive
#elseif($user->status == 1)
Active
#endif
</td>
<td>
<input class="btn btn-danger btn-inverse" type="button" value="Inactive" />
<input name="edituser" type="button" data-id="{{$user->userid}}" class="btn btn-success btn-inverse editUser" value="Edit User"/>
</td>
</tr>
#endforeach
</tbody>
Then change your js this way:
$(document).ready( function() {
$("#form1").hide();
$("#form2").hide();
$("#createuser1").click(function() {
console.log('Create user button clicked');
$("#form2").hide();
$("#form1").toggle('slow');
});
$(".editUser").click(function() {
console.log('Edit user button clicked');
var id = $(this).attr('data-id');
fetchUser('edituser', id);
$("#form1").hide();
$("#form2").toggle('slow');
});
});
//start of checkuser
function fetchUser(field, query) {
console.log('The field is ' + field + ' and the userid is ' + query);
}
This way you can reuse the code for all the edituser buttons, you have a much more readible code, you don't have two different click event handler and you don't loose the id of the single user to be passed to the fetchUser function
Well, as I see it, you have two options. Unique ids are a must. I'm assuming your userids are unique, so I'd recommend using them as suffixes to create unique ids for your elements.
First option: Create a unique form for each user that is opened when Edit User is clicked.
Second option: Create a generic form that is populated with the user information when Edit User is clicked.
The first is simpler, but the second with be more efficient. Here is example code of the second solution. Main HTML:
<div class="container" id="main">
<!-- ... -->
<input type="button" onclick="fetchUser('edituser', {{$user->userid}}, {{$user->firstname}}, {{$user->lastname}})" class="btn btn-success btn-inverse" value="Edit User" />
<!-- ... -->
</div>
Edit form HTML:
<div class="container" id="form2">
<input id='editFormFirstName' />
<input id='editFormLastName' />
<input id='editFormPassword' />
</div>
And JS:
function fetchUser(field, userid, firstname, lastname) {
$('#editFormFirstName').val() = firstname;
$('#editFormLastName').val() = lastname;
$('#editFormPassword').val() = "";
}
I have the following code which I use to add text-boxes dynamically on click of button. It works.
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" onclick="addForm()"/>
The javascript for the above code is:
function addForm() {
$("#forms").append(
"<input type ='text' class='winner' name='winner[]'><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
}
I am using auto complete to get data from database in the text-box
What I want is - suppose if a user clicks on add more winner button but does not want to add any data in the textbox, I should give him a button to delete the extra text-box.
How should the JavaScript be written for this?
Do see my above code
var i=0;
function addForm() {
i++;
$("#forms").append(
"<input type ='text' id='input_'"+i+" class='winner' name='winner[]'><button onclick='delete('"+i+"')' id='button_'"+i+">delete</button><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
function delete(i)
{
$("#input_"+i).remove();
$("#button_"+i).remove();
}
simply use a counter to set an ID to inputs and buttons and send that counter to delete function;
Simply use the code below :
$("#forms").append("<p><input type ='text' class='winner' name='winner[]' ><button onclick='$(this).parent().remove()'>delete</button></p>");
Try this function.
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById('strText'+intTextBox));
intTextBox = intTextBox-1;
}
}
Try adding a remove button while adding a text box dynamically to remove the text box if necessary
Here is the html code
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" />
Here is the jQuery code
$('#addmore').click(function () {
$('#forms').append('<input type ="text" class="winner" name="winner[]"><input type="button" onclick="$(this).prev().remove();$(this).remove();">');
});
Here is the demo
I'm creating a gallery that allows the uploader to upload an image/multiple images at a time. As a default, one file input is displayed with a text input for the corresponding image description.
I also have another button which simulates the file input being clicked for aesthetical purposes. Upon clicking this button, the file browser triggers but the form in which the file inputs are placed seems to submit?
<button id="new-dialogue">add image</button>
<form action="action.php" method="post" enctype="multipart/form-data">
<div class="create-upload">
<!-- SECTION REPEATED WITH DIFFERENT IDS AS #NEW-DIALOGUE CLICKED -->
<div class="upload">
<input class="image-upload" type="file" id="input1" name="file[]"/>
<button class="btn-select" id="1">select file</button>
<input id="desc" type="text" name="desc[]"/>
</div>
<!-- SECTION -->
</div>
</form>
with JavaScript
$('document').ready(function() {
var i = 1;
$('#new-dialogue').click(function() {
i++
if(i >= 6) {
} else {
$('.create-upload').append('<div class="upload"><input class="image-upload" type="file" id="input' + i + '" name="file[]"/><button class="btn-select" id="file' + i + '">select file</button><input id="desc" type="text" name="desc[]"/></div>');
$('.image-upload').imgPreview();
}
});
$('.btn-select').click(function () {
var id = this.id;
$('input#input' + id).click();
});
});
Put type='button' to disable the button from acting as a submit type.
<button class="btn-select" id="file1" type='button'>select file</button>