How to call the controller from the radio button click ?
<div id="radio">
<input type="radio" id="Isactive" name="Isactive" value="1" />Yes</label>
<input type="radio" id="Isactive" name="Isactive" value="0" />No</label>
</div>
public ActionResult Index(CityList Obj,string Isactive)
{
return view();
}
You can use javascript to programatically submit a form. You should not have duplicate Id values for elements. Id's should be unique in a document.
#using (Html.BeginForm("Index", "Home"))
{
<!-- Your other form elements-->
<div id="radio">
<input type="radio" name="Isactive" value="Yes" />Yes
<input type="radio" name="Isactive" value="No" />No
</div>
}
Now you can listen to the change event on the radio button and use jQuery closest method to get the form and call the submit method.
$(document).ready(function () {
$("input[name='Isactive']").change(function () {
$(this).closest("form").submit();
});
});
Now when user make a selection on the radio button, the form will be submitted and the selected radio button's value attribute value will be available in your Isactive parameter of your HttpPost index action method.
If you want to pass 1 and 0, use a numeric type as the method parameter type instead of string.
Related
The Form Component is of type styled.form`` and is defined outside the component on the bottom of the file. The issue: The onSubmit event handler does not work. Official docs don't have anything on onSubmit.
const submitHandler = e => {
e.preventDefault()
console.log(e) // nothing appears in console
}
/// ... in JSX:
<Form onSubmit={submitHandler} >
<Input placeholder="YouTube URL" required name="input" onChange={changeHandler} />
<Button type="submit" >
<Icon /> <Span>Add Song</Span>
</Button>
</Form>
//... styled form defined at the bottom of the file below export default statement:
const Form = styled.form`
display: flex;
`
A Solution that I have found is to attach the submitHandler to an onClick event of a button inside a form. I'm not sure about that as I have never in the past used the button for submitHandlers (and I don't think it even works in pure React).
So, this would work:
<Button type="submit" onClick={submitHandler} >Submit</Button>
The problem is with the button. You have the <Button> component implemented as a <div> styled component. Having type="submit" on a <div> has no effect as far as the form is concerned. That's why the submit event never got fired.
So, you can change your code as follows:
const Button = styled.button
remove onClick from the button and change the onSubmit simply to submitHandler:
<div>
<Form onSubmit={submitHandler}>
<Input
placeholder="Paste YouTube URL here"
required
name="input"
onChange={changeHandler}
/>
<Button type="submit">
<Icon /> <Span>Add Song</Span>
</Button>
</Form>
</div>
You will see the results in the UI, as the form will start applying validation (because of the required attribute on the input), and also in the console where the handler will log.
I have fields in an aui form that I only want to be required when a corresponding checkbox is selected, otherwise they're not required. I'll enable these input fields using <aui:script> once the check box is enabled and only then aui validation should work.
I have tried with hiding the <aui:validator> depending condition in script.
How do I enable the validation only if my check box is selected in aui?
<aui:form action="" method="post">
<aui:input type="checkbox" name="employeeId" id="employeeId"></aui:input>
<div id="employeeDetails">
<aui:input type="text" name="name" id="employeeId2">
<%
if (true) { //default i kept true how to check this condition on check box basic
%>
<aui:validator name="required"' />
<%
}
%>
</aui:input>
<aui:input type="text" name="email" id="employeeId3">
<%
if (true) {
%>
<aui:validator name="required" />
<%
}
%>
</aui:input>
</div>
<aui:button-row>
<aui:button type="submit" />
</aui:button-row>
</aui:form>
<aui:script>
AUI().use('event', 'node', function(A) {
A.one('#employeeDetails').hide(); // to hide div by default
var buttonObject = A.all('input[type=checkbox]');
buttonObject.on('click', function(event) {
if (A.one("#<portlet:namespace/>employeeId").attr('checked')) {
A.one('#employeeDetails').show(); //for checked condition
} else {
A.one('#employeeDetails').hide(); // for non checked condition
}
});
});
</aui:script>
Reference images:
Before enabling the check box
[]
Check box enabled:
[]
This sample if(true) bothers me - it's evaluated server side on the JSP and won't have any effect, since true is always true.
However, your question is well documented within Liferay's documentation: Look for "Conditionally Requiring A Field"
Sometimes you’ll want to validate a field based on the value of
another field. You can do this by checking for that condition in a
JavaScript function within the required validator’s body.
Below is an example configuration:
<aui:input label="My Checkbox" name="myCheckbox" type="checkbox" />
<aui:input label="My Text Input" name="myTextInput" type="text">
<aui:validator name="required">
function() {
return AUI.$('#<portlet:namespace />myCheckbox').prop('checked');
}
</aui:validator>
</aui:input>
I have a form that I am submitting using post. I can retrieve input values, however I also want to retrieve the class name or attribute of a div within a form.
html:
<form method='post' action='/formResult'>
<input type='text' name='someInput' />
<div class="stateAlpha" customAttr="alpha"></div> <!-- want 'alpha' -->
<button type="submit" class="btn btn-default">Submit</button>
</form>
node/express:
router.post('/formResult', function(req, res, next){
res.render('formResult', { someInput: req.body.someInput, someState: req.body.??? });
});
You'll need to intercept the submit event of the form, and put the class info into a hidden field. In pure JavaScript:
<form method='post' class='myForm' action='/formResult'>
<input type='text' name='someInput'>
<input type='hidden' name='state'>
<div class="stateAlpha" customAttr="alpha"></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<script>
document.querySelector('.myForm').addEventListener('submit', function(evt) {
var alpha = evt.target.querySelector('[customAttr="alpha"]');
var hiddenState = evt.target.querySelector('[name="state"]');
hiddenState.value = alpha.classList.join(' ');
});
</script>
Note that I added a class to the form, and used that to select the form; that's because you may have more than one form on the page, and you want to select the right one. Also note that inside the submit listener, I don't use document as the base of my selection, but evt.target; that's because you might have elements with customAttr='alpha' elsewhere in your document.
Once I have the div with the class you want to identify, I get the hidden input element, and set it's value property to the div's class list (remember any element can have more than one class, so classList is an array, which I just join using spaces).
If you're using jQuery, it gets a little shorter:
<form method='post' class='myForm' action='/formResult'>
<input type='text' name='someInput'>
<input type='hidden' name='state'>
<div class="stateAlpha" customAttr="alpha"></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<script>
$(document).ready(function() {
$('.myForm').on('submit', function() {
var $alpha = $(this).find('[customAttr="alpha"]');
$(this).find('[name="state"]')
.val($alpha.get(0).classList.join(' '));
});
});
</script>
The DOM is client-side and when you post the form only the values of the fields are posted, nothing else. To achieve what you are trying to do you can create a hidden field that stores the value of your class like this.
<input type="hidden" value="stateAlpha" name="myFieldName" />
This will then get sent in the form post.
I have a checkbox in my view that I am posting back to the Controller as a parameter, but when the checkbox is checked the controller receives the value as a string "on", and when unchecked the value in the parameter is "off". Is there any way to have this value postback as an int or bool? When I try bool below it is always null because it doesn't match the data type.
<label><input type="checkbox" name="option">food</label>
public ActionResult Select(bool? option)
{....
I guess you need to use the Html checkbox helper for this to work, which seems silly to me because it renders and works correctly client side when you create html without using the helper.
<label>#Html.CheckBox("option", false) food</label>
What you can do is add value attribute to your checkbox and set it to true or false.
MVT will not recognize option as true here
<input type="checkbox" name="option" checked="checked" />
but will if you add value="true"
<input type="checkbox" name="option" checked="checked" value="true" />
Script that does it:
$(document).on("click", "[type='checkbox']", function(e) {
if (this.checked) {
$(this).attr("value", "true");
} else {
$(this).attr("value","false");}
});
Hi I want to show and hide div using alloy ui onclick function of radio button.I mentioned my code as below.please help me to solve this problem.when i clicked on married i want to open one div it has anniversary date and when I click on single it will hide that div.
<aui:field-wrapper name="maritial_status">
<aui:input checked="<%= true %>" inlineLabel="right" name="maritial_status" type="radio" value="single" label="single" onClick="javascript:unMarriedStatus();" />
<aui:input inlineLabel="right" name="maritial_status" type="radio" value="married" label="married" onClick="javascript:marriedStatus();" />
</aui:field-wrapper>
You can solve this issue by having the function and the div class
so based on the selection call the function which will implicitly create the structure form in div method
function design:
function temp()
{
var chasisno = "";
$('#dyanamicDivElement').append(chasisno);
}
div structure:
Explanation:
so as per here the function will keep appending the value to the div
hope this solved the issue
You could try this way:
<aui:field-wrapper name="maritial_status">
<aui:input checked="<%= true %>" inlineLabel="right" name="maritial_status" type="radio" value="single" label="single" onClick="document.getElementById('DIV-ID').style.display = this.checked ? 'none' : 'block';" />
<aui:input inlineLabel="right" name="maritial_status" type="radio" value="married" label="married" onClick="document.getElementById('DIV-ID').style.display = this.checked ? 'block' : 'none';" />
</aui:field-wrapper>