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 } ?>
Related
I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?
Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
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
I would like to add a functionality in my form, in which a user can add as many entries before hitting submit button, like a 'add to cart' functionality, show the added entries in same page, in a separate div with submit button then save those multiple entry in database using that submit button(in a separate div that shows added entry).
So far my form allows only entries on per submit bases, meaning is if the user wants to add another entry, he/she has to go back to the form and add and click to submit again.
<form method="POST" name="myForm" action="saveto.php">
<label> Speed Rating:</label>
<select name="speed_rating" required class="form-control" id="speed_rating" ></select>
<div class="form-group col-sm-8">
<label> Description:</label>
<select name="description" required class="form-control" id="description" >
</select>
</div>
<div class="form-group col-sm-4">
<label> Load Index:</label>
<select name="load_index" required class="form-control" id="load_index" >
</select>
</div>
<div class="form-group col-sm-6">
<label> Vendor:</label>
<select name="vendor" required class="form-control" id="vendor" >
</select>
<div class="note"> Recommended Vendor : <span id="recomvend"> </span> </div>
</div>
<div class="form-group col-sm-6">
<label> Quantity:</label>
<input type="text" required name="qty" class="form-control" id="qty"></div>
<div style="clear:both"> </div>
<input type="submit" name="submit" class="btn btn-primary smp" value="Submit">
<button id="clear" type="button" class="btn btn-primary smp smp2" > Reset </button>
</div>
<input type="submit" value="submit" name="submit">
</form>
How would you achieved this? My saveto.php is just a normal script that will process the submitted data to database, one entry in a per submit bases.
I created this jsfiddle https://jsfiddle.net/jy6vh4rp/31/
If that's what you are looking for then you should add this to your front end:
<form action="validate.php" method="post">
<div style="padding: 30px 0; text-align: center;">
<button type="button" onclick="createDOM()">Add</button>
<input type="submit" value="submit" name="submit" />
</div>
<div class="productsContainer"></div>
</form>
<script>
$(document).ready(function() {
id = 0;
createDOM = function() {
$(".productsContainer").append('<input type="text" id="' + id + '" name="products[]" value="' + id + '" />');
id++;
};
});
</script>
And this to your validation backend :
foreach($_POST['products'] as $prodInput){
$product = filter_var($prodInput,FILTER_SANITIZE_NUMBER_INT);
if( is_numeric($product) ){
echo $product;
}
}
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>
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!