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.
Related
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 need a little help about how to do it..
I have done lot of search but haven't find it.. So please if someone can help me out.
I have this little code here:-
<div id="whats-new-content">
<div class="newtextbox">
<textarea class="mytextbox" id="myuniquetextbox" cols="50" rows="10" style="height: 50px;"></textarea>
</div>
<div id="whats-new-options" style="display: none;">
<input type="submit" name="aw-whats-new-submit" id="aw-whats-new-submit" value="Submit">
</div>
</div>
As you can see i added style="display: none;" in the div where is situated the submit button.
I don't have lot of knowledge in jQuery or javascript but i need a simple javascript code that will change the "display:none" to "display:block" when someone click on the textbox..
Please i need your help, thank you very much...
Another way to do this is:
$(function () {
$('#myuniquetextbox').click(function(e) {
$('#whats-new-options').css('display', 'block');
});
});
Try this
$("#myuniquetextbox").on("focus",function(){
$("#whats-new-options").show();
})
Try below code
$("#mytextbox").focus(function() {
// this is when textarea is focused and button should show
$("#whats-new-options").show();
});
$("#mytextbox").blur(function() {
// this is when textarea is not focused and button should hide
$("#whats-new-options").hide();
});
Try using bellow
<script>
$("#myuniquetextbox").click(function(){
$("#aw-whats-new-submit").slideToggle();
});
</script>
$("#aw-whats-new-submit").hide();
$("#myuniquetextbox").click(function() {
$("#aw-whats-new-submit").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="whats-new-content">
<div class="newtextbox">
<textarea class="mytextbox" id="myuniquetextbox" cols="50" rows="10" style="height: 50px;"></textarea>
</div>
<div id="whats-new-options" >
<input type="submit" name="aw-whats-new-submit" id="aw-whats-new-submit" value="Submit">
</div>
</div>
you can also do this
$(function () {
$('#myuniquetextbox').on('click',function(e) {
$('#whats-new-options').css('display', 'block');
});
});
Check your code here
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 have a function which shows a div when the user types something but it interferes with a page where I have an input. I would like to disable the script when the part of the page with the div that holds the inputs is visible so that when the user is typing in the input the .editPro doesn't show().
HTML
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;">
<input type='text' />
</div>
<div class="editPro" style="width:100%;height:100%;position: fixed;display:none;background:red;"></div>
<div id='edit'>edit</div>
JAVASCRIPT
$('#edit').click(function (event) {
$(".green").show("slow");
});
$(document).keypress(function (event) {
$(".editPro").show("slow");
});
here is a Fiddle to illustrate the problem
Just check the target node. If it is not an input, then execute your script
$(document).keypress(function (event) {
if(event.target.nodeName !== "INPUT"){
$(".editPro").show("slow");
}
});
Fiddle
I have done some changes in your code hope this helps
try this FIDDLE
http://jsfiddle.net/venkat_asman/Un8yv/2/
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;z-index:100;">
</div>
<div class="editPro" style="width:100%;height:100%;position:fixed;display:none;background:red;z-index:100;"></div>
<div id='edit'>edit</div>
<input style="z-index:1000;display:none;position:fixed;" type='text' />
and JS is
$('#edit').click(function(event){
$(".green").show("slow");
$("input").show();
$('#edit').hide();
});
$(document).keypress(function(event){
$(".editPro").show("slow");
});
I'm not sure if I understand the question correctly, but maybe this is what you are looking for (it prevents the red div from appearing when you type inside a <input/>):
$('input').keypress(function (event) {
event.stopPropagation();
});
http://jsfiddle.net/Un8yv/1/
I am just learning Jquery, I wanted to know if anyone can tell me what is wrong with my script. When a user hits submit on the form, I want 2 two div tags to open and the one containing the form to close.
Thanks!
This is the script
<script>
$('#form_container').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
</script>
These are the div and form
<div id="mydivhide1" style="visibility:hidden">1111</div>
<div id="mydivhide2" style="visibility:hidden">2222</div>
<div id="form_container">
<form id="form_710370" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
Submit your form not div like,
$('#form_710370').submit(function(){
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
And hide your div's by using display:none not by visibility:hidden like,
<div id="mydivhide1" style="display:none">1111</div>
<div id="mydivhide2" style="display:none">2222</div>
Updated if your script is written before your DOM elements then use $(function(){...}) like,
$(function(){
$('#form_710370').submit(function(e){
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
Here's a fiddle: http://jsfiddle.net/cdJU9/1/
I've added CSS to hide the top divs, I think your inline style of visibility hidden was overriding the JS.
CSS
#mydivhide1, #mydivhide2{ display: none; }
HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
The fiddle throws an error for some reason but you get the idea ?
You can do like this, please focus your syntax with semicolon at the end.
<script>
$('#saveForm').click(function(){
$(this).parent().hide();
$('#mydivhide1, #mydivhide2').show();
});
</script>
it should be
<script>
$('#form_710370').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
</script>
it should be:
$('#form_710370').submit(function()
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
})
You've got a typo in there:
<form id="form_710370" method="post" convert.php">
should be
<form id="form_710370" method="post" action="convert.php">
And for the JS:
$('#form_710370').submit(function() {
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
})
edit: http://jsfiddle.net/GZEmw/