My other forms do not get submitted - javascript

So I have created a page to print out a div for every chat in the database and each chat has a form attched to it. When I click on the form, the form gets submitted with the displayed none input and it's value sent to php to do other things. Now the problem is that only the first div's form gets submitted even though the code is the same.The form is right on the div and it is displayed absolute. The two forms are the same but I need both to work and to get to the same php code. Code: HTML
<div class="chaty">
<form method="post" action="index.php" name="chat_lox" id="chat_loc">
<input type="text" name="chat_locy"
value="5e2dbe2be3b5927c588509edb1c46f7d">
</form>
<div class="chatDesc" id="84281145">
<div class="tit">Creator: </div>
<div class="iriss"><i id="close_chatn" onclick="closeChat(84281145)"
class="material-icons">close</i></div>
<form action="mypage.php" method="post">
<div class="authr_name"><button value="John Brown" name="userlink"
class="subm_as_text">Hitsuji</button></div>
</form>
<div class="titd"><h3>Description</h3></div>
<div class="description_chat">jaames</div>
</div>
<span onclick="openChat(84281145)">☰</span>
<div class="chatname"><h3>james</h3></div>
<div class="chatback"></div>
<div class="underlie"><p>Users: 1</p><p> Created: 2017/07/28 07:09:40pm</p>
</div>
</div>
<!-- one that doesn't work -->
<div class="chaty">
<form method="post" action="index.php" name="chat_lox" id="chat_loc">
<input type="text" name="chat_locy"
value="9503e253936e716f18d9c57b4f97d618">
</form>
<div class="chatDesc" id="6179276">
<div class="tit">Creator: </div>
<div class="iriss"><i id="close_chatn" onclick="closeChat(6179276)"
class="material-icons">close</i></div>
<form action="mypage.php" method="post">
<div class="authr_name"><button value="Hitsuji" name="userlink"
class="subm_as_text">Hitsuji</button></div>
</form>
<div class="titd"><h3>Description</h3></div>
<div class="description_chat">The Army of JOhn</div>
</div>
<span onclick="openChat(6179276)">☰</span>
<div class="chatname"><h3>John Army</h3></div>
<div class="chatback"></div>
<div class="underlie"><p>Users: 2</p><p> Created: 2017/07/23 11:31:06am</p>
</div>
</div>
JS
$("#chat_loc").on("click",function() {
$(this).submit();
alert("submitted");
});
PHP
if(isset($_POST['chat_locy']) ? $_POST['chat_locy'] : null){echo "it
worked";}

You can only submit only one form at a time. Try changing the id to a class such that all forms have same class like 'chat_loc'.
For example, change the JavaScript to this:
$(".chat_loc").on("submit", function() {
$(this).submit();
alert("submitted");
});

Related

AJAX form submission not reloading content

I have seen quite a few questions and answers on here but none seem to fix my issue. I have a form which is loaded from a ajax load call into a div class called dynamic-content. Basically if the form submit button is pressed I want it to reload this form in ajax so that it does the php form validation. My issue is that when the submit occurs I call the ajax load to reload via javascript but it is not triggering and instead its just going back to the current index page. My JS is as follows:
$(document).ready(function () {
//Handle AJAX request from sidebar buttons
var trigger = $('.submit-btn'),
container = $('.dynamic-content');
$(".add-customer-form-btn").submit(function() {
// do something...
alert('test');
container.load('customers/customersaddform.php',$("form").serializeArray());
return false;
});
});
my html form in customersaddform.php which is loaded into dynamic-content div in located main index file.
<?php
//FORM VALIDATION CHECKS
?>
<form action="" method="post">
<div class="form-field add-customer-form">
<div class="container-fluid">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<h4>Account Information</h4>
<div class="row">
<div class="col-md-6 label-container">
<div class="input-group input-group-icon">
<input type="text" placeholder="First Name" name="first-name" required/>
<div class="input-icon"><i class="fa fa-user"></i></div>
<div class="input-error-msg"><?php echo $first_name_err;?></div>
</div>
</div>
<div class="row">
<div class=col-md-12 label-container">
<input type="submit" class="add-customer-form-btn submit-btn" value="Submit">
</div>
</div>
</div>
</div>
</form>

How do I replace divs on click using jQuery (comment system)?

I want to replace the ".comment" div with the ".edit-form" div on the click of the "edit-comment" button. Things are working, but not exactly the way I want them to. There is one little problem: when I click on any "edit button" of the primary unordered list (inside list item), and then I click on the "edit button" of the secondary unordered list, the ".comment" div of the primary unordered list hides/disappears, but I don't want that to happen, I want it to show and not to be influenced by the "edit-comment" button effect in the secondary list, if at all you understand me. This is my jQuery code:
$(document).ready(function(){
//$(document).on('click' , '.reply' , function(){
$('.reply').click(function(){
var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
$('.reply-to-comment').not(closestDiv.find('.reply-to-comment')).css("display", "none");
closestDiv.find('.reply-to-comment').slideToggle(100);
});
//$(document).on('click' , '.edit-comment' , function(){
$('.edit-comment').click(function(){
var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
$('.edit-form').not(closestDivtwo.find('.edit-form')).css('display', 'none');
closestDivtwo.find('.edit-form').slideToggle(100);
//$(this).next('.edit-form').slideToggle(100);
});
//$(document).on('click' , '.edit-comment' , function(){
$('.edit-comment').click(function(){
var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
//$('.comment').not(closestDivtwo.find('.comment')).fadeOut();
//closestDivtwo.find('.comment').css('display','block');
closestDivtwo.find('.comment').toggle();
//$('.comment').not(closestDivtwo.find('.comment')).slideToggle(100);
});
});
Just concentrate on the second and third, let's say, paragraph of this snippet. This is my HTML:
<html>
<head>
<title>Test it!</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div>
<ul class="list-of-comments">
<div class="allcomments">
<li class="noofcomments">
<div class="comment-wrap">
<div class="commentator-pic"></div>
<div class="comment">Comments show here</div>
<!--This is the position of the edit form-->
<div class="edit-form">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit comment</textarea>
<input type="submit" name="edit" value="Submit">
</form>
</div>
<br>
<!--These are the main comment buttons or controllers-->
<button class="edit-comment">Edit</button>
<button class="reply">Reply</button>
<button>Delete</button>
<!--This is the position of the reply form-->
<div class="reply-to-comment">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit comment</textarea>
<input type="submit" name="reply" value="Submit">
</form>
</div>
</div>
<!--Here we have the replies to the comment above-->
<ul class="replies">
<li class="clicktoviewreplies">Show/hide replies</li>
<div class="replies-wrap">
<div class="commentator-pic"></div>
<div class="comment">Replies show here</div>
<!--This is the position of the edit form-->
<div class="edit-form">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit reply</textarea>
<input type="submit" name="edit" value="Submit">
</form>
</div>
<br>
<!--These are the main comment buttons or controllers-->
<button class="edit-comment">Edit</button>
<button class="reply">Reply</button>
<button>Delete</button>
<!--This is the position of the reply form-->
<div class="reply-to-comment">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit reply</textarea>
<input type="submit" name="reply" value="Submit">
</form>
</div>
</div>
</ul>
</li>
</div>
</ul>
</div>
</body>
</html>
To make things easier, follow this link: https://jsfiddle.net/hx9mvdjg/8/
This will solve the issue once and for all:
//$(document).on('click' , '.edit-comment' , function(){
$('.edit-comment').click(function(){
var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
if ($(".edit-form").css("display") == "block") {
closestDiv.find('.comment').hide();
$('.comment').not(closestDiv.find('.comment')).css("display","block");
}else{
closestDiv.find('.comment').toggle();
$('.comment').not(closestDiv.find('.comment')).css("display","block");
}
});
Get your whole code and just replace this "paragraph", as you said yourself, with the last one you have in your snippet and paste it in your "jsfiddle" and test it, please. Then, tell me if it's all you need.
Use the replaceWith() in jquery.

Jquery validation plugin not displaying messages when used with <from:form> tag?

Situation : i have the following form in a jSP page that uses jquery validation plugin from https://jqueryvalidation.org/
:
<form id = "form1" class="form-inline" method = "post" enctype="multipart/form-data">
<fieldset>
<legend id="searchHeader"><spring:message code="add.details.header"/></legend>
</fieldset>
<div class="inputDiv" >
<div class="formRow">
<div class="LabelDiv"><label class="inputLabel">Name<span class="asterix">*</span>: </label></div>
<div class="inputElement">
<input name="proName" id="proName" class="required">
</div>
</div>
</div>
<input type="button" id = "forwardButton" value="Next"/>
and the script to validate form is as follows :
<script>
$(function(){
$("#form1").validate({
rules: {
proName: "required"
},
messages: {
proName: "This field is empty"
}
});
});
$("#forwardButton").click(function() {
$("#form1").attr("action", "/target");
if($("#form1").valid()){
$("#form1").submit();
}
});
Problem : The above form carries validation and displays error messages .
But when i try to use <form:from> instead of <form> tag the validation occurs , i even see a red border in my input field
but the custom error messages are not displayed , following is my current form :
<form:from id = "form1" class="form-inline" method = "post" enctype="multipart/form-data" modelAttribute="model">
<fieldset>
<legend id="searchHeader"><spring:message code="add.details.header"/></legend>
</fieldset>
<div class="inputDiv" >
<div class="formRow">
<div class="LabelDiv"><label class="inputLabel">Name<span class="asterix">*</span>: </label></div>
<div class="inputElement">
<form:input name="proName" id="proName" path="dto.name" class="required"></form:input>
</div>
</div>
</div>
<form:input type="button" id = "forwardButton" value="Next"></form:input>
I can't seem to understand why the messages are not bieng displayed , is Jquery validation plugin incompatible with <form:form> tag
Please replace your form tag, there is a typo <form:from to <form:form
<form:from id = "form1" class="form-inline" method = "post" enctype="multipart/form-data" modelAttribute="model">
to
<form:form id = "form1" class="form-inline" method = "post" enctype="multipart/form-data" modelAttribute="model">
Working fiddle - https://jsfiddle.net/3sncybnw/

Javascript form resubmission

I have a simple HTML/Javascript form which upon submission checks the username and pass with Parse(.com) and shows the right page according to the specific user.
When first submitting the form everything runs great. But when submitting and then returning to the form page (using the browser back button) the submission event is not fired anymore (not even the console.log()). not by pressing the submit button and not by pressing Enter.
Here are some code snippets:
Head:
$(document).ready(function() {
$("#form_login").submit(function(e) {
console.log("In form submit login")
init();
var name = $("#inp_user").val();
var pass = $("#inp_pass").val();
console.log("Name: " + name + " User: " + pass)
login(name, pass);
})
})
Body:
<body>
<div data-role="page" id="page_login" data-theme="a">
<div data-role="header">
<h1>Login Screen</h1>
</div>
<div data-role="content">
<div class="div-widget">
<h3>Login details</h3>
<form id="form_login">
<div data-role="fieldcontain">
<label for="inp_user">User name:</label> <input type="email"
id="inp_user">
</div>
<div data-role="fieldcontain">
<label for="inp_pass">Password</label> <input type="password"
id="inp_pass">
</div>
<input type="submit" id="btn_login" value="Login"></input>
</form>
</div>
<div class="div-widget">
<span id="out_res"></span>
</div>
</div>
</div>
//More div data-role="page" here....
</body>
According to given information I did a new example on jsFiddle. So you forgot mention that you are using jquery-mobile. Furthermore using a <form> does cause behaviour described!
<body>
<div data-role="page" id="page_login" data-theme="a">
<div data-role="header">
<h1>Login Screen</h1>
</div>
<div data-role="content">
<div class="div-widget">
<h3>Login details</h3>
<!-- removed form - as you do not really need it-->
<!-- you may keep it, but you MAY NOT submit the form! -->
<div data-role="fieldcontain">
<label for="inp_user">User name:</label>
<input type="email"
id="inp_user">
</div>
<div data-role="fieldcontain">
<label for="inp_pass">Password</label>
<input type="password"
id="inp_pass">
</div>
<!-- <input type="submit" id="btn_login" value="Login"></input>-->
<!-- instead, make use of button -->
<a id="btn_login" href="#page_2" data-role="button">Login</a>
</div>
<div class="div-widget">
<span id="out_res"></span>
</div>
</div>
</div>
<div data-role="page" id="page_2" data-theme="a">Page 2</div>
<!-- More div data-role="page" here.... -->
</body>
Instead of submitting a form - which causes the problem when hitting "back" within the browser, I decided to use a href - data-role="button". Bound a click handler and prevent-Default if login fails (commented out right now)
$(document).ready(function() {
$("#btn_login").click(function(e) {
console.log("clicked href")
//init(); // commented out as not provided within your question
var name = $("#inp_user").val();
var pass = $("#inp_pass").val();
console.log("Name: " + name + " User: " + pass)
//login(name, pass); // commented out as not provided within your question
/*if (LOGIN_FAILED)
{
console.log("login failed");
e.preventDefault();
}*/
})
})

Move div element from one parent div to another

So let's assume that I have a set of nested divs:
<div id="likelyToBeCalled">
<div id="likelyOddHeader" class="row">
<div id="likelyOddA" class="left" name="test1">Test1</div>
<div id="LikelyOddB" class="middle"><img src="image002.png"/></div>
<div id="timeZone" class="right">West</div>
</div>
and further down the page:
<div id="unlikelyToBeCalled">
<div id="likelyOddHeader" class="row">
<div id="likelyOddA" class="left">Test2</div>
<div id="LikelyOddB" class="middle"><img src="image002.png"/></div>
<div id="timeZone" class="right">West</div>
</div>
How would I move Test1 to "unlikelyToBeCalled". I've been trying this with a form / submit button just for kicks, here's the code for that:
<script type="text/javascript">
function doSubmit() {
document.getElementById('unlikelyToBeCalled').appendChild(
document.getElementsByTagName('Test1')
);
}
</script>
<br /><br /><br />
<form method="POST" action="file:///C:/wamp/www/index.html" id="submitform" name="submitform">
<input type="submit" name="Submit" value="Move divs" onClick="doSubmit()" />
</form>
Or something to that effect. Any help would rock
Use .appendTo()
$('#likelyOddA').appendTo('#unlikelyToBeCalled')
If I understand what you want:
$('div[name=test1]').appendTo('#unlikelyToBeCalled');
getElementsByTagName('Test1') will not get element with name="Test1", it is supposed to, for example, get all divs (with code getElementsByTagName('div') of course). Next, you have used #likelyOddHeader and other ids twice, but id must be unique.

Categories

Resources