When I write my input to create a new card, all the inputs are activated. How can I avoid multiple entries?
<draggable :options="{ group: 'lists' }" group="lists" ghostClass="ghost" class="list-draggable">
<div class="list-card" v-for="categories in category" :key="categories.id" >
<div style="padding-left:20px"><button type="button" class="delete close btn btn-default" data-dismiss="modal" #click="deleteCategory(categories.id)"><h3>x</h3></button></div>
<label class="list-header" style="display:block;">
<input class="cat-name" v-on:blur="updateCategory(categories)" v-model="categories.name" />
</label>
<div class="list-content">
<card-list :listId="categories.id" :listName="categories.name" #setArticleId="setArticleId" />
</div>
<div class="list-footer">
<input type="text" class="input-cards" placeholder="Create a new card" v-model="title" #keyup.enter="cardName(categories.id)" />
</div>
</div>
</draggable>
Related
<li>
<div class="destination">
<img src="image/destination/chamba.jpg" alt="">
<div class="destinationDetails">
<h2>Chamba <h2>
<h3>Starting From Rs. 2500 <h3>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<li>
<div class="destination">
<img src="image/destination/parvati.jpg" alt="">
<div class="destinationDetails">
<h2>Parvati Valley <h2>
<h3>Starting From Rs. 2500 <h3>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Package</b></label>
<input type = "text" id="test2" name "teste2">
<button type="button" onclick="MyFunction()">Click To Fill Up</button>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
I am using This Code To Make A Booking Page. I Want To Fill Up The Package Field Automatically when someone clicks "book now" or using a button to fill up the field by clicking on it.
For Example: If I click the "book now" button in the first "li", the package filled should be automatically filled up as "Chamba" and If I Click The "book now" button in second "li" the packages field should be automatically filled as "Parvati Valley".
Is there any way to do so...??
Thanks For Your Help In advance.
Add a function and set appropriate value. Consider this for learning purpose only.
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function setPackage(packageName) {
document.querySelector('#test2').value = packageName;
}
<li>
<div class="destination">
<img src="image/destination/chamba.jpg" alt="">
<div class="destinationDetails">
<h2>Chamba
<h2>
<h3>Starting From Rs. 2500
<h3>
<button onclick="setPackage('Chamba');document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<li>
<div class="destination">
<img src="image/destination/parvati.jpg" alt="">
<div class="destinationDetails">
<h2>Parvati Valley
<h2>
<h3>Starting From Rs. 2500
<h3>
<button onclick="setPackage('Parvati Valley');document.getElementById('id01').style.display='block'" style="width:auto;" type="button" name="button" class="commonBtn"> Book Now</button>
<button type="button" name="button" class="commonBtn"> View Variations</button>
</div>
</div>
</li>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Package</b></label>
<input type="text" id="test2" name "teste2">
<button type="button" onclick="MyFunction()">Click To Fill Up</button>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
I have a blade form which has a repeater input box and a select box, the repeater works fine but how do i pass the data from those fields to back-end controller in laravel?
add.balde.php
<!--begin::Add-Invoice-Form-->
<form class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" action="{{route('store_invoice')}}" method="POST" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="col-lg-4">
<label>
Customer Name:
</label>
<select class="form-control m-select2" id="m_select2_1" name="customerId">
#foreach($customer_list as $customer)
<option value=" {{ $customer->id }} ">
{{ $customer->fName }} {{ $customer->mName }} {{ $customer->lName }}
</option>
#endforeach
</select>
</div>
<div class="col-lg-4">
<label>
Invoice Type:
</label>
<div class="m-radio-inline">
<label class="m-radio m-radio--solid">
<input type="radio" name="invoiceType" checked value="billable">
Billable
<span></span>
</label>
<label class="m-radio m-radio--solid">
<input type="radio" name="invoiceType" value="nonbillable">
Non Billable
<span></span>
</label>
</div>
</div>
</div>
<div id="m_repeater_1">
<div class="form-group row" id="m_repeater_1">
<div data-repeater-list="" class="col-lg-12">
<div data-repeater-item class="form-group m-form__group row align-items-center">
<div class="col-lg-4">
<label>
Summary Number:
</label>
<select class="form-control m-select2" id="m_select2_2" name="certificateId[]">
#foreach($certificate_list as $certificate)
<option value=" {{ $certificate->id }} ">
{{ $certificate->summary_no }} ( {{ $certificate->certificateType() }} )
</option>
#endforeach
</select>
</div>
<div class="col-lg-3">
<label>
Rate:
</label>
<input type="number" class="form-control m-input" name="rate" placeholder="Enter rate">
</div>
<div class="col-lg-3">
<br/>
<div data-repeater-delete="" class="btn btn btn-danger m-btn m-btn--icon">
<span>
<i class="la la-trash-o"></i>
<span>
Remove
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="m-form__group form-group row">
<div class="col-lg-4">
<div data-repeater-create="" class="btn btn btn-warning m-btn m-btn--icon">
<span>
<i class="la la-plus"></i>
<span>
Add
</span>
</span>
</div>
</div>
</div></div>
</div>
<div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
<div class="m-form__actions m-form__actions--solid">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<button type="submit" class="btn btn-primary">
Submit
</button>
<button type="reset" class="btn btn-secondary">
Cancel
</button>
</div>
</div>
</div>
</div>
</form>
<!--end::Add-Invoice-Form-->
How do I send the values in array format when multiple select box have been filed using repeater?This images shows the UI for the form
Thank you
you can try something like this
<input type="text" value="val" name="somename[]">
<select name="someSelectName[]">
<option value="value">select 1
</option>
</select>
on server side you will receive selected values as array with given name
Change your
<div data-repeater-list="" class="col-lg-12">
To
<div data-repeater-list="arrayName" class="col-lg-12">
and It should work.
This makes the all the input names to have an array format of arrayName[number][input] and the number increments for each input and finally in the request sent you will have all the inputs in the arrayName
Hello I have a problem with this following code :
<form id="signon_form" method="post" action="r1.php" class="form-signin" name="">
<div id="error" class="error">
<img src="images/error_button.png" /> <span id="error_message"></span>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="username_input_label" class="user_label" for=
"username_input" style=""></label> <input id="username_input" name=
"username" type="text" class="input_fields username_input" autocorrect=
"off" autocapitalize="off" autocomplete="off" tabindex="1" placeholder="example#email.ca"/>
</div>
<div class="input_info help_icon">
<a id="help_icon" class="help_link" href="javascript:;" data-toggle="modal" data-target="#myModal" tabindex="3">
<img src="images/icons/helpIcon.png"><br/>
Help
</a>
</div>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="password_input_label" class="user_label" for=
"password_input" style="">Password</label> <input id="password_input"
name="password" type="password" class="input_fields" tabindex="2" />
</div>
<div class="input_info">
<button type="button" id="account_number_popover_password" class=
"account_number_popover ic icon-shaw-question" data-toggle="modal"
data-target="#myModal"></button>
</div>
</div>
<div class="clearfix"></div>
<div id="checkbox-section" class="checkbox-section">
<div id="checkbox" class="checkboxFive">
<input type="checkbox" id="" class="persistent_check" name="" checked=
"checked" tabindex="4"/> <label id="checkboxMask" class="ic" for=""></label>
</div>
<div id="checkbox-label" class="checkbox-label">
<label>Remember Shaw email</label>
</div>
</div>
<div style="text-align:center">
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class=
"button button_disabled" tabindex="5">Sign in</button>
</div>
<div id="description-section" class="description-section">
<center>
<div id="forgot" class="description_one">
To recover your email address or to reset your password visit the Internet section in My Account.
</div>
<div id="create_new_account" class="description_two hidden-xs hidden-sm hidden-md">
<span class="dont-have-account-phone">Don't have an account?</span>
<a target="_self" data-event="navigation-element" data-value=
"signon|body|create-one-now-link" id="create_one_now" href=
"#"><span class=
"dont-have-account-desktop">Don't have an account?</span>
<span class="create-one-now-url">Create one now.</span></a>
</div>
</center>
</div><input type="hidden" id="anchor" name="anchor" value="" />
</form>
you see that I have an action in the form which is r1.php and the button has a onclick="location.href='r1.php'" if I delete it the Sign In button doesn't work I want to get rid of it can you help me guys I'm a begginer and experimenting with website's source code to learn a little please if you could help me I'll be so greatfull
What you are looking for is an actual form submission, rather than a simple redirection.
Instead of:
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class="button button_disabled" tabindex="5">Sign in</button>
You need an input type of submit:
<input type="submit" value="Submit" id="signin_submit">
This tells the button to actual POST the data. Note that you may need to slightly tweak your CSS to give the desired display.
Hope this helps!
I having trouble for adding a multiple Sub Author in my form, I have a form that you can add a sub author. The code works if I only submit one sub author but if multiple sub author the codes not working.
Here's the code of my text box in FormAddBook.
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
And when you want to add another sub author, text box will appear when yun click the Add Sub Author with the same name of textbox.
The codes work when one sub author only but if multiple sub authors the codes not working.
Here's the code of my jquery.
$.ajax({
type: 'POST',
url: 'proc/exec/exec-insert-book.php',
data: $('#FormAddBook').serialize(),
});
Does the Serialize cannot recognize the another text box?
Sorry for my bad english.
Here's the HTML Form code.
<form id="FormAddBook">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 hide" >
<label>Accession No:</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Accession No" name="AccessionNo" readonly/>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>ISBN:</label>
<input type="text" class="form-control" placeholder="ISBN" name="BookISBN" maxlength="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date Book Added:</label>
<div id="DateBookAdded" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="Date Book Added" name="DateBookAdded" readonly/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Archived Date Extension:</label>
<div id="BookAuthLast" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="" name="ArchivedDateExt" readonly/>
</div>
</div>
</div>
<div id="subauthcont">
<div class="subAuthors col-lg-12">
<div class="form-group">
<label>Sub authors:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
<span class="input-group-btn" disabled>
<button id="btnAddSubAuth" class="btn btn-info" type="button" ><i class="fa fa-user" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<label>Subject:</label>
<select class="form-control" name="Description">
<option>Generalities</option>
<option>Philosophy and Psychology</option>
<option>Religion</option>
<option>Social Science</option>
<option>Languages</option>
<option>Science</option>
<option>Technology</option>
<option>Arts and Recreation</option>
<option>Literature</option>
<option>Geography and History</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Status:</label>
<select class="form-control" name="Status" readonly>
<option>Available</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave2" type="submit" class="btn btn-primary asd">Save</button>
</div>
</form>
</div>
What i want is that i want to create a new ad which should have the title and desc which user input but when i run the code below it create and [object Object], and why is it showing object instead of the ad please explain
var ValidatePost = React.createClass({
CheckingPost: function() {
var product_title = document.forms["post"]["pro_title"].value;
var product_desc = document.forms["post"]["pro_desc"].value;
var clearForm = document.forms["post"];
var returnAd = <Newad title={product_title} desc={Product_desc} />
var newproduct = document.getElementById("newproduct");
newproduct.innerHTML += returnAd;
clearForm.reset();
},
render: function(){
return(
<div>
<button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" className="btn btn-primary btn-md" id="post-ads" onClick={this.CheckingPost} data-dismiss="modal"><span className="glyphicon glyphicon-pencil"></span> Post Add
</button>
</div>
);
}
});
function Ads(product) {
return(
<div className = "col-sm-6 col-md-4">
<div className = "thumbnail">
<img src={product.image} alt="product-image"/>
</div>
<div className = "caption">
<div className="border">
<h3>{product.title}</h3>
<p>{product.desc}</p>
<button className = "btn btn-primary" role = "button" data-toggle="modal" data-target="#view-detail">View Details
</button>
</div>
</div>
</div>
);
}
function Newad(product) {
return (
<div className="row" id="newproduct">
<Ads title="Forza" desc="rndom text rndom text rndom text rndom text" image="img/img2.jpg" />
<Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum" image="img/img1.jpg" />
<Ads title="Xbox one" desc="Lorem ipsum jipsum Lorem ipsum jipsum" image="img/img3.png" />
<Ads title="MacBook" desc="Lorem ipsum jipsum Lorem ipsum jipsum" image="img/img4.jpg" />
</div>
);
}
function PostModal() {
return (
<form id="post-form" method="POST" name="post">
<div className="modal fade" id="addPostModal" role="dialog">
<div className="modal-dialog" role="document">
<div className="modal-content" >
<div className="modal-header" >
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 className="modal-title" id="exampleModalLabel">Post Your Add</h3>
</div>
<div className="modal-body">
<span id="errorPlace" >
</span>
<div className="form-group">
<label htmlFor="product-title" className="control-label">Title:</label>
<input type="text" placeholder="My Book" className="form-control field-validate" id="product-title" name="pro_title"/>
</div>
<div className="form-group">
<label htmlFor="product-desc" className="control-label">Description:</label>
<textarea className="form-control field-validate" placeholder="Description here . . ." id="product-desc" name="pro_desc"></textarea>
</div>
<div className="form-group">
<label htmlFor="seller-name" className="control-label">
Seller Name:
<i data-toggle="tooltip" title="This can be your or seller name." data-placement="right" className="glyphicon glyphicon-question-sign"></i>
</label>
<input type="text" placeholder="Osama" className="form-control field-validate" id="seller-name" name="sel_name"/>
</div>
<div className="form-group">
<label htmlFor="seller-email" className="control-label">
Seller Email:
<i data-toggle="tooltip" title="This can be your or seller email through which the buyer can contact you" data-placement="right" className="glyphicon glyphicon-question-sign"></i>
</label>
<input type="email" placeholder="someone#somedomain.com" className="form-control field-validate" id="seller-email" name="sel_email"/>
</div>
<div className="form-group">
<label htmlFor="seller-number" className="control-label">
Seller Contact No:
<i data-toggle="tooltip" title="This can be your or seller number through which the buyer can contact you" data-placement="right" className="glyphicon glyphicon-question-sign"></i>
</label>
<input type="number" placeholder="+92" className="form-control field-validate" id="seller-number" name="sel_no"/>
</div>
<div className="form-group">
<label htmlFor="price" className="control-label">
Price:
<i className="glyphicon glyphicon-question-sign"></i>
</label>
<input size="2" type="number" placeholder="66.00" className="form-control field-validate" id="price" name="price"/>
</div>
<div className="form-group">
<label htmlFor="seller-email" className="control-label">
Product Image:
<i data-toggle="tooltip" title="Upload picture of your product" data-placement="right" className="glyphicon glyphicon-question-sign"></i>
</label>
<input type="file" onchange="imgUpload(event, this)" id="product-image" />
<div className="img-wrap-up">
<img id="img-view" src="" />
</div>
</div>
<div id="error-place"></div>
</div>
<div className="modal-footer">
<ValidatePost />
</div>
</div>
</div>
</div>
</form>
);
}