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>
);
}
Related
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>
<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'm trying to get what's inside an input through document.getElementById, it does get other values but specifically for this one it does not.
let title_input = document.getElementById('HomeworkTitle').value; that's what I'm trying to do, to then use it here:
function saveHomework() {
let title_input = document.getElementById('HomeworkTitle').value;
let image_input = document.getElementById('image').value;
let progress_input = document.getElementById('progress').value;
let description_input = document.getElementById('description').value;
let duedate_input = document.getElementById('duedate').value;
axios.post('/storeHomework', {
subject_id: {{ $id->id }},
title: title_input,
image: image_input,
progress: progress_input,
description: description_input,
duedate: duedate_input
}).then((response) => {
console.log(response)
$("#exampleModal .close").click();
}).catch((error) => {
console.log(error.response.data)
});
$('#thisdiv').load(document.URL + ' #thisdiv');
}
saveHomework();
In the HTML I got:
<div class="form-group">
<label for="exampleInputEmail1">Title:</label>
<input type="text" name="HomeworkTitle" id="HomeworkTitle" class="form-control" aria-describedby="help">
<small id="help" class="form-text text-muted">Ex: Investigate blah blah blah.</small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Description:</label>
<textarea type="text" name="description" id="description" class="form-control" aria-describedby="help"></textarea>
<small id="help" class="form-text text-muted">Point out here details about the homework (optional).</small>
</div>
<div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
<input id="image" type="file" name="image" onchange="readURL(this);" class="form-control border-0">
<div class="input-group-append">
<label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Deadline:</label>
<input class="form-control" type="date" id="duedate" name="duedate">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Current progress:</label>
<div class="range-slider">
<input class="range-slider__range" type="range" value="0" min="0" max="100" step="10" id="progress" name="progress">
<span class="range-slider__value">0</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary btn-submit" onclick="saveHomework()">Add Homework</button>
</div>
</div>
Not sure why it's not working.
if you are sure your javascript file is properly linked
try this
document.getElementById("HomeworkTitle").value;
Please check this
var title_input = ''
let check = document.getElementById("HomeworkTitle")
check.addEventListener("focusout", myFunction);
function myFunction() {
title_input = check.value
console.log(check.value)
}
/////////////here you can you variable//////////////////
//axios.post('/storeHomework', {
//console.log('title_input',title_input)
//title: title_input, //here
// }
function saveHomework() {
let image_input = document.getElementById('image').value;
let progress_input = document.getElementById('progress').value;
let description_input = document.getElementById('description').value;
let duedate_input = document.getElementById('duedate').value;
axios.post('/storeHomework', {
subject_id: {{ $id->id }},
title: title_input,
image: image_input,
progress: progress_input,
description: description_input,
duedate: duedate_input
}).then((response) => {
console.log(response)
$("#exampleModal .close").click();
}).catch((error) => {
console.log(error.response.data)
});
$('#thisdiv').load(document.URL + ' #thisdiv');
}
<div class="form-group">
<label for="exampleInputEmail1">Title:</label>
<input type="text" name="HomeworkTitle" id="HomeworkTitle" class="form-control" aria-describedby="help">
<small id="help" class="form-text text-muted">Ex: Investigate blah blah blah.</small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Description:</label>
<textarea type="text" name="description" id="description" class="form-control" aria-describedby="help"></textarea>
<small id="help" class="form-text text-muted">Point out here details about the homework (optional).</small>
</div>
<div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
<input id="image" type="file" name="image" onchange="readURL(this);" class="form-control border-0">
<div class="input-group-append">
<label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Deadline:</label>
<input class="form-control" type="date" id="duedate" name="duedate">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Current progress:</label>
<div class="range-slider">
<input class="range-slider__range" type="range" value="0" min="0" max="100" step="10" id="progress" name="progress">
<span class="range-slider__value">0</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary btn-submit" onclick="saveHomework()">Add Homework</button>
</div>
</div>
what error are you getting? maybe your input is empty and that´s why you don´t gent anything?
function saveHomework() {
const title = document.getElementById("HomeworkTitle");
console.log(title.value)
}
<input type="text" id="HomeworkTitle" value="somevalue">
<button onclick="javascript:saveHomework()">save</button>
I have an HTML form which has text field with an add more button. When we click on the button a text field is added to the form. Following is the code for the form:
<div class="input-group g-mb-25">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]">1.</label>
</div>
<input type="text" class="form-control form-control-md" placeholder="Enter your Video Title. This will also be the starting point of your video..." aria-describedby="basic-addon1">
</div>
<div class="row">
<div class="col-lg-4">
<!-- Checkbox -->
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input" id="numCheck">
<span class="custom-control-label">Show numbers</span>
</label>
<!-- End Checkbox -->
</div>
</div>
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1" />
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>
The js for adding the fields is as follows:
// Add more fields
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('u-btn-cyan').addClass('u-btn-lightred')
.html('<span class="fa fa-trash"></span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
Notice that I have prepended a label to the text field:
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]"></label>
</div>
What I am unable to figure out is How can I add numbers to the label as I add more fields, 1 being the default number for the first Title field
Added form HTML with default field:
<div class="input-group g-mb-25">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]"></label>
</div>
<input type="text" class="form-control form-control-md" placeholder="Enter your Video Title. This will also be the starting point of your video..." aria-describedby="basic-addon1">
</div>
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1" />
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>
The new field is added as:
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1">
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>
in php file i have simple form and bootstrap modal . after clicking submit button bootstrap modal will display.
Form is:
i need to validate above form fields. if it is success then i need to display the modal and validate those fields.
Modal is:
My Code is:
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Fill Below Details</h3>
</div>
<div class="modal-body">
<div class="main-login pop-up-form">
<form class="" method="post" action="#"><br>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Address"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Phone No"/>
</div>
</div>
</div>
<div class="form-group ">
CLICK For Enquiry
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
Form code is showed below:
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
<input type="date" class="form-control" name="udate" id="udate" placeholder="ghf" style="height: 39px !important;" />
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10 food">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<select name="ftime" id="ftime">
<option value="">---Select---</option>
<option value="1">Breakfast</option>
<option value="2">Lunch</option>
<option value="3">Dinner</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10 food">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<select id="ftype" name="ftype" onchange="validate()">
<option value="">--select--</option>
<option value="hai">V</option>
<option value="hai">NV</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-money fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="amount" id="amount" placeholder="hai" readonly="readonly" />
</div>
</div>
</div>
<div class="form-group ">
<a href="#" data-toggle="modal" data-target="#squarespaceModal" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button" onclick="
validate2()">Submit</a>
</div>
</form>
i was not able to validate both the form and modal. please help me on this..
thanks in advance
You can write a simple validation method
An example could be....
function checkValidation()
{
var isValid = true;
if($("#date").val() == null){
isValid = false;
}
if($("#person").val() == null){
isValid = false;
}
if($("#mail").val() == null){
isValid = false;
}
return isValid;
}
if(checkValidation())
$("#modalDialog").show();
else
alert("Form is not valid");
Try this code:
First attach an click listener to your form submit button and validate your form when button is clicked and if validation is successful then you can show your modal.
$(document).on('click', '#submit', function(e){
e.preventDefault();
var validated = validateform();
if(validated){
$('#modal').modal('show');
}
});
Write your validation logic inside this function and return true if validation passes tests.
function validateform(){
// logic for form validation
// return true if validated successfully
}