Removing div element automatically after appending it on click. It
removes the element after it adds or appends inside form tag.
$('.add').on('click', function() {
$('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button class="add">+</button> </div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testAdd" action="" method="POST">
<div class="form-group add-input">
<input type="text" placeholder="add someting...">
<button class="add">+</button>
</div>
</form>
After clicking on the + button the <div> element is appended to the form as expected. But then the form is submitted to the server. When the page reloads the html of the page is rendered again and thus the appended <div> element dissappears.
You can change the type of the button like this
<button type="button" class="add">+</button>
and add another button for sumitting the form.
add type="button" to existing button tag and work well and not submitting while clicking on it.
$('.add').on('click', function() {
$('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button type="button" class="add">+</button> </div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testAdd" action="" method="POST">
<div class="form-group add-input">
<input type="text" placeholder="add someting...">
<button type="button" class="add">+</button>
</div>
</form>
Related
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I have a page with many product listed. Each of those products is inside a div and has a form like this:
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
As you can see the value of add-to-cart is missing.
In the same div where the form is, we have an other div like this that contains the ID of the product (for instance IDPRODUCT), that needs to go inside the value:
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">IDPRODUCT</div>
I need a javascript function that on document ready(?) or onmouseover the div searches for the value inside the div, for instance IDPRODUCT, and copy this value into the value of the input name="add-to-cart"
Of course for each of those different divs there should be the proper IDPRODUCT.
Here is one JSFiddle I tried but it doesn't seem to work:JSFiddle
Any idea of how to solve this?
Thank you so much
UPDATE
The full Example again
$('.cart-add-wrapper').each(function(){
var id = $(this).find('.vc_gitem-woocommerce-product-id').text();
$(this).find('input[name=add-to-cart]').val(id);
console.log("id", id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-add-wrapper">
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">4321</div>
</div>
<div class="cart-add-wrapper">
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">1234</div>
</div>
I'm try to append 'div' element and its content inside an another 'div' but that's not working inside 'form' tag, outside its working fine ..
<form id="myForm">
<div id ="wrapfields" class="input_fields_wrap">
<div class="col-md-12 form-group">
<button style ="margin-left:1%;"class="btn btn-success"onclick="Addelemt()">+</button>
</div>
<div>
<div class="col-md-6 form-group">
<label class="text-center">Add Items</label>
<input type="text" class="form-control" name="addItem[]" id="email">
</div>
<div class="col-md-2 form-group">
<label>Price</label>
<input type="text" class="form-control" name="addprice[]" id="email">
</div>
<div class="col-md-2 form-group">
<label>Quantity</label>
<input type="text" class="form-control" name="addprice[]" id="email">
</div>
</div>
<div id ="" style="margin-bottom:10px;">
<div class="col-md-2 form-group" style="margin-left:45%;">
<button type ="submit" onsubmit ="return saveInputs()" name ="submit" class="btn btn-default"/>submit</button>
</div>
</div>
</div>
</form>
and the javascript code written so far..
var counter = 0;var increment=0;
function Addelemt()
{
var parentDiv = document.getElementById('wrapfields');
increment++;
var divClass = document.createElement("div");
divClass.setAttribute('id','divId'+increment);
console.log(divClass);
parentDiv.appendChild(divClass);
}
Can anyone tell me that why its not working inside 'form'???
So, the problem is with your html
<button style ="margin-left:1%;" class="btn btn-success" onclick="Addelemt()">+</button>
add type="button" to Add button
<button style ="margin-left:1%; "class="btn btn-success" type="button" onclick="Addelemt()">+</button>
As button inside <form> tag without type attribute is treated like Submit button, hence it refresh the page.
I have a simple form with multiple submit buttons. How do I change the java script to see, which button is clicked. Thanks
<form class="contact" role="form" data-toggle="validator" id="testform">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" name="inputName" placeholder="Cina Saffary" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button class="btn btn-success" type="submit" id="save1" value="save1">save1</button>
<button class="btn btn-success" type="submit" id="save2" value="save2">save2</button>
</div>
</form>
$('#testform').validator().on('submit', function (e) { (e.isDefaultPrevented()) {
alert("failure!");
} else {
// if save1 clicked, alert("save1 was clicked");
// if save2 clicked, alert("save2 was clicked");
}
});
You can get button value like this:
var val = $("button[type=submit][clicked=true]").val();
And you need to add one more event for button also
$("form button[type=submit]").click(function() {
$("button[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
DEMO
Reference: How can I get the button that caused the submit from the form submit event?
Have HTML (part):
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
</form>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</div>
I need to add class "modal-error" for div.modal-write-us if submitted form have empty field/fields.
JS:
var modalWriteUs = document.querySelector('.modal-write-us');
var form = modalWriteUs.querySelector('form');
var userName = modalWriteUs.querySelector('[name=user-name]');
var eMail = modalWriteUs.querySelector('[name=e-mail]');
var textArea = modalWriteUs.querySelector('[name=text]');
form.addEventListener('submit', function(event) {
if (!userName.value || !eMail.value || !textArea.value) {
event.preventDefault();
modalWriteUs.classList.add('modal-error');
}
});
But class is not added. Where is my mistake?
First of all, you need to place your submit button into the form.
Then, change submit button to input:
<input class="btn btn-red" type="submit">Submit</input>
Now you need to make some fixes in your JS.Use double quotes in atttribute selectors:
querySelector('[name="user-name"]')
Attribute required doesn't allow to submit empty form, so your submit callback never runs.If you remove required attribute your code will work.
If you put <button class="btn btn-red" type="submit">Submit</button> inside the <form> it should work.
See working Plunker.
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</form>
</div>
EDIT: More explanation here:
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.