Multiple forms on one php page not working - javascript

So I want to add one more form on the page to insert some data in a database, but it is not working at all. Plus, it broke my first form which worked fine before.
this is the form I want to add:
<div class="overlay">
<div style="margin-top:25%;"> </div>
<form id="favForm" class="favFormClass" action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="id_post_fav" value="<?php echo $row['id_post'];?>" />
<button type="submit" name="fav" style="background:transparent; border:none; cursor:pointer;"> <i class="fa fa-heart" style="font-size:60px;color:red;" aria-hidden="true"></i></button>
<form>
</div>
and this is the form from the chat area, that worked fine:
<div class="chat-box"></div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="<?php echo $user_id; ?>" hidden>
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fa fa-paper-plane-o"></i></button>
</form>
I tried applying different id for each one, but still not working. Also, I can see that the second form has action="#" (the second form is not written by me, that is why it doesn't have button type="submit" or things like that) and if I put action="something1" in the first form, it also applies to the second one... Please help

Related

How can i display the video to be uploaded in the taxtarea where the user enter some text from

I'm trying to create a text area where the user is expected to enter some text and after upload videos.here i need the videos selected to be displayed with the text input.i will so gland if some help me. Thanks
//here is my form
<form role="form" method="post" action="" enctype="multipart/form-data">
<!--<i class="icon-facetime-video"></i>-->
<!-- <span class="btn btn-file btn-success" input type="file" name="file"><span class="fileupload-new">Select image</span>-->
<!-- <div class="fileupload fileupload-new" data-provides="fileupload">-->
<textarea class="fileupload-preview thumbnail" name="post_content" class="form-control" rows="3" style="border-left:thin; border-left-color:#fff; border-right:thin; border-right-color:#fff" placeholder="<?php echo " What is really on your mind,", $_SESSION['first_name']; ?>?"></textarea>
</div>
<input class="fileupload-new" style="margin-left:75%; padding-top:5px;" type="file" value="Uplaod Videos" name="upd"/>
<span class="btn btn-file btn-success" input type="file" name="file"><span class="fileupload-new">Select image</span><input type="file" name="profile_image"/></span>
//above is my textarea
//and this my submit button
I have tried but nothing is appearing in the text area.
<input type="submit" name="post" value="POST" style="color:blue; margin-right:3%; float:right;"/>
</form>

When I try to send two files in a html form, request is always pending

I am trying to send two files/images in a form but request is stalled. It is always pending. In my local VM Box it works but on server the problem that i mentioned is occurred. I checked out php version, jQuery version and they are all same with my local. What is the problem?
EDIT 1: Here is form:
<form method="POST" id="package-create-form" action="/admin/packages/pack">
<div class="form-group">
<label for="image" class="bold">IMAGE</label>
<input type="file" class="form-control" id="image" name="image">
</div>
<div class="form-group">
<label for="map-image" class="bold">MAP IMAGE</label>
<input type="file" class="form-control" id="map-image" name="map_image">
</div>
<div class="text-right">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<button type="button" class="btn btn-danger" id="cancel-button"
data-href="/admin/packages/pack"><i class="fa fa-arrow-left"></i>Back</button>
<button type="submit" id="store-btn2"
class="btn btn-primary">Forward<i class="fa fa-arrow-right"></i>
</button>
</div>
</form>
First of all you have to write correct enctype for form.
This is enctype="multipart/form-data" for images. It's required
And second one, if you'd like to upload more than one image, you have to use tag multiple in your input type="file".
To sum up:
<form method="POST" id="package-create-form" action="/admin/packages/pack" enctype="multipart/form-data">
and
<input type="file" class="form-control" id="map-image" name="map_image" multiple>
More about enctype

Multiple forms with one submit button with edit and delete button

How to submit and "show"(in the same page) multiple form with one submit button with edit and delete button with php javascript?
This is my mockup
This is my code without php:
<div class="row">
<div class="col-md-6">
<div class="panel-body">
<form method="post">
<div class="form-group row">
<div class="col-md-3">
<label>Content number</label>
<input class="form-control" name="BranchName" type="text" />
</div>
<div class="col-md-4">
<label>Topic</label>
<input class="form-control" name="Tel" type="text">
</div>
</div>
<div class="form-group">
<label>Content</label>
<textarea class="form-control" name="Address" rows="3"></textarea>
</div>
<p id="submit">
<button type="submit" class="btn btn-info">Submit</button>
</p>
</form>
</div>
</div>
</div>
Please help. This is the final that what i expect. I want it to clear text area after click submit to be ready for the new form. But now i don't know how to show all form that submitted at the bottom of the page in list of item with edit and delete function.
As i'm assuming your getting your information via PHP, what you will need to do in the edit/ delete sections is add some form item id for the edit/delete functions something like. Alternatively you can do the same thing in JavaScript, and link the AJAX request to a .php file with the functions for handling the edit and delete functions.
<?php foreach($key as $data) { ?>
<form action="edit.php" method="post">
<input name="<?php echo $data[$key].formItemID ?>" type="submit" value="edit" />
</form>
<form action="delete.php" method="post">
<input name="<?php echo $data[$key].formItemID ?>" type="submit" value="delete" />
</form>
<?php } ?>

Populate form with data from another form

I have a page with a small tour, within the tour points are inputs. Also on this page is another form, these forms have similar inputs including first, last name, etc...
If the user inputs their first name into form 1, how can I populate the first name field of form 2?
This is form 1:
<form role="form" id="inviteform3" class="form-inline" action="name.php" method="POST">
<div class="form-group">
<input type="text" class="form-control input-sm" name="name" placeholder="First Name"
id="hello" autocomplete="off" style="margin-top:10px">
</div>
<center>
<span id="start">Let's get started, <span id="result"></span></span>
<button class="btn btn-brand btn-sm next-screen animated bounceInUp"
id="go" style="margin-top:5px; display:none" href="#services" data-animation-delay=".5s">
Let's Go!</button></center>
<button class="btn btn-block btn-brand btn-xs invitebtn3" id="casi" type="submit"
style="margin-top:5px"><i class="fa fa-thumbs-o-up"></i> Submit</button>
</form>
This is form 2:
<form role="form" id="inviteform" class="form-inline"
action="http://omnihustle.net/demo/invitations/invite_request" type="POST"><div
class="form-group">
<input type="text" class="form-control input-sm" id="InputFirstName" placeholder="First
Name">
</div>
<div class="form-group">
<input type="text" class="form-control input-sm" id="InputLastName" placeholder="Last
Name">
</div>
<div class="form-group">
<input type="email" class="form-control input-sm" id="InputEmail" placeholder="Email">
</div>
<button class="btn btn-brand btn-sm invitebtn" type="submit" data-toggle="modal" data-
target=".bs-example-modal-sm"><i class="fa fa-check fa-fw"></i> Invite Me</button></form>
Here is my php file which the form is sent to:
<html>
<body>
<?php session_start(); ?>
<?php
if (isset($_POST['name']) && !empty($_POST['name'])) {
$_SESSION['name'] = $_POST['name'];
}
?>
<?php echo $_POST["name"]; ?>
</body>
</html>
Jquery has not worked since I am unable to enter html into the "value" field of the form, so what is the alternative?
Here is what ive tried;
<script>
$(document).on("ready", function(){
//Form action
$("#inviteform3").on("submit", function(event){
// Stop submit event
event.preventDefault();
$.ajax({
type:'POST',
url: 'name.php',
data:$('#inviteform3').serialize(),
success: function(response)
{
$('#inviteform3').find('#result').html(response);
$('.coupontooltip5').find('#result2').html(response);
$('#announcement').find('#result3').html(response);
$('#announcement2').find('#result4').html(response);
$('#progressbutton').find('#result5').html(response);
$('#inviteform').find('#result6').html(response);
}});
});
});
</script>
I have tried inputting "span id="result6" into the "value" tag of the input and the form does not allow the function, just shows the html as the default value of the input..
You can add a 'keyup' handler which copy the content to the second field. Add the following lines into the 'ready' handler.
$('#hello').on('keyup', function() {
$('#InputFirstName').val($(this).val());
});
If you add a 'change' handler instead of this 'keyup' handler, the handler is called only after the the field loses the focus.
By the way, name.php does not work. session_start() must be called before any output is made. Hence:
<?php session_start(); ?>
<html>
<body>

php script is not able to verify data using anchor tag

I have a login form and i know how to submit data for verifying from database using submit button but i want to submit my data using anchor tag and it must be verified using php, what i did is as follows and it's not working :
index.php
<form class="sign-form" action="login_process.php" method="post" id="lg" name="form">
<fieldset>
<div class="row">
<span class="text">
<input type="email" name="email"/>
</span>
<span class="text">
<input type="password" name="pwd"/>
</span>
<input type="submit" value="Go" class="submit" name="submit" />
</div>
<div class="row">
<label for="check-1">Remember me</label>
<input type="checkbox" class="check" id="check-1" />
Forgot your password?
<?php
if(isset($_GET['loginFailed']) && !empty($_GET['loginFailed'])) {
$msg=$_GET['loginFailed'];
echo $msg;
}
?>
</div>
</fieldset>
<div class="action_btns">
<div class="one_half">
<i class="fa fa-angle-double-left"></i> Back
</div>
<div class="one_half last">
login
</div>
</div>
</form>
login_process.php
<?php
include("connection.php");
if(isset($_POST['submit'])) {
$email=$_POST['email'];
$pwd=$_POST['pwd'];
$password=md5($pwd);
$sql="SELECT * FROM `registration` where Email='$email' AND Password='$password'";
$van=mysqli_query($var,$sql);
$count=mysqli_num_rows($van);
if ($count==1) {
echo"hello";
session_start();
$_SESSION['email'] = $email;
header("location: login_success.php");
} else {
header("location:index.php?loginFailed=wrong password or email");
}
mysqli_close($var);
}
?>
The problem is the name of the controls.
Having a control named submit in your form is overriding form.submit();
The error in the browser console is that .submit() is not a function.
So please, just change the name of the submit button with something else and it is working good.
<form class="sign-form" action="login_process.php" method="post" id="lg" name="form">
<fieldset>
<div class="row">
<span class="text">
<input type="email" name="email"/>
</span>
<span class="text">
<input type="password" name="pwd"/>
</span>
<input type="submit" value="Go" name="submit" class="submit" id="btnSubmit" />
</div>
<div class="row">
<label for="check-1">Remember me</label>
<input type="checkbox" class="check" id="check-1" />
Forgot your password?
<?php
if(isset($_GET['loginFailed']) && !empty($_GET['loginFailed'])) {
$msg=$_GET['loginFailed'];
echo $msg;
}
?>
</div>
</fieldset>
<div class="action_btns">
<div class="one_half">
<i class="fa fa-angle-double-left"></i> Back
</div>
<div class="one_half last">
Register
</div>
</div>
</form>
I understand that you want to use an anchor to submit the form instead of a button. Several solutions exists for that, but let me say to you that using an anchor to submit a form requires the use of JavaScript to hook up the event. It's not safe in that if a user has JavaScript disabled, you won't be able to submit the form. It's better if you make a submit button looks like an anchor, like following:
<input type="submit" class="submitAnchor" value="Submit">
With this minimal style declaration:
.submitAnchor {
background-color: transparent;
border: none;
text-decoration: underline;
color: blue;
cursor: pointer;
}
Now, if you do really insist on using an anchor, you can e.g:
1.Event forwarding, activate the button submit event click when the anchor event click is activated:
<form name="form_lg" action="login_process.php" method="post" class="sign-form">
...
<input type="submit" name="submit" value="Go" class="submit">
<a href="#" onclick="form_lg['submit'].click()" class="btn btn_red">
Register
</a>
2.In case you don't want to forward events, you can e.g add a hidden input to store actions, like submit, back, etc. Then, you can catch the action value in the login_process.php file:
<form name="form_lg" action="login_process.php" method="post" class="sign-form">
...
<input type="hidden" name="action" value="" />
<a href="javascript:form_lg.submit()" onclick="form_lg['action'].value='submit'"
class="btn btn_red">Register</a>
In this case, you should change this line in login_process.php file. Instead of:
if(isset($_POST['submit'])){
Do this:
if($_POST['action']=='submit') {
Hope it's helpful!

Categories