I am stuck at a small problem. I have this button within a form which already posts to a controller action method for example Edit(). Now I want have a cancel button which will post to a different action method for example Edit(int id). I am trying to override the default post as specified in the Html.Begin form so I attached a Javascript event but the event does not event hit. I know if I use a action link it works like a charm but then I have worry about making the link look like a button. Also I cannot place the link into a different form for the sake of physical placement with different elements in the form. Would truly appreciate any tips.
#using (Html.BeginForm("Edit", "RunLogEntry", FormMethod.Post, new { enctype = "multipart/form-data" })) {
<input id="create" class="art-button" type="submit" value="Save" />
<input id="cancel" class="art-button" type="submit" value="Cancel" />
}
$("#cancel").click(function(e) {
e.preventDefault(); //Keep form from posting
window.location.href = "REDIRECT URL";
});
Change the type of your cancel button to button. This way, it won't trigger the form submit by default. You'll need to handle it with JavaScript.
#using (Html.BeginForm("Edit", "RunLogEntry", FormMethod.Post, new { enctype = "multipart/form-data" })) {
<input id="create" class="art-button" type="submit" value="Save" />
<input id="cancel" class="art-button" type="button" value="Cancel" />
}
Also, in this case, you won't need e.preventDefault(); line.
$("#cancel").click(function(e) {
window.location.href = "REDIRECT URL";
});
Related
I'm trying to implement a simple search form in ASP.NET MVC. Right now my cshtml looks like this
#using (Html.BeginForm("SearchDemo", "Home", FormMethod.Post))
{
<div>
Last Name:<br>
<input type="text" id="nameToFind" name="nameToFind">
<input type="button" id="submitId" name="submit" value="submit" />
</div>
}
And my controller looks like this
[HttpPost]
public ActionResult SearchDemo(string nameToFind)
{
return RedirectToAction("Register", "Account"); //Only redirecting for now to test
}
Pressing the submit button does not call the controller but pressing ENTER does. I'm guessing that means my click event is getting eaten by JavaScript or something so I tried to pause script execution in Chrome but realized browserlink.js is stuck in an infinite loop. Is that the problem? Either way, how can I stop the infinite loop?
Browser doesn't know to use this button as submit.
Change
type="button"
To
type="submit"
Instead of setting the type as "button"
<input type="button" id="submitId" name="submit" value="submit" />
Change the type to submit
<input type="button" id="submitId" name="submit" value="submit" formmethod="post" value="Submit using POST"/>
You need a formmethod of post in your input.
So that the button knows to post back.
You also need a value attribute. This will be a reference to the Function name within the controller.
w3 reference
I am building a webapp using ASP.NET MVC.
In my application I need to change the functionality of a submit button in HTML code. Right now after clicking submit, the data is submitted and the page redirect to some particular one (I don't know why this one) but I want to stay at the same page. How can I achieve this? I have done research but all the answers didn't work for me.
The code of the button is following:
<button type="submit" value="Dodaj" class="btn btn-success" data-toggle="modal" data-target="#infoModal">Dodaj</button>
You can use javascript to this:
document.getElementById('yourform').onsubmit = function() {
return false;
};
or you can cancel page submit adding the class "cancel" in your <input>, example:
<input type="submit" ... class="cancel" />
#using (Html.BeginForm()) {
...
<input name="Save" type="submit" value="Save" />
}
#using (Html.BeginForm("MyController", "MyAction")) {
...
<input name="Save" type="submit" value="Save" />
}
You can set manually the redirection
The first one submits to the same action and same view is rendered
or
Inside the controller, there may be a code to redirect to some other action
The easiest way was to change the return value in the controller after the data was saved.
Thank you !
Into an ASP.NET MVC aplication, I use a form with several submit buttons.
I can route them to the correct controller action this way:
#using (Html.BeginForm("actionName", "controllerName", FormMethod.Post))
...
<input type="submit" name="submit_button" value="action1" />
<input type="submit" name="submit_button" value="action2" />
Then my controller:
public ActionResult Validate_Form(..., String submit_button)
{
switch submit_button {
...
}
}
This works perfectly.
Now I d like to include a JS action before submitting the form.
So I change the input submit to an input button and add an onclick event this way:
<input type="button" name="submit_button" value="action1" class="col-md-2" onclick="JSaction()" />
JS function:
function JSaction(){
...my stuff
document.getElementById('formName').submit();
}
And then, when the controller Validate_Form method is run, it looses its submit_button argument (null value).
Can you explain me why?
How can I solve this issue?
thx in advance.
I have a form that has a "preview" submit input, which submits the same form as the others, but with a "visualize" parameter which has to open a new window (in order to keep the form in its temporary state). If I was designing for shiny-clean HTML5 browsers, I could do this nicely using the new formTarget attribute:
<form id="myForm" action="somecontroller/action">
<input type="text" name="someValue" />
<input type="submit" id="visualize" value="Visualize" name="visualize" formTarget="_blank" />
<input type="submit" value="Submit" name="submit" />
</form>
Sadly, the main userbase of this product is using IE8 still (it's an internal network) so this website has to handle IE8 only. I have yet to find a way to make this simple thing work in javascript.
I found this very nice answer and tried to apply it, it doesn't work in my case since I guess it does not submit the form with a "visualize" parameter, so my action does not process it as a preview. So I asked jQuery to click the right button instead of submitting the form:
$('#visualize').click(function(e) {
if (!$('#myForm').prop('target')) {
e.preventDefault(); //prevents the default submit action
$('#myForm').prop('target', '_blank');
$('#visualize').click();
}
else {
$('#myForm').prop('target', null);
}
});
This still does not work. It just submits the form in the same window.
Alright, I finally worked this out, so here's a (dirty but working) solution:
$('#visualize').click(function(e) {
e.preventDefault(); //prevents the default submit action
var $form = $(this).closest('form');
$('<input />').attr('type', 'hidden')
.attr('name', "visualize")
.attr('id', "visualizeTemp")
.attr('value', "1")
.appendTo($form);
$form.prop('target', '_blank').submit().prop('target', '_self');
$('#visualizeTemp').remove();
});
Basically I create an entire temporary hidden input named just like my button (visualize) and submit the form. Then, I just remove my temporary input.
As a side note, I also stumbled upon this issue when calling $form.submit() so I had to rename my submitting button:
<form id="myForm" action="somecontroller/action">
<input type="text" name="someValue" />
<input type="submit" id="visualize" value="Visualize" name="visualize" formTarget="_blank" />
<input type="submit" value="Submit" name="save" />
</form>
I want to upload files using javascript/jquery/ajax and in my case, I have to prevent the reload on form submitting on upload.
Also, I want to add a delete button, such that, when file is uploaded, the delete button can delete this and same is the scenario, that to prevent the page refresh/reload on form submitting.
Hence, I've three buttons in a single form, UPLOAD, DELETE, NEXT and in my case, only next allows to submit the form by refreshing/action of form. And obviously, when file is just selected and the user directly hits the next button, it first uploads and then take his action.
HTML:
<form name="myform" method="post" id="FORM2" enctype="multipart/form-data">
// OTHER VALUES OF FORM
<input type="file" name="FileUpload-1" id="FileUpload-1" class="file_upload" />
<input type="submit" value="Upload" id="upload" class="submitUpload" />
<input type="submit" value="Delete" id="delete" class="submitDelete" />
<input type="submit" name="" id="FORMSUBMIT">
</form>
JS:
$(".submitUpload").click(function(){ console.log('UPLOAD');
action = "upload.php";
$("#FORM").on('submit',function(){
var options={
url : action,
success : onsuccess
};
$(this).ajaxSubmit(options);
return false;
});
}
return false;
});
$(".submitDelete").click(function(){ console.log('DELETE');
return false;
});
$('.FORMSUBMIT').click(function () {
//CUSTOM HANDLING
});
To Directly answer your question:
$("#FORM").on('submit',function(evt){
evt.preventDefault();
});
This piece of code will prevent the normal form submitting.
My advice is to transform the Update and Delete buttons from type=submit to type=button. Like this:
<input type="button" value="Delete" id="Delete" class="submitDelete" />
This will prevent the form to be submitted when delete or update are pressed...
I wrote a jsfiddle for you:
https://jsfiddle.net/yL35bh10/
I recently prototyped a page needing image file upload. I found a package on GitHub that was easy to use and should provide the majority of the functionality you're needing.
https://github.com/blueimp/jQuery-File-Upload
My only question to you: Once a file is uploaded to the server, how are you going to know what to delete?