I am attempting to format a form to look like the image below using flex:
<div class="wrapper">
<div class="user-info-container">
<div class="row">
<div class="flex-field">
<label for="fname" >First Name: </label>
<input type="text" class="firstname">
</div>
<div class="flex-field">
<label for="lname" >Last Name: </label>
<input type="text" class="lastname">
</div>
</div>
<div class="row2">
<div class="flex-field">
<label for="Email" >Email: </label>
<input type="text" class="email">
</div>
<div class="flex-field">
<label for="phonenumber" >Phone Number: </label>
<input type="text" class="phone-number">
</div>
</div>
</div>
<label for="request">Request Details:</label>
<div class="flex-field request">
<textarea class="rdetails"></textarea>
</div>
The above is the html code that I am using and I am having trouble styling it to look like the above using flex
Use an outer box with flex-column
Then make two new divs inside. The upper one with flex-row and the other one with flex-column again.
In the bottom one, you put in the text and the input field.
In the upper one, you put two identical (text differs) div with flex-column. In these two, you each put two div with flex-row and inside it the text and the input field.
Using tailwindcss you get something like this:
https://play.tailwindcss.com/lrP8uzlzkX
Hope this helps.
Related
Am working on the frontend part of an application whereby I have
some form inputs (wrapped in divs). Each div has a button called
Add Beneficiary. Basically when the user clicks on the button, the div
below it should be displayed (which is hidden by default) and the
sequence continues (each button on a div clicked the div below it
displays).
On the button of each div I have writen some logic whereby on click event
a function called addBeneficiary is triggered. I parse the id of the
button clicked. Next in the function I manipulate the DOM by reaching
out to the parent div and displaying it but the logic does not
work.
~ Kindly assist?
Markup
<!--Person One-->
<div class="container mg-t-30" id="beneficiary1">
<div class="row col-11 mx-auto">
<div class="col-12">
<div class="row">
<div class="col-6">
<label> Category</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="col-6">
<label>Family Size</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-12">
<button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
</div>
</div>
</div>
</div>
</div>
<!--Person Two-->
<div class="container mg-t-30" style="display:none;" id="beneficiary1">
<div class="row col-11 mx-auto">
<div class="col-12">
<div class="row">
<div class="col-6">
<label> Category</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="col-6">
<label>Family Size</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-12">
<button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
</div>
</div>
</div>
</div>
</div>
Logic
function addBeneficiary(beneficiary){
let check = $('#' + beneficiary).parents('div').last().prop('id');
//console.log(check);
$("check").css("display", "block");
}
Its not working because both parents div id is "beneficiary1". And you can't use same id with multiple tag. It should be unique like beneficiary1, beneficiary2 & so on... And also little bit change into your script.
function addBeneficiary(beneficiary){
let check = $('#' + beneficiary).parents('div').next('div');
//console.log(check);
check.css("display", "block");
}
jsfiddle https://jsfiddle.net/y2mva6es/
I have few input fields and some static text. I need that to be printed but can not get it to work. Can you please help me?
<div class="modal-body" id="printable-consent">
<div class="row">
<div class="col-md-6">
<label for="patient-surname-consent">Patient’s surname/family name : </label>
<div class="form-group">
<input type="text" id="patient-surname-consent" onkeyup="printDiv()" name="patient-surname-consent" value="" class="form-control">
</div>
</div>
<div class="col-md-6">
<label for="patient-firstname-consent">First name: </label>
<div class="form-group">
<input type="text" id="patient-firstname-consent" onkeyup="printDiv()" name="patient-firstname-consent" value="" class="form-control">
</div>
</div>
</div>
I want to type text in the modal box and that to be print (sent to printer). Can you help me?
Thanks!
You can access it using JavaScript and the "value" property of the element.
For example,
var myPatientFirstName = document.querySelector("#patient-firstname-consent").value;
console.log(myPatientFirstName);
I'm trying to change what text areas are visible depending on what radio button is checked.
I have followed various guides on google and none have worked.
This is what I currently have, using the click function but still nothing.
HTML:
<div class="row col-md-12">
<!-- Header Delimitation input settings -->
<div class="form-group col-md-4">
<label class="control-label" for="header_delimitation">Header delimitation</label>
<div class="col-md-12">
<div class="radio">
<label for="header_delimitation-0">
<input type="radio" name="header_delimitation" id="header_delimitation-0" value="0">
Fixed Column Width</label>
</div>
<div class="radio">
<label for="header_delimitation-1">
<input type="radio" name="header_delimitation" id="header_delimitation-1" value="1">
Character delimiter
</label>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_col_form">
<label class="control-label" for="header_columns_num">Number of Columns</label>
<div class="">
<input id="header_columns_num" name="header_columns_num" type="text" placeholder="number" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_delim_form">
<label class=" control-label" for="header_delim">Header delimiter</label>
<div class="">
<input id="header_delim" name="header_delim" type="text" placeholder="delimiter" class="form-control input-md">
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('#header_col_form').hide('fast');
$('#header_delim_form').hide('fast');
$('#header_delimitation-0').click(function () {
$('#header_col_form').show('fast');
$('#header_delim_form').hide('fast');
});
$('#header_delimitation-1').click(function () {
$('#header_delim_form').show('fast');
$('#header_col_form').hide('fast');
});
});
How it looks like now
So functionality wise, it should when header_delimitation_0 is selected, show header_col_form and hide header_delim_form. I will then add the reverse for when header_delimitation_1 is selected.
There is most likely a far simpler and cleaner way of completing this task, if so, any help would be greatly appreciated.
JsFiddle here.
This question is about the MaterializeCSS frontend framework. I am trying to use a .carousel (see source for more information) inside a <form> element. The effect I need is a slider containing different input fields of the form.
The problem is that the text fields and text area elements somehow don't get activated when the user clicks on them.
Here is a SSCCE:
HTML:
<section class="row" >
<div class="card hoverable medium indigo darken-4 col l8 offset-l2 m12 s12">
<div class="card-content">
<form id="createForm" action="" method="get">
<div class="carousel carousel-slider center" data-indicators="true">
<div class="carousel-item white-text">
<div class="input-field">
<input type="text" id="idInput" class="validate" />
<label for="idInput">ID</label>
</div>
<div class="input-field">
<input type="text" id="nameInput" class="validate" />
<label for="nameInput">Name</label>
</div>
<div class="input-field">
<textarea id="descriptionInput" class="materialize-textarea validate"></textarea>
<label for="descriptionInput">Desc</label>
</div>
</div><!--.carousel-item-->
<div class="carousel-item white-text">Carousel Item Two</div><!--.carousel-item-->
<div class="carousel-item white-text">Carousel Item Three</div><!--.carousel-item-->
</div><!--.carousel-->
</form>
</div><!--.card-content-->
</div><!--card-->
</section>
JS:
$(".carousel").carousel({
fullWidth : true,
noWrap : true
});
So I have these radio buttons that a user can select and then I need a text input inside of it. How can I validate these inputs so that they are required to select a radio option, and if it is one of the first two, make sure they fill out the text inputs? I assume I need to use the jquery.validator.addMethod somehow, but i'm really lost on what I need to do. I'd really appreciate some help. Thanks so much!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="itemPricing" class="clearfix">
<div class="row">
<div class="col-sm-12" form-group>
<label for="itemPricing" class="required">Pricing</label>
<span id="helpBlock" class="help-block">Select how you want pricing to display on your website.</span>
</div>
<!-- Regular Price -->
<div class="col-sm-12 form-group">
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="regularPrice" value="">
<label for="regularPrice" class="required">Regular Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="salePrice" value="">
<label for="salePrice" class="required">Sale Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="emailPrice" value="">
<label for="emailPrice" class="required">Email for Price</label>
</div>
</div>
</div>
</div>
</div>
<!-- end itemPricing -->
<button type="submit" class="btn btn-success save ladda-button" data-style="zoom-in">Save</button>
Yes, skipping server side validation is not an option, but you get a better user experience if you also validate on the client side too. Waiting for the round trip to the server before the user becomes aware of the problem is a sure way to piss the user off. The radio buttons can have onChange handlers that check to see if the button is selected and set the required status of the textbox accordingly.