enabling a submit button after an mvc post - asp.net-mvc-4

I'm using .Net MVC 4.
I have two buttons on one View wrapped around two separate Html.BeginForm statements. The first one is visibile and the second one is not (it depends if the first button logic after the post is successfull).
How can I make visibile the second button after the first button pressed goes into the Controller method? The method basically says, I'm OK, now I can make visible the second button. I'm passing back a View. Is there a viewbag variable (or something of the sort) I can set that once I get back into the View, I can make that second button visisble?
The second button is just an input button with an Id value.

Is there a viewbag variable (or something of the sort) I can set that
once I get back into the View, I can make that second button visisble?
Yeah but since I am not a big fan of ViewBag I would suggest you adding a boolean property to your model and then set this property in the POST controller action.
[HttpPost]
public ActionResult SomeAction(MyViewModel model)
{
model.IsSecondButtonVisible = true;
return View(model);
}
and then inside the view:
#if (Model.IsSecondButtonVisible)
{
<input type="button" value="the second button" />
}

First Method: As explained above, but I am afraid, it will not work if for example you have a partial view and based on something there you want to show or hide something.
Second Method:Initial Page load, button is visible.
<input id='btnAdd' type='button' value='Add' style='display:block;'/>
Based on some action on page/partial view
<script>
function disableAdd() {
$('#btnAdd').hide();
}
</script>
*Please note, jquery will not be able to hide/show if you use visibility in style sheet.

Related

How to click dijit.form.Button programmatically

I have form and input inside.
<input type="submit" label="Upload" data-dojo-type="dijit.form.Button" data-dojo-attach-point="leftLogoSubmit" id="leftLogoSubmit"/>
Is it possible push this button programmatically?
I tried
this.leftLogoSubmit.onclick();
but it not works.
Uncaught TypeError: this.leftLogoSubmit.onclick is not a function
You need to use on.emit().
It can be done in 2 ways:
As #tik27 stated:
dijit.registry.byId("leftLogoSubmit").emit('click', { cancelable:true, bubbles: true})
Note the 2 properties on the object. Without this, the click will not work properly.
You can also do:
on.emit(dojo.byId("leftLogoSubmit"), 'click', { cancelable:true, bubbles: true})
Where on is required as dojo/on
Last but not least, you can call the onClick method of the button directly (like #frank proposed):
dijit.registry.byId("leftLogoSubmit").onClick();
Difference is:
- in 1st case the widget is use to access the emit method (only works with Evented widgets)
- in 2nd case dojo/on is used so we need to pass the button domNode instead of the widget
- in 3rd it is not a native click (so will not bubble). It just call the button click handler
You can write like this
this.leftLogoSubmit.on("click", function() {
// Your code
});
you can fire the click function as.
this.leftLogoSubmit.onClick();
note: the capital C in the onClick.
You can go with core JavaScript solution
document.getElementById("leftLogoSubmit").click();

Changing input type=text to type=submit with javascript trigger the submit

i'm trying to code form where you can navigate inside with a next button ( who will hide the current fieldset and show the next one ) and a previous one ( who will hide the current fieldset and show the previous one ). Those two input have a onclick function that will change the fieldset className to active from inactive depending on which fieldset we are. I want to change the next button input type when the user reach the final fieldset so he can submit, but it seems that it automatically trigger the submit event, which means when the user get to the final fieldset, he cant fill any input because the form will submit automatically.
So here's the code :
//When the last fieldset show
if (fieldset[4].className == "active") {
var next = document.getElementById('next');
next.onclick='';
next.type="submit";
next.value="Submit";
next.id='submit';
}
Is there something that i should add to stop the submit auto-firing ?
I've tested your code in JSFiddle and it works good. It means there is something that trigger submit. May be you can post whole javascript in that page and then I can check what is the issue.
var next = document.getElementById("next");
//next.type="submit";
next.setAttribute('type', 'submit'); // I prefer using .setAttribute method
next.onclick='';
next.value="Submit";
next.id='submit';
<form>
<input name="q" value="hello">
<input type="text" id="next">
</form>
I think instead of trying to "hack" the existing button and turn it into the submit, you could just have two buttons, one "next" and another one "submit-button" (hidden initially), once the user advances to the final step, you can hide the "next" button and show the "submit-button" button.
It can be something like this:
//When the last fieldset show
if (fieldset[4].className == "active") {
// hide the next button
document.getElementById('next').style.display='none';
// show the submit button
document.getElementById('submit-button').style.display='';
}
And it would be not complex to make these buttons to appear exactly on the same place with css, so the user will not notice the replacement.
There are browsers who do not allow you to change the type for security reasons. So you will often have problems with it. Just switch between two inputs as boris mentioned (or replace it completely). But to answer your question:
You can catch the autosubmit with another on submit event. First on click mark the button with a class or data attribute like "preventSubmit". Within the submit event check if this class or data attribute exists and prevent the submit (f.ex with prevent default()) and remove the class that all wanted submits by users clicks are not stopped.
Why not just add an event to submit the form you are currently on:
if (fieldset[4].className == "active") {
var next = document.getElementById('next');
next.onclick=(function() { document.forms[0].submit(); });
//next.type="submit";
next.value="Submit";
next.className="MySubmit"; // try to style it as a button for better UX
//next.id='submit';
}

Fail to submit a form in yii

i am having a page with grid view and some checkbox fields init.
i added a submit button to it by adding echo CHtml::submitButton('Submit-form');
But, that button is not responding.
why so?
how i should submit this form?
my view page
my controller page
In your controller you have:
public function actionmyaction()
{
echo \'myaction reaced\';
var_dump($_POST);
}
You have to use camelcase with that, so actionMyaction() would probably do the trick.

how to check validation error on submit button click in MVC?

I have one View and in which there 3 partial views are rendering.
And there is one Save button on the parent view(Index,in which the partial views are rendering).This Save button is common for all of the partial views.
My problem is, i am not getting the way in which i can check is there any model validation is firing on any of the partial views while click on Save button.
I used below check on Save button click :-
var status = $('form').valid();
But its not checking the validations of all the partial views.Its just checking the validations in that particular partial view in which i am clicking the Save button.
I got the solution for that.We can simply check the length of "input-validation-error" class on form's submit event.Just like that :-
if($(".input-validation-error").length == 0)
{
//there is no validation on form.
}else
{
//validation is firing somewhere.
}

Writing all model properties into view without having to do it per property

I have a page for listing items, and I have anchors in each of the items to edit it.
So when I click on the edit link, it will take me to the edit page, which have save button and cancel button.
I want it when I click the save button it'll take me to confirmation page which have OK and cancel button.
I know in asp.net mvc you can send model into the view by this
return View("Edit", model);
It is sensible to then write each of the model property like this in the view
#Html.EditorFor( model => model.name )
#Html.EditorFor( model => model.description )
//more properties here...
So that after I click the save button, I can have the model back in the controller
But after the edit page, I only need to view a question in the confirmation page do I have to write it manually like this
#Html.HiddenFor( model => model.name )
#Html.HiddenFor( model => model.description )
//more properties here...
Is there a one line hassle free function to do this in asp.net mvc?
You can use #Html.EditorForModel() helper. However this method will produce default UI elements like textboxes. You can provide a custom template that will produce hidden inputs.