Redirection after clicking submit button [HTML] - javascript

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 !

Related

Submitting a form to one of two different URL's

I have two different buttons like this :
<input type="button" name="but1" id="but1" value="page1" onclick="f('WebForm1')" />
<input type="button" name="but2" id="but2" value="page2" onclick="f('WebForm2')" />
and obviously two other webforms ("WebForm1" and "WebForm2").
using JavaScript, how can I submit the information from the default webform (which I have the buttons in it) to the page that is the value of its button?
(I mean when I click the first button, it should go to WebForm1 and submit data and when I click the second button, it should go to WebForm2 and submit the data)
I've never tried this before so in JavaScript I wrote
function f(t){
var a;
a = document.getElementById['form1'];
a.submit(t); }
but its not working.
Are all these functionalities to be implemented on the same page?
How I see it, you can make the two input buttons the submit buttons of the two different forms.
<form action = "WebForm1">
<input type= submit name="but1" id="but1" value="page1" />
</form>
<form action = "WebForm2">
<input type= submit name="but2" id="but2" value="page2" />
</form>
Also, I'm not sure if anything like a.submit(t) even works.
In HTML5 you can use <button> with form attribute:
<button type="submit" form="form1" value="Submit">Submit</button>
with form attribute you can specify the form element the <button> element belongs to.
Then, in your form:
<form action="WebForm1" method="get" id="form1">
...
</form>
hope this will help. t is the name of the form.
function f(t){
// <form name="WebForm1">
// t is the name of the form
document.t.submit();
}
this work only if the two form are in the same page as where the button are.

ASP.NET MVC Form: Can submit with ENTER key but not Submit button

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

Why JS confirm() won't Cancel the submit action when I hit Cancel in confirm dialog?

I tried to find out where is the problem, but no clue.
I have 4 buttons for one form by using HTML5 multi submit. When I click on DELETE button, a dialog pops out, by using an attribute onclick="confirm('message');. When I hit Cancel, it should stop form submission, close the dialog and stay on the same page without any actions, instead it keeps submitting the form. It works perfectly until now, and I can't find out where is the problem.
<form action="http://google.com/index/25" method="post" accept-charset="utf-8">
<button class="btn" type="submit" name="formSubmit" value="new">New</button>
<button class="btn" type="submit" name="formSubmit" value="save">Bulk save</button>
<button class="btn btn-danger" type="submit" name="formSubmit" value="delete" onclick="confirm('Do you really want to remove a record(s)?.');">Delete permanently</button>
<button class="btn" type="submit" onclick="confirm('stop or proceed');">submit</button>
</form>
And a live DEMO IS HERE on jsbin
Anyone got the same bug ?
Handle it on the form instead of the button, and have the handler return the outcome from the confirm dialog:
<form onsubmit="return confirm('stop or proceed');">
You can also handle the events of each button, but don't forget to return:
<button onclick="return confirm('blabla');">Button</button>
If you wanna use Jquery, you should use this code:
click
JQuery
$(function () {
$(".classTest").click(function (e) {
return confirm("Submit the Post action?");
});
}

MVC 3, Razor View- override default form post

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";
});

Writing text on "div" using JavaScript

I'm having some trouble whenever I want to add some text to my div tag, here's my code:
<html>
<body>
<div id="comments">
</div>
<form name="forma">
<textarea name="commentUser" id="commentUser" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" onClick="writeComment()" />
</form>
<script type="text/javascript" >
function writeComment()
{
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML=comment;
}
</script>
</body>
</html>
It does what it has to do correctly, but then it switches back to the text box only and the comment I just wrote disappears. Any idea of what's going on here?
Thank you so much for your time.
It is because you are submitting the form.
Quick fix:
<input type="submit" value="Ready!" onClick="writeComment()" />
to
<input type="button" value="Ready!" onClick="writeComment()" />
In addition, you are able to prevent the default action of an input. Basically telling the browser the you are going to handle the action with preventDefault:
function writeComment(e) {
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML = comment;
e.preventDefault();
return false;
}
What's happening is your form is submitting, the page is refreshing, and the div is going back to its pre-JavaScript-set content.
Try swapping the type='submit' to 'button' on the button.
When you click on the submit button the form is submitted, causing the whole page to reload. You need to return false from the onclick of the submit button to prevent it:
<input type="submit" value="Ready!" onclick="writeComment(); return false;" />
Or, if you don't want the button to ever submit the form change type="submit" to type="button".
PS. It's bad practice to use the onclick attribute. Instead bind a handler to the click event using pure JS.
This is because you use not just a regular button but a submit button which by default submits the form to the server. You can see that your comment is submitted via URL as you didn't specify the method(GET and POST and GET is default).
Simply write:
onclick="writeComment();return false;"
Returning FALSE prevents from default behaviour - submitting the form.
Its making another request to the server, which is causing the page to be rendered again.
Just return false from writeComment.
You'll have to prevent your form from submitting:
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
change this
<input type="submit" value="Ready!" onClick="writeComment()" />
to this:
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
try <input type="button" value="Ready!" onClick="writeComment()" />
you should switch
<input type="submit" value="Ready!" onClick="writeComment()" />
for
<input type="button" value="Ready!" onClick="writeComment()" />
Or another option is to convert your submit into a button and take it out of the form, buttons can now exist outside of forms and from the code you pasted I don't see why you have to use a form, this will mean that your page isn't reloaded when you click on the "Ready" button.

Categories