javascript - Want to create a new instance of the component -
what want want create new ad should have title , desc user input when run code below create , [object object], , why showing object instead of 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 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 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 or seller email through 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 or seller number through 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 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> );
}
Comments
Post a Comment