Button is not Disabling using ng-disabled - javascript

Hi I've a form and i'm unable to disable the submit button if the fields are empty. Below is the code can any one help me to understand what might be problem?
<modal title="Add Navigation" visible="showAddModal">
<form id="addform" class="form-horizontal">
<div class="modal-body">
<div ng-classs="form-group">
<label class="col-sm-2 control-label">Client Type</label>
<div class="col-sm-10">
<select name="account" class="form-control m-b w-md" ng-model="navData.clientType" ng-required="true">
<option value="android">Android</option>
<option value="ios">iOs</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Client Version</label>
<div class="col-sm-10">
<input type="text" class="form-control w-md" ng-model="navData.clientVersion" placeholder="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Key Word</label>
<div class="col-sm-10">
<input type="text" class="form-control w-md" ng-model="navData.keyWord" placeholder="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Value </label>
<div class="col-sm-10">
<input type="text" class="form-control w-md" ng-model="navData.value" placeholder="" required>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary" ng-disabled="addform.$invalid" ng-click="addNav()">Add</button>
</div>
</form>
</modal>

From https://docs.angularjs.org/guide/forms#binding-to-form-and-control-state:
A form is an instance of
FormController.
The form instance can optionally be published into the scope using the
name attribute.
You have to use the name attribute to make the form instance available in the $scope, but you're using the id attribute:
<form name="addform" class="form-horizontal">
<!-- ... -->
</form>

Related

Pass content of div element to action with asp core 2.0 form

I have an asp core form that transfers data to my "Create" action. I have inputs with "asp-for" attribute to initialize specific columns in my db and i have a "Content" column which i want to initialize by fetching innerText from element. So how can i send innerText at the time when i submit form and to send it all together to the action? And is it possible to create custom asp core tag that would fetch innerText? Thanks.
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="container">
<div class="row" id="preview">
<div id="result">
</div>
<div class="settings">
<label><input type="button" id="myBtn" />Додати кнопку</label>
#Html.Partial("_ModalBoxPartial")
<label><input type="checkbox" checked="checked" id="auto-generate" />Auto-generate</label>
<label><input type="checkbox" checked="checked" id="save-as-practice" />Save for practice</label>
</div>
</div>
<div class="row">
<div class="col-md-12" id="editor-wrapper" style="background-
color:pink;">
</div>
</div>
<div class="col-md-4">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="text" id="" name="module" />
<div class="form-group">
<div class="col-md-10">
<textarea id="translation" name="translation"></textarea>
</div>
</div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="KeyWords" class="control-label"></label>
<input asp-for="KeyWords" class="form-control" />
<span asp-validation-for="KeyWords" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CategoryId" class="control-label"></label>
<select asp-for="CategoryId" class="form-control" asp-items="ViewBag.CategoryId"></select>
</div>
<div class="form-group">
<label asp-for="ShowCaseText" class="control-label"></label>
<input asp-for="ShowCaseText" class="form-control" />
<span asp-validation-for="ShowCaseText" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ExprId" class="control-label"></label>
<select asp-for="ExprId" class="form-control" asp-items="ViewBag.ExprId"></select>
</div>
<div class="form-group">
<label asp-for="Image" class="control-label"></label>
<input asp-for="Image" class="form-control" />
<span asp-validation-for="Image" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" id="submitBtn" />
</div>
</div>
</div>
ASP.NET MVC, and I could say most MVCs frameworks, performs post using HTTP Posts (I know it sounds redundant). It means that it will only post values from enabled input elements. So, from the browser point of view, your div is not different from any other div.
One possible solution is just adding a hidden input with that very same value:
<input asp-for="Foo" class="form-control" type="hidden" />

JQuery $('form').serialize() produces empty results

fiddle: http://jsfiddle.net/a3f6ouqw/2/
<form method="POST" id="sampleForm" action="/">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp"
class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dateControl">Date</label>
<div class="input-group date"
data-provide="datepicker">
<input type="text"
class="form-control"
id="dateControl">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!-- Example of select picker -->
<div class="form-group">
<label for="selectControl">Type</label>
<select class="selectpicker"
id="selectControl">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
<button type="submit"
class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>
Javascript code
$(document).ready(function() {
$("form").submit(function(e) {
alert($("form").serialize());
console.log(alert($("form").serialize()));
e.preventDefault();
});
});
and I'm always getting empty str. Any ideas?
add name in input and select
For a form element's value to be included in the serialized string, the element must have a name attribute.
$(document).ready(function() {
$("form").submit(function(e) {
alert($("form").serialize());
console.log(alert($("form").serialize()));
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="sampleForm" action="/">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input name="email" type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email">
<small id="emailHelp"
class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input name="password" type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="dateControl">Date</label>
<div class="input-group date"
data-provide="datepicker">
<input name="dateControl" type="text"
class="form-control"
id="dateControl">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<!-- Example of select picker -->
<div class="form-group">
<label for="selectControl">Type</label>
<select name="selectpicker" class="selectpicker"
id="selectControl">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input name="checkbox" type="checkbox" class="form-check-input"> Check me out
</label>
</div>
<button type="submit"
class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>
The issue is because none of your input elements, ie. the input, select, textarea etc., have name attributes.
These are required to make the HTML valid, and are also what the serialize() method uses as the keys to associate the values to.
Add name attributes on the HTML fields and your JS code will work fine.

How to add stateful button to a form

I have developed a form where I want to add Next button at the end of form for another form load without page loading. I am not able to achieve this target.
<form action="#" id="form_sample_1" class="form-horizontal form-bordered">
<div class="form-body">
<div class="form-group">
<label class="label1 col-md-4">Enter the name
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input id="templateName" type="text" name="name" data-required="1" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="label1 col-md-4">Enter Birth Year
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input id="admissionYear" type="date" name="name" data-required="1" class="form-control" maxlength="4" />
</div>
</div>
<div class="form-group">
<label class="label1 col-md-4">Select the type of room
<span class="required"> * </span>
</label>
<div class="col-md-7">
<select id="levelSelect" class="form-control" data-placeholder="Select" tabindex="1">
<option value="0" disabled selected default>--Select--</option>
<option value="AC">AC</option>
<option value="non-AC">non-AC</option>
</select>
</div>
</div>
<div class="form-group">
<label class="label1 col-md-4">Enter total number of room
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="room">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-4 col-md-3">
<button id="SubmitEligibility" type="button" class="btn blue">Save &#38 Continue</button>
</div>
</div>
</div>
</form>
After Save & Continue, I want to show some other form. Please advise me on how to do this.
You can create a new html button and associate them a script in js:
<button id="Next" type="button" onclick="nextFunction();">Next</button>
The js function is:
nextFunction(){
$('#form-group').hide();
$('#newForm').show();
}

Jquery: form.submit() works but form.submit(handler) doesn't

I have only one form in my html.
<form role="form" class="form-horizontal" id="WebToLeadForm" action="http://Sujay-Y510p:80/suitecrm/index.php?entryPoint=WebToLeadCapture" method="POST" name="WebToLeadForm">
<div class="form-body">
<div class="form-group form-control-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Salutation</label>
<div class="col-md-10">
<select class="form-control" id="salutation" name="salutation">
<option value="" disabled selected>Select your option</option>
<option value="">Ms</option>
<option value="">Mr</option>
<option value="">Mrs</option>
<option value="">Doctor</option>
<option value="">Prof</option>
</select>
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="name">First Name</label>
<div class="col-md-10">
<input class="form-control" id="first_name" placeholder="Enter your name" type="text" name="first_name">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Last Name</label>
<div class="col-md-10">
<input class="form-control" id="last_name" name="last_name" placeholder="Enter your name" type="text">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Mobile</label>
<div class="col-md-10">
<input class="form-control" id="phone_mobile" name="phone_mobile" placeholder="Enter your name" type="text">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Email Address</label>
<div class="col-md-10">
<input class="form-control" id="email1" name="email1" placeholder="Enter your email" type="email" onchange="validateEmailAdd();">
<div class="form-control-focus">
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-2 col-md-10">
<button type="button" class="btn default">Cancel</button>
<button type="button" class="btn blue" id="submitButton">Submit</button>
</div>
</div>
<div class="row">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<tr>
<td style="display: none;">
<input id="campaign_id" type="hidden" name="campaign_id" value="34101a86-12b1-bec3-2c18-560ed4c48ddb" />
</td>
</tr>
<tr>
<td style="display: none;">
<input id="assigned_user_id" type="hidden" name="assigned_user_id" value="1" />
</td>
</tr>
<tr>
<td style="display: none;">
<input id="req_id" type="hidden" name="req_id" value="last_name;" />
</td>
</tr>
</form>
In my script when I write the below mentioned code it submits properly. It takes me to the response page.
$('form').submit();
but when I write the below code it doesn't even enter the function. No submit takes place. It doesn't even display the alert.
$('form').submit(function (e) {
e.preventDefault();
alert('inside');
});
What could be the issue?
I guess I got your issue. You don't have a submitButton to process the submission of the form.
<button type="button" class="btn blue" id="submitButton">Submit</button>
Change the above code to:
<input type="submit" class="btn blue" id="submitButton" />
Working Snippet
$('form').submit(function (e) {
e.preventDefault();
alert('inside');
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form role="form" class="form-horizontal" id="WebToLeadForm" action="http://Sujay-Y510p:80/suitecrm/index.php?entryPoint=WebToLeadCapture" method="POST" name="WebToLeadForm">
<div class="form-body">
<div class="form-group form-control-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Salutation</label>
<div class="col-md-10">
<select class="form-control" id="salutation" name="salutation">
<option value="" disabled selected>Select your option</option>
<option value="">Ms</option>
<option value="">Mr</option>
<option value="">Mrs</option>
<option value="">Doctor</option>
<option value="">Prof</option>
</select>
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="name">First Name</label>
<div class="col-md-10">
<input class="form-control" id="first_name" placeholder="Enter your name" type="text" name="first_name">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Last Name</label>
<div class="col-md-10">
<input class="form-control" id="last_name" name="last_name" placeholder="Enter your name" type="text">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Mobile</label>
<div class="col-md-10">
<input class="form-control" id="phone_mobile" name="phone_mobile" placeholder="Enter your name" type="text">
<div class="form-control-focus">
</div>
</div>
</div>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label" for="form_control_1">Email Address</label>
<div class="col-md-10">
<input class="form-control" id="email1" name="email1" placeholder="Enter your email" type="email" onchange="validateEmailAdd();">
<div class="form-control-focus">
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-2 col-md-10">
<button type="button" class="btn default">Cancel</button>
<input type="submit" class="btn blue" id="submitButton" />
</div>
</div>
<div class="row">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<tr>
<td style="display: none;">
<input id="campaign_id" type="hidden" name="campaign_id" value="34101a86-12b1-bec3-2c18-560ed4c48ddb" />
</td>
</tr>
<tr>
<td style="display: none;">
<input id="assigned_user_id" type="hidden" name="assigned_user_id" value="1" />
</td>
</tr>
<tr>
<td style="display: none;">
<input id="req_id" type="hidden" name="req_id" value="last_name;" />
</td>
</tr>
</form>
You are over-riding the function handler with your custom function, that prevents the default action of submitting the form.
e.preventDefault();
This prevents the form from submitting. Here the e is the generated event, which is the form submission and the function preventDefault() prevents it from happening.
Generally this is used for AJAX based form submissions, where you submit the form, but actually, JavaScript sends the data to the server through AJAX. Hope this is clear enough. :)
An example of AJAX based form submission would be:
$('form').submit(function (e) {
e.preventDefault();
$.post("url.php", $(this).serialize(), function (data) {
if (data = "okay")
alert("Form is submitted!");
});
});
For your issue, try giving this instead of calling the submit:
$("form").trigger("submit");
when you call:
$('form').submit();
in simple words, it tells jquery "please submit the form"
when you call this however:
$('form').submit(function (e) {
e.preventDefault();
alert('inside');
});
it tells jquery: "in case the form is submitted, run this function"
meaning:
the first script calls the submission, while the 2nd script attaches a handler to the submission event but does not call the submission
if in addition to attaching the handler, you want to submit the form then you need to call the submit without arguments in it after:
$('form').submit(function (e) {
e.preventDefault();
alert('inside');
});
$('form').submit();
the same works similarly with other jquery functions, click, load, etc.
without arguments its an invokation, while with a function it is simply a handler attaching without invokation.

HTML 5 / CSS button beside dropdown list

I'm trying to add a submit button beside my select option drop down menu. I can't seem to get to align properly above the message box.
It sits in a basic div but didn't think it was needed.
<form id="contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<h5>Join us now</h5>
<div class="form-group">
<label for="subject">
Select Option</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
Send Message</button>
</div>
</div>
</form>
I modified the rows and columns in your code, you can find it in this JSFiddle , hope this helps.
<form id="contact-form">
<div class="row">
<div class="col-md-6 col-xs-6">
<h5>Join us now</h5>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="subject">
Select Option
</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<button type="submit" class="btn btn-skin pull-right buttonTest" id="btnContactUs">
Send Message
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Message
</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
</div>
</div>
</div>

Categories

Resources