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.
Related
I have a simple code to make requisition by ajax.
<script type="text/javascript" src="{{ url_for('static', filename='jquery-2.2.4.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function (e) {
var url = "{{ url_for('ajaxPage') }}";
$.ajax({
type: "POST",
url: url,
data: $('form').serialize(),
dataType:'json',
success: function (data) {
var text= "Anything here!";
$('div.panel-body').html(text); //Not Working
$('div.panel-body').text(text); //Not Working
$('div.panel-body').append(text); //Not Working
alert(text); //Working
console.log(text); //Working
}
});
e.preventDefault();
});
});
</script>
Here body layout:
<body>
<div class="panel-body"> // Waiting content </div>
</body>
Ajax is working perfectly, I can view my array using console.log, alert, but I can not use HTML(), TEXT() and APPEND(). Where is my mistake? I already change JS file and I have other page with the same code and it works fine!
Update
My Network page
Updating body page
<div class="input-group">
<form method="POST" name='form'>
<input type="text" name="inputxt" class="form-control" size="20">
<button type="submit">Search</button>
</form>
</div>
<div class="panel-body">
</div>
I recreated this page and the problem was a css inside DIV.
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.
I am using Jquery mobile frame work and also new in jquery mobile. I want to append one html page by Ajax. First i am taking one button(check) in form but whenever click on this button then page appended but layout will be damage. I don't know how to append HTML page by ajax in jquery mobile.
SCREEN SHOT FOR HINTS:
This page is before click on check button:
After click on Check button:
HTML CODE:
<form id="checkPinCode1" method="get" data-uri="<c:url value="/pincode-available/${product.productId}/${product.productOfCityId}"/>" data-ajax="false">
<div style="margin-bottom: 20px; width: 80%;">
<input name="pinCode" type="number" class="form-control pinCode" placeholder=" Enter pincode here..">
</div>
<div style="margin-bottom: 20px; width:40%;">
<button class="btn btn-primary" type="submit" value="Check">Check</button>
</div>
</form>
<div id="showPincodeAvailablity">
<%--APPEND PAGE HERE--%>
</div>
AJAX CODE:
$.ajax({
type: 'get',
url: url,
data: {pincode: pincode},
success: function (response) {
if (response.success === "true") {
$("#showPincodeAvailablity").html(response.html);
}
},
error: function (response) {
},
complete: function (response) {
}
});
JAVA CODE:
#RequestMapping(value = "/pincode-available/{productId}/{productOfCityId}", method = {RequestMethod.GET})
#ResponseBody
<%--- CODE LINE 1--%>
<%--- CODE LINE 2--%>
<%--- CODE LINE .....--%>
resp.put("success", "true");
resp.put("html", html);
}
First i am type pin code and click on check button then check button control go to the controller and comes into the ajax then page append by id = showPincodeAvailablity. and page appended but page layout is not comes proper way. Give me some idea for achieving this solution.
Try changing this line
$("#showPincodeAvailablity").html(response.html);
to this
$("#showPincodeAvailablity").html(response.html).enhanceWithin();
I've got a form with a submit button on a form that opens up a nested php page within a div on my page.
All I want to do is hide the submit button, and instead replace this with clicking one of the divs and thus running a script called showBiog(key), which then passes key to the form for submitting.... help... ;-)
<script type="text/javascript">
$(function() {
// Handler for .ready() called.
$('#SubmitForm').submit(function( event ) {
$.ajax({
url: 'test2.php',
type: 'POST',
dataType: 'html',
data: $('#SubmitForm').serialize(),
success: function(content)
{
$("#DisplayDiv").html(content);
}
});
event.preventDefault();
});
});
</script>
HTML is:
<form id="SubmitForm" method="post">
<div id="SubmitDiv" style="background-color:black;">
<button type="submit" class="btnSubmit">Submit</button>
</div>
</form>
<div class="test" onClick="showBiog(1)"><p>1</p></div>
<div class="test" onClick="showBiog(2)"><p>2</p></div>
<div class="test" onClick="showBiog(3)"><p>3</p></div>
<div class="test" onClick="showBiog(4)"><p>4</p></div>
Just remove the button element, and do something like:
$('#myspecificdiv').on('click', function() {
$('#SubmitForm').submit();
}
You can hide the submit button and perform its click action in showBiog(key); just like
function showBiog(key){
//Your code
$('#submit_btn_id').click();
}
please put the javascript on document.ready
<script type="text/javascript">
$(document).ready(function() {
$('.class name').on('click',function() {
$('#SubmitForm').submit();
});
});
</script>
I'm trying for hours now to debug my jQuery error function (success too).
I don't understand how can I display an error message only below the button I click.
To help you to understand my problem, I made a JSFiddle
here is the HTLM part :
<div class="leblock">
<strong>Title</strong> some text<br />
<form id="panier_1" method="post" action="">
<input type="submit" value="0130280001" />
<div id="txtHint_1"><b>data will spawn below</b></div>
<div> <span id="error_1" style="display:none; color:#F00">DIV 1 NOT OK</span>
<span id="success_1" style="display:none; color:#0C0">OK</span></div>
</form>
</div>
<br /><br /><br />
<div class="leblock">
<strong>Title</strong> some text<br />
<form id="panier_2" method="post" action="">
<input type="submit" value="0130280002" />
<div id="txtHint_2"><b>data will spawn below</b></div>
<div> <span id="error_2" style="display:none; color:#F00">DIV 2 NOT OK</span>
<span id="success_2" style="display:none; color:#0C0">OK</span></div>
</form>
</div>
and jQuery :
$(document).ready(function(){
$('[id^="panier_"]').on('submit',function(e) {
$.ajax({
url:'panier.php',
data:$(this).serialize(),
type:'POST',
success:function(data){
$('[id^="success_"]').show().fadeOut(2000);
},
error:function(data){
$("span:first-child").show().fadeOut(2000); //===Show Error Message====
}
});
e.preventDefault();
});
});
Any advice will be greatly aprreciated
One of the problems you have is that you don't have a reference to the button that you pressed from the form submit handler. One solution is to attach a click handler to the submit buttons to keep track of the last submit button pressed, and use that as a reference point to find the appropriate error message location.
I've updated your fiddle here: http://jsfiddle.net/P5PRP/1/
$(document).ready(function(){
var submitButtonPressed = null;
$('input[type=submit]').click(function() {
submitButtonPressed = this;
});
$('[id^="panier_"]').on('submit',function(e) {
console.log(e);
var $this = $(this);
$.ajax({
url:'panier.php',
data:$this.serialize(),
type:'POST',
success:function(data){
if (submitButtonPressed) {
$(submitButtonPressed).closest('form').find('[id^="success_"]').show().fadeOut(2000);
}
},
error:function(data){
if (submitButtonPressed) {
$(submitButtonPressed).closest('form').find("span:first-child").show().fadeOut(2000); //===Show Error Message====
}
}
});
e.preventDefault();
});
});
I would add a class to your error span of "error" and maybe move the style to the class, like this:
<style>
.error {display:none; color:#F00}
</style>
<span id="error_1" class="error">DIV 1 NOT OK</span>
Then you can access that from your function like this:
error:function(data){
$(this).siblings(".error").show().fadeOut(2000); //===Show Error Message====
}
It can be solved by hiding the div with id "txtHint_" or you may even change the inner HTML of this div with id "txtHint_".
I hope this helps.