When i press the reset form button, the appended information appears briefly, before being replaced by the search results. Onchange and onclick events are bound to the the form HTML tags.
<script>
function resetform(){
setTimeout(function(){
$('#appendresults2').empty();
$('#appendresults2').append('<div class="noresults"><h1>Please enter your query</h1></div>');
}, 50);
return;
}
</script>
<div id="appendresults2"><div class="noresults"></div></div>
<button class="btn btn-default" type="reset" onclick="return resetform();">Reset</button>
try like this..
HTML
<div id="appendresults2"><div class="noresults"></div></div>
<button class="btn btn-default" type="reset" onclick="resetform()" id="reset" >Reset</button>
Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#reset").click(function(){
setTimeout(function(){
$('#appendresults2').empty();
$('#appendresults2').append('<div class="noresults"><h1>Please enter your query</h1></div>');
}, 50);
});
});
</script>
See fiddle here....http://www.w3schools.com/code/tryit.asp?filename=FBGUL834B4MW
Related
I'm building my first laravel project and I'm trying to make a confirmation window for my "Delete" button. The thing is that confirmation window shows up, but whether I press "confirm" or "cancel" it would delete data anyway. Can you help me out?
Here is my code:
<a id="demo" href="{{route('viewfile2.delete2', $down->id)}}?{{time()}}">
<button type="submit" class="btn btn-primary" style="background-color:red;"onclick="myFunction()">
Delete
</button>
</a>
<script>
function myFunction(){
return confirm('Are you sure?');
}
</script>
To prevent your form submitting data, replace type="submit" by type="button" and replace your JavaScript code by testing the return value of the confirm call, if it's true then submit your form programmatically.
For testing purposes I made this:
<form id="deleteFormId" action="http://yourwebsite.kom/doDelete/4598765">
<button type="button" onclick='myFunction()'>Delete</button>
</form>
</body>
</html>
<script>
function myFunc(){
if (window.confirm("Are You Sure ?")) {
document.querySelector('#deleteFormId').submit();
}
}
</script>
See the Codepen example and Document.querySelector() documentation.
This is as much as simple
<a href="{{route('viewfile2.delete2', $down->id)}}?{{time()">
<i class="far fa-trash-alt trash_color" onclick="return confirm('If you delete {{$down->id}} it will be permanently deleted\nAre you sure?')"></i>.
</a>
My kendo template is as follows:
<div id="file-err-msg" > Please remove files with errors</div>
<input name="files" id="files" type="file" />
<script id="fileTemplate" type="text/x-kendo-template">
<span class='k-progress'>
</span>
<strong class='k-upload-status'>
<button type='button' class='btn-remove k-button k-button-bare k-upload-action'>
<span class='k-icon k-i-close k-delete' title='Remove'></span>
</button>
</strong>
</script>
<script>
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html())
});
</script>
I need to hide the div with id - file-err-msg, when the remove button is clicked. the Remove action is happening when the span with css class "k-delete" is clicked. I need to add the below event handler in addition, and it is never being called.
$(".k-delete").click(function () {
alert("Remove button clicked");
});
since these controls are rendered dynamically, i tried to bind them to the event handler as below, but nothing works.
$("body").on("click", ".btn-remove", function () {
alert("dynamic control event handler");
});
Any help is appreciated!
According to Kendo Upload API documentation, you can bind a function to the remove event.
So this is where you could hide your file-err-msg div :
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html()),
remove: function(e) {
$('#file-err-msg').hide();
}
});
Source code is like this:
<div>
<h4>comment content</h4>
<a id="delcmt_{{ comment.id }}">delete this comment</a>
</div>
......
<div>
<h4>comment content</h4>
<a id="delcmt_{{ comment.id }}">delete this comment</a>
</div>
I what to add ajax function to each of the "delete this comment" link:
<script type=text/javascript>
$(function() {
$('a#delcmt_id').bind('click', function() {
$.get($SCRIPT_ROOT + '/del_comment', {
}, function(data) {
$("#result").value(data.result);
});
return false;
});
});
</script>
What I can come out is using a loop to copy the upper ajax function for each comment, that must be very ugly. Any good ideas?
Try adding a class and select it with jquery add an event handler. You have to use the 'on' event because the elements you wish attach behavior to might be dynamic and load after document ready.
#*Render all this with razor, or angular or knockout*#
<div>
<h4>comment content</h4>
<span style="cursor: pointer;" id="1" data-rowid="1" class="delete-me-class">delete this comment</span>
</div>
<div>
<h4>comment content</h4>
<span style="cursor: pointer;" id="2" data-rowid="2" class="delete-me-class">delete this comment</span>
</div>
<script>
$(function () {
$('body').on('click', '.delete-me-class', function () {//http://api.jquery.com/on/ on is the latest 'live' binding for elements that may not exists when DOM is ready.
var rowId = $(this).data('rowid');
//TODO Use rowId for your delete ajax, or your element Id if you wish.
alert('You clicked on the delete link with the row ID of ' + rowId);
});
});
</script>
Here is a working Fiddle
I've searched for an answer but could not find any. Maybe someone here can point me to the right direction.
I have a simple modal form (bootstrap). It's meant to work like this.
You enter the form and click Send. The form-info is sent to e-mailadress. When mail is sent new modal with confirmation is displayed.
I've tried to implement this solution: Bootstrap Modal ajaxified
So far i have this:
The modal:
<div class="hide fade modal" id="input-modal">
<form class="form-horizontal well" data-async data-target="#input-modal" action="/some-endpoint" method="POST">
<fieldset>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<label>Name</label>
<input id="name" type="text" placeholder="Type your name...">
</div>
<div class="modal-footer">
Cancel
<button type="submit" class="btn btn-primary" value="send"/>Send</button>
</div>
</fieldset>
</form>
The Javascript:
jQuery(function($) {
$('body').on('submit','form[data-async]', function(event) {
alert('submit Event');
var $form = $(this);
var $target = $($form.attr('data-target'));
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
success: function(data, status) {
$target.html(data);
}
});
event.preventDefault();
});
});
But I need help with sending the input by mail and also sent info back to modal as a confirmation.
I've tried to solve this by myself for several days now, but now I've given up.
If you're using jQuery >= 1.5 look at the documentation here. This will provide you with a place to handle your new modal when the AJAX call returns. So your code would look something like this.
jQuery(function($) {
$('body').on('submit','form[data-async]', function(event) {
alert('submit Event');
var $form = $(this);
var $target = $($form.attr('data-target'));
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize()
}).done(function(data){
//pop your modal here
$('#your-new-modal').modal('show')
});
event.preventDefault();
});
This is assuming you plan to send the email server side as you can't send it from Javascript. In your example you would have changed the HTML content of the tag to the data returned from the AJAX call instead of opening a new modal. You can find documentation on opening the new modal via Javascript here.
Did not run this so there may be typos.
I am using Jquery Form wizard plugin in a MVC application. http://thecodemine.org/
I have a form with 4 steps. in one of step i have upload functionality.
I want submit functionality at each step and also back and next steps. later steps are optional.
I was able to add a submit button in navigation. On clicking it, form data related to active step is only submitted and other data is null.
For more clarity of my issue:
View :
<form id="myform" method="post" action="/Controller/Action">
<div id="fieldWrapper">
<fieldset class="step fieldset" id="first">
<legend class="legend">First step</legend>
Some input controls
</fieldset>
<fieldset class="step fieldset" id="second">
<legend class="legend">Second step</legend>
some more input controls (optional)
</fieldset>
<fieldset class="step fieldset" id="third">
<legend class="legend">Third step</legend>
some more input controls with filu upload
(optional)
</fieldset>
<fieldset class="step fieldset" id="fourth">
<legend class="legend">Fourth step</legend>
some more input controls (optional)
</fieldset>
</div>
<div id="demoNavigation">
<input class="navigation_button" id="back" value="Back" type="reset" />
<button type="submit" id="submitBtn">Submit and Finish</button>
<input class="navigation_button" id="next" value="Next" type="submit" />
</div>
</form>
Script:
<script type="text/javascript">
$(function () {
$("#myform").formwizard({
validationEnabled: true,
focusFirstInput: false,
disableUIStyles: true,
textSubmit: 'Submit and Finish',
textNext: 'Continue to next step',
next: "input:submit"
}
);
});
</script>
Updated the Jquery.form.wizard.js to so that the submit button hides at last step.
Now on each step i have submit button and navigation button.
When i submit form on second step, form data in second step is only posted and rest is not posted.
I went through the samples but could not find the appropriate one.
Can anyone suggest how to achieve this?
I went through the documentation and jquery.form.wizard.js file to get beeter understanding of what is done.
I just have to write some script as follows:
<script type="text/javascript">
$(function () {
$("#myform").formwizard({
validationEnabled: true,
focusFirstInput: false,
disableUIStyles: true,
textSubmit: 'Submit and Finish',
textNext: 'Continue to next step',
next: "input:submit"
}
);
});
$('#submitBtn').click(function () {
var stepInfo = $('#myform').formwizard('state');
for (var i = 0; i < stepInfo.activatedSteps.length; i++) {
stepInfo.steps.filter("#" + stepInfo.activatedSteps[i]).find(":input").not(".wizard-ignore").removeAttr("disabled");
}
});
</script>