i want to combine 2 forms into one submit button on separate parts of the website. its pretty much a check box deletion mysql row script. here is a picture.
What I am trying to do is have DELETE SELECTED, delete the selected checkedboxes rows that are on the left side.
I am unable to get that to work.
My form names are delete1 for the button and delete2 for the whole table as a form.
I tried to combine both forms into one by using javascript.
function functionCaller()
{
document.getElementById('delete1').submit();
document.getElementById('delete2').submit();
}
It doesnt seem to work.
Does anyone have any ideas, I pretty much want to use a submit button on another part of the page that corresponds to being the submit button for the check boxes, while not being part of the same form. I hope it makes sense.
UPDATE. ADDED CODE.
The form for the DELETE SELECTED button seperated from the table
<form action="" method="post" name="delete">
<div style=" float: right;">
<input type="submit" value="Delete Selected" id="delete" onclick="functionCaller()" name="delete">
</div>
</form>
Here is the form that contains the table
<form action="" method="post" name="delete">
<div class="table">
<div class="table-head">
<div data-label="select" class="column"><input type="checkbox" id="selectall"></div>
<div data-label="id" class="column">ID</div>
<div data-label="avatar" class="column">Avatar</div>
<div data-label="username" class="column">Username</div>
<div data-label="email" class="column">Email</div>
<div data-label="active" class="column">Active</div>
<div data-label="level" class="column">Level</div>
<div data-label="modify" class="column">Modify</div>
</div>
<div class="row">
<div data-label="select" class="column"><input type="checkbox" class="selectedId" name="checkbox[]" id="checkbox[]" value="94" onclick="resetSelectAll();"></div>
<div data-label="id" class="column">94</div>
<div data-label="avatar" class="column"><img alt="" src="uploads/540d248343caa.JPG"></div>
<div data-label="username" class="column">admin</div>
<div data-label="email" class="column">brian.cherdak#gmail.com</div>
<div data-label="active" class="column">Yes</div>
<div data-label="level" class="column">Admin</div>
<div data-label="modify" class="column"><img alt="" src="images/tool.png"> <a onclick="delete_user(94);" href="#"><img alt="" src="images/delete.png"></a></div>
</div>
<div class="row">
<div data-label="select" class="column"><input type="checkbox" class="selectedId" name="checkbox[]" id="checkbox[]" value="287" onclick="resetSelectAll();"></div>
<div data-label="id" class="column">287</div>
<div data-label="avatar" class="column"><img alt="" src="uploads/54052a0accd62.gif"></div>
<div data-label="username" class="column">Quyn</div>
<div data-label="email" class="column">brian.cherdak#gmail.com</div>
<div data-label="active" class="column">Yes</div>
<div data-label="level" class="column">Regular</div>
<div data-label="modify" class="column"><img alt="" src="images/tool.png"> <a onclick="delete_user(287);" href="#"><img alt="" src="images/delete.png"></a></div>
</div>
</div>
</form>
They are both on seperate sides of the page, but I want the delete button to pretty much be the delete button for the table form.
This is what my delete php code looks like
<?php
if(isset($_POST['delete']))
{
for($i=0;$i<count($_POST['checkbox']);$i++){
$del_id = $_POST['checkbox'][$i];
$sql_del = "DELETE FROM users WHERE id='$del_id'";
$result_del = mysql_query($sql_del);
}
}
?>
Updated answer after comment:
<form action="" method="post" name="delete1" id='form1' method="POST" onsubmit="merge(); return true;">
<div style=" float: right;">
<input type="submit">
</div>
</form>
<form action="" method="post" name="delete2" id='form2'>
// your checkboxes...
</form>
<script type="text/javascript">
function merge() {
$result = $("#form1");
$("#form2 input, #form2 select").each(function() {
if($(this).is(':checked')){
$result.append("<input type='hidden' name='"+$(this).attr('name')+"' value='"+$(this).val()+"' />");
}
});
}
</script>
That submit function is no good. Only the first submission is happening.
I would set a hidden input value in the delete form. I haven't tested this, but I think everyone will get the idea.
Here's some jQuery:
functionCaller = function(e){
e.preventDefault(); // Just to be sure the submit doesn't go without us
var a = []
$(':checkbox').each(function(){
if($(this).prop('checked') === true) a.push($(this).val());
});
$('#hidden_input').val(a.toString()); // Explode by , (comma) in php
document.getElementById('delete1').submit(); // Do form submit now
}
Some PHP:
if(isset($_POST['delete'])){
$a = explode(','$_POST['hidden_input']);
for($i=0;$i<count($a);$i++){
$del_id = $a[$i];
$sql_del = "DELETE FROM users WHERE id='$del_id'";
$result_del = mysql_query($sql_del);
}
}
HTML!:
<form action="" method="post" name="delete">
<div style=" float: right;">
<input type="submit" value="Delete Selected" id="delete" onclick="functionCaller()" name="delete">
<input type="hidden" value="" id="hidden_input" name="hidden_input">
</div>
</form>
Related
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 } ?>
I am creating search form, when user click search icon, i need to show textbox, once i entered content, and again clicked same search icon, it needs to display search results. Below is the code i used.
HTML & Javascript
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;" autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input();" >
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(){
if(jQuery("#search").is(':visible'))
{
if(jQuery("#search").val()!=''){ jQuery("#search_mini_form").submit();
}else{
jQuery("#search").animate({ width: 'hide' });
}
}
else
{
jQuery("#search").animate({ width: 'show' });
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
Right now issue is, when i clicked search icon, it showing search page instead of textbox, any assistance would be appreciated.
Change the inline code from:
<button type="submit" title="Search" id="but" onclick="tog_input();">Submit</button>
To:
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit</button>
Avoid this line:
jQuery("#search_mini_form").submit();
Prevent the form submission only when needed.
So:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;"
autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(obj, e) {
if (jQuery("#search").is(':visible')) {
if (jQuery("#search").val() == '') {
jQuery("#search").animate({width: 'hide'});
e.preventDefault();
}
}
else {
e.preventDefault();
jQuery("#search").animate({width: 'show'});
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
</div>
I'd suggest that it is because your button type is submit. If you change it to button type = "button" then it should work, although you may need another button to submit your form.
You need to prevent default behaviour of submit button else it will end up in action page. To achieve it you need to do as -
function tog_input(e){
e.preventDefault();// prevents default action
... other code
}
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!
I have a login form that I would like to send custom POST values to. The URL looks like this: site.com/administrator/index.php
There is a login form on that page that looks like this:
function setFocus() {
document.login.username.select();
document.login.username.focus();
}
<body onload="javascript:setFocus()">
<div id="border-top" class="h_green"></div>
<div id="content-box">
<div class="padding">
<div id="element-box" class="login">
<div class="t"></div>
<div class="m">
<h1></h1>
<dl id="system-message"></dl>
<div id="section-box">
<div class="t"></div>
<div class="m">
<form id="form-login" style="clear: both;" name="login" method="post" action="index.php">
<p id="form-login-username">
<label for="modlgn_username"></label>
<input id="modlgn_username" class="inputbox" type="text" size="15" name="username"></input>
</p>
<p id="form-login-password"></p>
<p id="login-error-message"></p>
<p></p>
<p id="form-login-lang" style="clear: both;"></p>
<div class="button_holder"></div>
<div class="clr"></div>
<input type="submit" value="Login" style="border: 0; padding: 0; margin: 0; width: 0px; height: 0px;"></input>
<input type="hidden" value="com_login" name="option"></input>
<input type="hidden" value="login" name="task"></input>
<input type="hidden" value="1" name="3229cc4ec7d0ca37d4f0ff08ebca8251"></input>
I analyzed the requests that the browser was making when submitting a form with httpFox, and here is the result( this is the POST data when putting in das as the username and add as password):
username=das&passwd=asd&lang=&option=com_login&task=login&3229cc4ec7d0ca37d4f0ff08ebca8251=1
This is not an ordinary login box, and so, I do not know how to proceed. What I would like to do is be able to send requests from my browser as if I was submitting the form, but I am not sure what the final query looks like or where to send it.
Any help is appreciated.
My program is to upload a file and when I click on Upload it will call a servlet. the same upload page contain some other fields which should b displayed when I click on upload button only. how to call the servlet as well as to show the remaining contents. Actually using the servlet I want to show the file contents on same page.
here is my code.
<form class="form-horizontal" name="regist" action="Registration"
onsubmit="return validateFile((this))" enctype="multipart/form-data"
method="post">
<div class="control-group" class="span12">
<label class="control-label" for="file">Please upload a
file:</label>
<div class="controls">
<input type="file" name="file"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>
<div id="showFrames" style="display:none;">
<!--
hidden contents are here -->
</div>
and my script is
function validateFile(form) {
var fileName = form.file.value;
if (!fileName) {
alert("No File Selected!!!");
return false;
}
else
{
$("#showFrames").show();
}
}
but it doesn't work. can anyone help me? thanks
With jQuery I'll do it like that :
$('.form-horizontal').sumbit(function(e) {
if($(this).find('input[type="file"]').val().length) { //check by length
$("#showFrames").show();
} else {
alert('No file Selected');
e.preventDefault();
}
});
It'll be better using a form ID if you need to have more than one form.
This way you can remove the onsubmit attribute.
Replace your as per below
<form class="form-horizontal" name="regist" action="Registration"
onsubmit="return validateFile(this)" enctype="multipart/form-data"
method="post">
<div class="control-group" class="span12">
<label class="control-label" for="file">Please upload a
file:</label>
<div class="controls">
<input type="file" name="file"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>