I want to send my forms by click on each submit button.
My question: How can i send each forms and indicate each result separately. I've tested the following code but it does not send any thing and there is no result in div with .divs:
$("form").on('submit',function(e) {
var url = 'http://seller.ir/test'
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function(data) {
$(this).find('.divs').empty
$(this).find('.divs').html(data)
}
});
e.preventDefault();
});
form{
width:100px;
border:1px solid blue;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
<form>
<button id="done"type="submit">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done" type="submit">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done" type="submit">done</button>
</form>
</div>
The only problem with your code is that your forms don't have .divs as their descendants. Please read the documentation of .find().
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Change your HTML to
<form>
<button id="done"type="submit">done</button>
<div class="divs"></div>
</form>
<form>
<button id="done"type="submit">done</button>
<div class="divs"></div>
</form>
<form>
<button id="done"type="submit">done</button>
<div class="divs"></div>
</form>
Now, if you press the done button, the corresponding form will trigger its submit event, which will be handled by jQuery. Also, as other answers pointed out, IDs for different elements have to be unique for an HTML page.
If you're just replacing the contents of the inner div, this line is sufficient.
$(this).find('.divs').html(data);
You don't need to empty the div first.
Related
I write the blow codes and I would send my forms when I click on each forms submit button.
my question is how can I send each forms separately and indicate each result separately .because when my codes run all of the forms will submit at the same time.
here is my codes:
$("#done").click(function(e) {
var url = 'secondpage.htm'
$.ajax({ type: "POST", url: url, data: $("#done").serialize(),
success: function(data) {
$('.divs').empty()
$(".divs").html(data)
} }); e.preventDefault();
});
form{
width:100px;
border:1px solid blue;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>
<div class="divs">
<form>
<button id="done">done</button>
</form>
</div>
you need a submit the from to change the button type="submit"
Note: i was added divs inside the form .for prevent the form removing after the ajax call
Updated:
$("form").on('submit',function(e) {
var url = 'secondpage.htm'
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function(data) {
$(this).find('.divs').empty
$(this).find('.divs').html(data)
}
});
e.preventDefault();
});
form {
width: 100px;
border: 1px solid blue;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<button id="done" type="submit">done</button>
<div class="divs">
</div>
</form>
<form>
<button id="done" type="submit">done</button>
<div class="divs">
</div>
</form>
<form>
<button id="done" type="submit">done</button>
<div class="divs">
</div>
</form>
You have many problems in your actual code, from which we can state:
Giving the same id for multiple elements in the page, you can use class instead.
With $("#done").serialize() you are only serializing the first element with id="done" and not any form.
You are overriding the .divs content so deleting your forms from the page with $('.divs').empty() and $(".divs").html(data), you better use a specific element to show the response and use .text() method to fill it with the content.
I tried to refactor your code so it works the way you want, here's what you will need:
$(".done").click(function(e) {
var url = 'secondpage.htm';
$.ajax({
type: "POST",
url: url,
data: $(this).closest('form').serialize(),
success: function(data) {
//$('.divs').empty() You will erase your form here
$(this).closest('.preview').text(data)
}
});
e.preventDefault();
});
Demo:
$(".done").click(function(e) {
var url = 'secondpage.htm';
$.ajax({
type: "POST",
url: url,
data: $(this).closest('form').serialize(),
success: function(data) {
//$('.divs').empty() You will erase your form here
$(this).closest('.preview').text(data)
}
});
e.preventDefault();
});
form {
width: 100px;
border: 1px solid blue;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="divs">
<form>
<button class="done">done</button>
</form>
<div class="preview"></div>
</div>
<div class="divs">
<form>
<button class="done">done</button>
</form>
<div class="preview"></div>
</div>
<div class="divs">
<form>
<button class="done">done</button>
</form>
<div class="preview"></div>
</div>
Note:
I used a done class instead of id, and referred it with
$('.done') in JS code.
I used $(this).closest('form').serialize() to respectively serialize the appropriate form when clicking on the button.
I added a div with class="preview" in each form to hold the displayed response, and filled it with $(this).closest('.preview').text(data) in the JS code.
By using $(this).closest() we are sure to handle only the form containing the clicked button.
I have a div and I want to duplicate it. I mean that I wanted the same div to be duplicated once. I have used such code for it.
$("#btnAddRules").click(function(){
$(".div1_section").clone().insertAfter($(".div1_section"));
});
But, when click on the button again and again , it is adding multiple of the DIVs and I wanted only one div to be inserted after the last div.
<div class="col-md-8">
<div class="row div1_section">
<div class="col-md-6">
<label>hey hey hey</label>
<select class="form-control">
<option>klklk</option>
<option>huhuuh</option>
</select>
<br/>
</div>
<div class="col-md-6">
<label>abc</label>
<div class="input-group-currency">
<span class="currency">pk</span>
<input type="text" class="form-control input-currency" name="start" value="20'000" style="float:left">
</div>
</div>
</div>
Hope to hear from you, soon.
Thanks
Use last() to target just the last element from the collection:
$("#btnAddRules").click(function() {
$(".div1_section").last().clone().insertAfter($(".div1_section").last());
});
.div1_section {
line-height:50px;
margin:20px 0;
padding:0 20px;
background:tomato;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddRules">Add More Rules</button>
<div class="div1_section">Original</div>
Remove the event listener after the first click like this:
var callback = function () {
document.getElementById('btnAddRules').removeEventListener('click', callback);
$(".div1_section").clone().insertAfter($(".div1_section"));
}
document.getElementById('btnAddRules').addEventListener('click', callback);
Sorry for using vanilla JS and your jquery, I'm more used to write vanilla JS.
Use last() to target just the last element from the collection and after() to put div after a div:
$("#btnAddRules").click(function(){
$(".div1_section").last().after($(".div1_section").last().clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1_section" >
Hi this is testing
</div>
<button type="button" id="btnAddRules">
Add DIV
</button>
I have a div named Groupz and another div named vegasDetailz
Now i want, when i click on the button that is lying in first div , first div should disappear and the second div should take it's place for this purpose i have written the following jquery code
$(document).ready(function() {
$("button").click(function() {
$("#vegasDetailz").replaceWith("#Groupz");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz"></div>
But it is not working for me. Any ideas ?
Note: I am using php laravel 5.3
You are trying to click on $("button") but you have no button, so use $(".getstart"), since it is the id of your input.
Second your .replaceWith("#Groupz") are just trying text into the div, you have to get the element first before you can replace the entire element. Like .replaceWith($("#Groupz"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
</div>
<script>
$(document).ready(function() {
$(".getstart").click(function(){
$("#vegasDetailz").replaceWith($("#Groupz").html("Im an replaced"));
});
});
</script>
You can remove submitBTN getstart from the div vegasDetailz then add new one to the second div Groupz:
$(document).ready(function() {
$(".getstart").click(function(){
$(".getstart").remove();
$("#Groupz").append($("<input class='getstart' name='button' type='submit' value='Get Started'>"));
});
});
#vegasDetailz {
background-color: grey;
width:500px;
height:60px;
}
#Groupz {
width:500px;
background-color:pink;
height:60px;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
</div>
You need to use the name as you selector then use like this input[name=button] if you want to use class as your selector then use .submitBTN.
$(document).ready(function() {
$("#Groupz").hide();
$(".submitBTN").click(function() { // you can also use input[name=button] for '.submitBTN'
$("#vegasDetailz").hide();
$("#Groupz").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
Hai Another div
</div>
If you just want to show & hide the div on the button click, then try this code:
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz" style="display:none;">Hello</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".getstart").click(function(){
$("#vegasDetailz").css('display','none');
$("#Groupz").css('display','block');
});
});
</script>
Just make the div id named Groupz hidden by default, if you don't want to show the second div in default state.
I hope, it may be helpful to you.
I need to know whether the selected element is input field or not.
As we know that input field in HTML is many. like input element, a div with content editable attr, textfield, etc., and i need to know whether my selected element is editable or not. some thing like this.
$(document).click(function(e){
if($(e.target).is('[contenteditable="true"]')){
alert("i am edit able");
}
});
in this it can able to say element is editable only if contenteditable="true" is present. So is there any common attr or property for editable file. if so answer, if not list out all possible editable text/
I think you can use :input selector
$(document).click(function(e) {
if ($(e.target).is('[contenteditable], :input:not(:button)')) {
snippet.log("i am editable: " + e.target.tagName);
console.log(this)
}
});
div {
border: 1px solid lightgrey;
}
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div contenteditable></div>
<input />
<textarea></textarea>
<select></select>
<div>some other content</div>
<button>Button</button>
<input type="button" value="T Button" />
<input type="reset" value="T Reset" />
<input type="submit" value="T Submit" />
Here is my code --
<div id="div1">
this is div 1
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn1 -->
</form>
</div>
<div id="div2">
this is div 2
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn2 -->
</form>
</div>
<div id="showtheaddedform">
//here my form will be push on click to button
</div>
<button type="button" id="btn1">Add the form1</button>
<button type="button" id="btn2">Add the form2</button>
// the click function in my js file are as -
$(document).on("click","#btn1",function(){
$("#showtheaddedform").append($("#div1").html());
});
$(document).on("click","#btn2",function(){
$("#showtheaddedform").append($("#div2").html());
});
now the problem is --
On click #bun1 it's adding the content of #div1 into #showtheaddedform (i.e. the form attribute and all element inside form), like
<div id="showtheaddedform">
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn1 -->
</form>
</div>
but when I'm clicking #btn2 it's adding only the element inside the form , like
<div id="showtheaddedform">
<!-- this form to be add on click #btn2 -->
</div>
[ NOTE : I've not written any kind of remove query ]
..any idea , how it's removing !!!
Both your buttons have the same id. Also there is a syntax mistake in
$(document).on("click","#btn1",function(){
$("#showtheaddedform").append($("#div1").html());
}
add
); to it
DEMO
Actually Form tag is getting append to the div on second button's click. But in the UI it will not be shown as it doesnt have any tags or text in it. Try giving some text or tag in it. It will work
EDIT
Updated Fiddle
Your second button appears to have the wrong ID.
<button type="button" id="btn1">Add the form2</button>
Change to
<button type="button" id="btn2">Add the form2</button>
Try Below code in java script tag and also change your button id to btn1 and btn2
$(document).ready(function(){
//alert("hi");
$("#btn1").click( function()
{
$("#showtheaddedform").empty();
$("#showtheaddedform").append($("#div1").html());
});
$("#btn2").click( function()
{
$("#showtheaddedform").empty();
$("#showtheaddedform").append($("#div2").html());
});
});