How to add stateful button to a form - javascript

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

Related

Print html form input value or specific div content in JS with CSS

I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?

parsley lib is not showing validation messages on this wizard

<form id="form1" action="" method="POST" data-parsley-validate="true" name="form-wizard">
<div class="wizard-step-1">
<fieldset>
<legend class="pull-left width-full">Search Slot </legend>
<!-- begin row -->
<div class="row">
<div class="col-md-3">
<div class="form-group block1">
<label>Date *</label>
<input type="text" name="dtpSearch" id="dtpSearch" placeholder="DD-MM-YYYY" class="form-control datepicker-autoClose1" data-parsley-group="wizard-step-1" required />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Start Time *</label>
<div class="input-group date 24hourtime" >
<input type="text" class="form-control" id="txtFromTime" name="txtFromTime" value="00:00 AM" placeholder="Enter StartTime" data-type="alphanum" data-parsley-required="true" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>End Time</label>
<div class="input-group date 24hourtime" >
<input type="text" class="form-control" id="txtToTime" name="txtToTime" value="23:59 PM" placeholder="Enter EndTime" data-type="alphanum" data-parsley-required="true" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Court Type</label>
<select class="form-control" id="ddlCtype" name="ddlCtype" data-parsley-required="true">
<option value="">Any</option>
<option value="1">Concrete</option>
<option value="2">Clay</option>
<option value="3">Grass</option>
<option value="4">Sand</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Roofed *</label>
<div>
<label class="radio-inline"><input type="radio" name="optRoofed" checked data-parsley-validate="false" value="0">No</label>
<label class="radio-inline"><input type="radio" name="optRoofed" data-parsley-validate="false" value="1">Yes</label>
</div>
</div>
</div>
</div>
<!-- end row -->
</fieldset>
</div>
<!-- end wizard step-1 -->
I am using this lib on this wizard. I have removed some of wizard step for sake of clarity. Now work fine on webapp other pages where i did not use this wizard. why it is not working on this wizard??
Note:Skipping some wizard step for the sake of clarity.

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" />

Button is not Disabling using ng-disabled

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>

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