Below is the snapshopt of the form which i am rendering, everything works fine except that i am not able to make form fields compulsory.I am rendering this form by means of react component.
Code:-
return <div className="panel alignment div-background" id="new-trade-form">
{this.props.store.newTradeRender}
<div className="panel panel-default">
<div className="panel-heading center-align" ><strong>New Trade</strong></div>
</div>
<div className="panel-body">
<fieldset>
<form name="myForm" id="newForm" ref="newForm" data-toggle="validator" >
Trade Date:
<div className='input-group date'>
<input type='date' className="form-control" id="date" required />
<span className="input-group-addon">
<span className="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br />
<div className="form-group">
Commodity:
<select className="form-control" id="commodity" ref="commodity" required>
<option disabled selected value=""> -- select a commodity -- </option>
{commodity}
</select>
</div>
Side:
<input type="radio" id="side" name="side" value="BUY" ref="side" />Buy
<input type="radio" id="side" name="side" value="SELL" ref="side" />Sell
<br />
<br />
<div className="form-group">
Counterparty:
<select className="form-control" id="counterparty" ref="counterparty" required>
<option disabled selected value=""> -- select a counter party -- </option>
{counterParty}
</select>
</div>
<br />
<div className="form-group">
Price($):<input id="price" name="price" type="number" step="any" className="form-control" ref="price" required />
</div>
<br />
<div className="form-group">
Quantity(MT):<input id="qty" name="qty" type="number" step="any" className="form-control" ref="qty" required />
</div>
<br />
<div className="form-group">
Location:
<select className="form-control" id="location" ref="location" required>
<option disabled selected value=""> -- select a location -- </option>
{location}
</select>
</div>
<br />
<button type='submit' className="btn btn-css btn-size" onClick={this.onSave} >SAVE</button>
</form>
</fieldset>
</div>
</div>
Note i am not getting any errors and everything works fine.
Below is the snapshot of the form:-
Try moving the handler from the button to the 's onSubmit:
<form name="myForm" id="newForm" onSubmit={this.onSave} data-toggle="validator" >
<input type='date' className="form-control" id="date" required />
<button type='submit'>SAVE</button>
</form>
remove onclick() and use submit only
#Shivendra Gupta, I have removed form tag and using refs object and assigning formRefs object when the user clicks save button a loop will run for formRefs objects and if the objects value is empty then you can show the particular filed is required. For reference I am logging the message. Hope that helps.
class Form extends Component {
constructor(props) {
super(props);
this.formRefs = {};
}
onSave = () => {
for(let key in this.formRefs) {
console.log(this.formRefs[key].value);
if(!this.formRefs[key].value) {
console.log(this.formRefs[key].getAttribute('id'), ' is required!');
}
}
}
onCancel = () => {
console.log('onCancel');
}
render() {
return (
<div className="panel alignment div-background" id="new-trade-form">
<div className="panel panel-default">
<div className="panel-heading" ><strong>Trade id: 0001 </strong></div>
</div>
<div className="panel-body">
<fieldset>
<div>
Trade Date:
<div className='input-group date'>
<input type='date' className="form-control" id="date" ref={(input) => {this.formRefs.date = input}} />
<span className="input-group-addon">
<span className="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br />
<div className="form-group">
Commodity:
<select className="form-control" id="commodity" ref={(input) => {this.formRefs.commodity = input}}>
<option selected value=""> -- select a commodity -- </option>
</select>
</div>
Side:
<input type="radio" id="side" name="side" value="BUY" ref={(input) => {this.formRefs.side = input}} />Buy
<input type="radio" id="side" name="side" value="SELL" ref={(input) => {this.formRefs.side = input}} />Sell
<br />
<br />
<div className="form-group">
Counterparty:
<select className="form-control" id="counterparty" ref={(input) => {this.formRefs.counterparty = input}} >
<option disabled selected value=""> -- select a counter party -- </option>
</select>
</div>
<br />
<div className="form-group">
Price($):<input id="price" name="price" type="number" step="any" className="form-control"
ref={(input) => {this.formRefs.price = input}} />
</div>
<br />
<div className="form-group">
Quantity(MT):<input id="qty" name="qty" type="number" step="any" className="form-control"
ref={(input) => {this.formRefs.qty = input}} />
</div>
<br />
<div className="form-group">
Location:
<select className="form-control" id="location" ref={(input) => {this.formRefs.location = input}}>
<option disabled selected value="">-- select a location -- </option>
</select>
</div>
<br />
<button className="btn btn-css btn-size btn-spacing" onClick={this.onSave} >SAVE </button>
<button className="btn btn-css btn-size btn-spacing" onClick={this.onCancel} >CANCEL </button>
</div>
</fieldset>
</div>
</div>
)
}
}
Related
Hello Guys, I need help a little bit. Can anyone help me, how to use
this keyword in my case?
<form>
<div class="form-group">
<label for="txtFirstName">Your name</label>
<input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<select id="drpPosition" name="drpPosition">
<option>I would describe my user type as </option>
<option>Web developer </option>
<option>Web designer </option>
</select>
</div>
<div class="form-group">
<label for="txtPassword">Password</label>
<input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />
<small>Minimum 8 characters</small>
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Next" />
</div>
</form>
This is my JavaScript Code:
var inputFirstName = document.querySelector('.inputBox');
console.log(inputFirstName);
this.addEventListener('focusin', inputAddClassFunc);
this.addEventListener('focusout', inputRemoveClassFunc);
function inputAddClassFunc(event){
console.log(this);
this.previousElementSibling.classList.add('active');
}
function inputRemoveClassFunc(event){
var hasValue = this.value;
if(!hasValue) {
this.previousElementSibling.classList.remove('active');
}
}
When I focusin into the textbox, active class will be added to it's
sibling's lable And in my case, It only works in first textbox but not
for all textbox. How can I use "this" to works for all textbox?
I'd use event delegation instead - add focusin and focusout listeners to the form, and when the event fires, if the target of the event is one of the .inputBoxes, carry out the logic to change the class of the event.target.previousElementSibling:
const form = document.querySelector('form');
form.addEventListener('focusin', inputAddClassFunc);
form.addEventListener('focusout', inputRemoveClassFunc);
function inputAddClassFunc(event) {
if (event.target.matches('.inputBox')) {
event.target.previousElementSibling.classList.add('active');
}
}
function inputRemoveClassFunc(event) {
if (event.target.matches('.inputBox')) {
var hasValue = event.target.value;
if (!hasValue) {
event.target.previousElementSibling.classList.remove('active');
}
}
}
.active {
background-color: yellow;
}
<form>
<div class="form-group">
<label for="txtFirstName">Your name</label>
<input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<select id="drpPosition" name="drpPosition">
<option>I would describe my user type as </option>
<option>Web developer </option>
<option>Web designer </option>
</select>
</div>
<div class="form-group">
<label for="txtPassword">Password</label>
<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />
<small>Minimum 8 characters</small>
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Next" />
</div>
</form>
Also note that if you want the txtPassword element to have the inputBox class, you should change
<input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />
to
<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />
(remove the duplicate cool attribute)
<script>
const scriptURL = ''
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})
</script>
<div class="col-md-5">
<div class="background-form">
<form id="contact" action="" method="post">
<fieldset>
<input placeholder="Your name" name="Name" type="text" tabindex="1" required >
</fieldset>
<fieldset>
<input placeholder="Your Email Address" name="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" name="Phone_No" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<select name="Category_Interested" title="Center" class="form-control" required>
<option value=""> Category Interested In</option>
<option value="Modular Furnitur">Modular Furniture</option>
<option value="Home Furnishing">Home Furnishing</option>
<option value="Kitchen Appliances">Kitchen Appliances</option>
</select>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
<div class="callus">
<span class="call-span">Call Us: +91 9711600069</span>
</div>
</form>
</div>
<section id="fixed-form-container">
<div class="button blink">
<span>Free Enquiry</span>
</div>
<div class="body">
<form name="submit-to-google-sheet">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name" name="Name">
</div>
<div class="form-group">
<label for="contact">Phone No.:</label>
<input type="tel" name="Phoneno" class="form-control" id="contact">
</div>
<div class="form-group" style="margin-top: -38px;">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label for="category">Category Interested In</label>
<select name="category" title="Center" class="form-control" required>
<option value=""> Category Interested In</option>
<option value="Modular Furnitur">Modular Furniture</option>
<option value="Home Furnishing">Home Furnishing</option>
<option value="Kitchen Appliances">Kitchen Appliances</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<div class="callus callus-phone">
<span class="call-phone-span call-span">Call Us: +91 9711600069</span>
</div>
</form>
</div>
</section>
</div>
I am trying to link two forms that are created using HTML with one google sheet. If i try adding two SrciptURLs, it shows an error. I want that data of both the forms can be seen in one Google Sheet. Is that possible? If yes, then how?
These are the forms along with the script that i added to link it to the Google Sheet.
There is no error when i fill in the entries and submit in both the forms but details of only one form can be seen in the Google Sheets.
I am using Angular 2 and I have created a form and mark all the fields as required but in only one field required is not working but when I inspect through browser then I can check on that field it is giving error like ng-untouched, ng-invalid sill my form got submitted.
My code is below:
<form (ngSubmit)="AddUpdateExperience(selectedExperience);experienceForm.reset();selectedExperience.restaurantType='';selectedExperience.workProfile='';selectedExperience.restaurantName=''" #experienceForm="ngForm">
<div class="form-group">
<div class="col-sm-6">
<!--<input type="text" class="form-control" placeholder="City" name="scity" [(ngModel)]="selectedExperience.city" #scity="ngModel" required />-->
<input type="text" class="form-control input-responsive" [(ngModel)]="selectedExperience.city" [ngModelOptions]="{standalone: true}" options="{types: ['address'], componentRestrictions: { country: 'US' }}" (setAddress)="getAddressForExperience($event)" (city)='city=$event' (postal_code)='postal_code=$event' id="autocomplete" placeholder="City you work in*" required ng2-google-place-autocomplete />
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive" placeholder="Zip(Optional)" name="szip" [(ngModel)]="selectedExperience.zip" maxlength="5" pattern="[0-9]{5}" #szip="ngModel" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<!--<input type="text" class="form-control" [(ngModel)]="selectedExperience.restaurantName" #restaurantName="ngModel" placeholder="Restaurant Name" name="restaurantName" required>-->
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName" #myserver [formControl]="restaurant" [source]="restaurants" [list-formatter]="autocompleListFormatter" value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*" (blur)="update(myserver.value)" loading-text="Loading" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<select class="form-control input-responsive" name="restaurantType" [(ngModel)]="selectedExperience.restaurantType" #restaurantType="ngModel" required>
<option value="" disabled selected>Select Restaurant Type</option>
<option value="Ethnic">Ethnic</option>
<option value="Fast Food">Fast Food</option>
<option value="Fast Casual">Fast Casual</option>
<option value="Casual Dinning">Casual Dinning</option>
<option value="Family Style">Family Style</option>
<option value="Fine Dinning">Fine Dinning</option>
<option value="Cafe">Cafe</option>
<option value="Bar">Bar</option>
</select>
</div>
<div class="col-sm-6">
<select class="form-control input-responsive" name="designation" [(ngModel)]="selectedExperience.workProfile" #workProfile="ngModel" required>
<option value="" disabled selected>Select Work Profile</option>
<option value="Bartender">Bartender</option>
<option value="Server">Server</option>
<option value="Busser">Busser</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerFrom" readonly="true" placeholder="From* : MM/yyyy" maxlength="7" name="fromDate" [(ngModel)]="selectedExperience.fromDate" required #fromDate="ngModel" />
<div *ngIf="fromDate.errors && (fromDate.dirty || fromDate.touched)">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">
From Date is required
</small>
</div>
<!--<div *ngIf="fromDate.errors">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">Invalid From Date</small>
</div>-->
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerTo" readonly="true" [disabled]="selectedExperience.isCurrentJob" placeholder="To*: MM/yyyy" maxlength="7" name="toDate" [(ngModel)]="selectedExperience.toDate" #toDate="ngModel" />
<div *ngIf="toDate.errors">
<small [hidden]="!toDate.errors.pattern" class="text-danger">Invalid To Date</small>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<ui-switch (change)="onChange($event)" [(checked)]="selectedExperience.isCurrentJob"></ui-switch>
<p>This is my current job</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" [disabled]="!experienceForm.form.valid " value="{{experienceButtonText}}" class="btn btn-success" />
</div>
</div>
</form>
my form is not working for this field:
[(ngModel)]="selectedExperience.restaurantName"
You have used template driven forms for this. Please remove [formControl]="restaurant" and add name="restaurantName" #restaurantName="ngModel". Following is the working code. It works for me.
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName"
#myserver [source]="restaurants" [list-formatter]="autocompleListFormatter"
value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*"
(blur)="update(myserver.value)" loading-text="Loading" required name="restaurantName" #restaurantName="ngModel">
I have select with options and I have many inputs. I need to span ready input if I select in option for example "USER" and hide it again if select another option.
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading"> Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
<option value="3">Smth else</option>
<option value="4">Smth else of else</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div>   </div>
<div class="col-xs-12">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div>   </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>
$( "#selectlist" ).change(function(event) {
if (this.value == 1 || this.value == 2) {
$(".form-control").show();
} else {
$(".form-control").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading"> Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
<option value="3">Smth else</option>
<option value="4">Smth else of else</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div>   </div>
<div class="col-xs-12">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div>   </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>
I would use a custom attribute called valueTie. When you update the select, your content will automatically update accordingly. What's nice is all you have to do is add another option and another div with the attribute valueTie and you're up and running with another option.
$("#selectlist").change(function () {
$("[valueTie]").hide()
$("[valueTie='" + $(this).val() + "']").show();
});
$("#selectlist").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading">
Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12" valueTie="1">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div class="col-xs-12" valueTie="2">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div>   </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>
How i can update date and time value in a field, when i called popup?
Because in my case the datetime django was updated on refresh.
My popup :
$(document).ready(function(){
PopUpHide();
});
function PopUpShow(){
$("#popup1").show();
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#popup1").hide();
});
}
function PopUpHide(){
$("#popup1").hide();
}
In html form popup :
<div class="b-popup b-popup-content" id="popup1">
<div class="cleanuphtml-1">
Add 'problem' item
</div>
<form action="" method="post">
{% csrf_token %} <input id="id_pk_post" value="1" maxlength="1" name="pk_post" type="text" /> <input id="id_post_request" value="1" maxlength="1" name="post_request" type="text" />
<div class="cleanuphtml-2">
<label for="id_description_post">Description:</label>
<textarea id="id_description_post_id" maxlength="9999" name="description_post" autofocus="" onkeyup="enableField(this.form,this.value)" type="text">
</textarea>
</div>
<div class="cleanuphtml-4">
<label for="id_start_date">Start date : <input type="text" name="start_date" id="datetimepicker" /> <label>End date :</label> <input type="text" name="end_date" id="datetimepicker2"
class="cleanuphtml-3" /></label>
</div>
<div class="cleanuphtml-6">
<p class="cleanuphtml-5">
<label>Priority :</label> <select method="post" name="priority_post">
<option value="1" id="id_priority_post" name="priority_post">
High
</option>
<option value="2" id="id_priority_post" name="priority_post">
Medium
</option>
<option value="3" id="id_priority_post" name="priority_post" selected="selected">
Low
</option>
</select>
</p>
</div>
<div class="cleanuphtml-9">
<input type="submit" name="bttnsubmit" value="Add" onclick="window.location.href='/'" disabled="true" class="cleanuphtml-7" /> <input type="button" value="Cancel" onclick="PopUpHide()"
class="cleanuphtml-8" />
</div>
</form>
</div>
This is with jquery called calendar :
$('#datetimepicker').datetimepicker()
.datetimepicker({value:'{{ now_date|date:'Y-m-d H:i' }}',step:10});