So i'm currently building a set of 3 buttons via forms, and having a weird issue i've never seen before with the following code:
<div class='logout'>
<form action='action.php' method='post'>
<input type='submit' value='H'>
<input type='text' name='mode' value='0' hidden>
</form>
</div>
<div class='Mini'>
<form action='action.php' method='post'>
<input type='submit' value='M'>
<input type='text' name='mode' value='MINI' hidden>
</form>
</div>
<div class='Close'>
<form action='action.php' method='post'>
<input type='submit' value='C'>
<input type='text' name='mode' value='DISPLAY' hidden>
</form>
</div>
in its current state none of the forms are shown, but when the > is dropped from the close form tags they become fully functional
CSS is as follows
.logout{
position:Absolute;
left:90%;
top:0%;
}
.Mini{
position:Absolute;
left:87%;
top:0%;
z-index: 1;
}
.Close{
position:Absolute;
left:-130%;
top:0%;
z-index: 1;
}
Your code working perfect. May be some css of div overwrite your form and make it display:none or hidden. If you remove > it will break some css and html. so you will be able to see all forms.
Here is the code run it and check :
<div class='logout'>
<form action='action.php' method='post'>
<input type='submit' value='H'>
<input type='text' name='mode' value='0' hidden>
</form>
</div>
<div class='Mini'>
<form action='action.php' method='post'>
<input type='submit' value='M'>
<input type='text' name='mode' value='MINI' hidden>
</form>
</div>
<div class='Close'>
<form action='action.php' method='post'>
<input type='submit' value='C'>
<input type='text' name='mode' value='DISPLAY' hidden>
</form>
</div>
As you can see here --> FIDDLE
Your elements show up. I am assuming it's CSS ... There is nothing wrong with your HTML itself. You need to look at your CSS styles and figure out why things aren't displaying. Most likely it's going to be the div -->
<div class='logout'>
That's your issue.
Related
How can I place buttons next to input texts like in this photo?
I've this code:
<form action='/posts/comment/{{id}}' method='POST'>
<input class="form-control" type="text" name='comment' id='comment' placeholder="Comment as {{name}}..." aria-label="Comment as {{name}}...">
</form>
Answering based on question and screenshot.
button{
margin-left:-6px;
border-left:none;
}
<form action='/posts/comment/{{id}}' method='POST'>
<input class="form-control" type="text" name='comment' id='comment' placeholder="Comment as {{name}}..." aria-label="Comment as {{name}}...">
<button>Save Comment </button>
</form>
I have 2 forms, one of which is to submit the user data ( 1st form ) and another to upload a file ( 2nd form. I cannot make it as a single form. My design is that way). First I want user to enter the basic information and then before hitting the submit button, I want that user to upload image and then hit the submit button. How can I make submit button of the 1st form to come after the 2nd form.
<form action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" style="position:relative; top:120px; left:90%;" value="submit"> <!-- This button should come after 2nd form upload button -->
<form action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
I have used CSS it changed the position though but I encountered my vertical scroll bar cut to half, making bottom half totally invisible.
If you add a wrapper, you can better control its position using the wrappers boundaries and absolute positioning.
1) Below
The wrapper's padding-bottom: 25px is for the absolute positioned input to not overlap any elements that comes after the forms
.formswrapper {
position: relative;
padding-bottom: 25px;
/* style for this demo only */
border: 1px solid lightgray;
}
.formswrapper form:first-child input:last-child {
position: absolute;
left: 0;
top: 100%;
transform: translateY(-100%);
}
<div class="formswrapper">
<form action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" value="submit">
</form>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
</div>
2) Beside
.formswrapper {
position: relative;
}
.formswrapper form:first-child input:last-child {
position: absolute;
left: 60px;
top: 100%;
transform: translateY(-100%);
}
<div class="formswrapper">
<form action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" value="Submit">
</form>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
</div>
If you can use jQuery, I would do the following:
CSS:
#button1 { display:none; }
jQuery:
$(document).on("click", "#button2", function() {
$("#button1").css("display", "inline-block");
)}
This one should work:
$('#userData').bind('keyup change', function(){
var show = true;
for(child in $(this).children){
if(child.is(':empty')){
show = false; //Could break here if you want.
}
}
if(show){
$('#upload').show();
} else {
$('#upload').hide();
}
});
#upload{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userData" action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" style="position:relative; top:120px; left:90%;" value="submit">
</form>
<form id="upload" action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
I have a page with 3 forms without submit button. Then I created a script to submit all at the same time to the same file however it creates 3 rows in database but I need all together in same row. Any suggestion?
Thanks!
<script language="JavaScript">
submitForms = function(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
document.getElementById("form3").submit();
}
</script>
<!-- begin snippet: js hide: false console: true babel: false -->
<button type="submit" onclick="submitForms()">Click me!</button>
<form id="form1" action="test.php" method="post">
<input type="text" name="A" value="A"/>
</form>
<form id="form2" action="test.php" method="post">
<input type="text" name="B" value="B"/>
</form>
<form id="form3" action="test.php" method="post">
<input type="text" name="C" value="C"/>
</form>
elseif(isset($_POST)) {
$A = mysqli_real_escape_string($connection,$_POST['A']);
$B = mysqli_real_escape_string($connection,$_POST['B']);
$C = mysqli_real_escape_string($connection,$_POST['C']);
mysqli_query($connection,"INSERT INTO something (A, B, C) VALUES ('$A', '$B', '$C')");
header('Location: ../Index.php');
exit();
Then put it all in one form (which is basically what in 99.999% of cases would be needed):
<button type="submit" onclick="submitForms()">Click me!</button>
<form id="form1" action="test.php" method="post">
<input type="text" name="A" value="A"/>
<input type="text" name="B" value="B"/>
<input type="text" name="C" value="C"/>
</form>
Edit:
A form can span many tags, not necessarily only <input> tags (or <select>, etc). So this is perfectly valid too:
<form id="form1" action="test.php" method="post">
<div class="class1">
<div class="class2">
<input type="text" name="A" value="A"/>
</div>
<div class="class2">
<input type="text" name="B" value="B"/>
</div>
</div>
<div class="class3">
<input type="text" name="C" value="C"/>
</div>
</form>
After a lot of tries unfortunately is extremely hard to put all together within the order that I wish. This page contains many things so if someone else is able to provide a solution that is not using the same form with different div container I appreciate. Thanks
I have this template where I customized whats on it BUT i got stuck on the contact page where the contact form upon clicking the button clear OR send button nothing happens. I really don't know much about most of the stuff ALL are from research through net but can't get to fix this. Am I missing something here?
Questions I have in mind:
1. Do I need to put something or create in "action"
2. What do I have to put in "href" to clear or send the form to my email?
Or you have a better idea.
<h2 class="p0">Contact Form</h2>
<form id="contact-form" action="#" method="post" enctype="multipart/form-data">
<fieldset>
<label><span class="text-form">Name:</span>
<input name="p1" type="text" />
</label>
<label><span class="text-form">Email:</span>
<input name="p2" type="text" />
</label>
<div class="wrapper">
<div class="text-form">Message:</div>
<textarea></textarea>
</div>
<div class="buttons"> <a class="button-2" href="#">Clear</a> <a class="button-2" href="#">Send</a> </div>
</fieldset>
</form>
Use real buttons, don't just give them a class called buttons.
In action, put down the name of the server file that will process this form, for example action="contact_form.php". If you would like to send an email, put down action="MAILTO:someone#example.com".
<h2 class="p0">Contact Form</h2>
<form id="contact-form" action="MAILTO:someone#example.com" method="post" enctype="multipart/form-data">
<fieldset>
<label><span class="text-form">Name:</span>
<input name="name" type="text" />
</label>
<label><span class="text-form">Email:</span>
<input name="email" type="text" />
</label>
<div class="wrapper">
<div class="text-form">Message:</div>
<textarea name="message"></textarea>
</div>
<div class="buttons">
<input type="button" value="Clear" onclick="document.getElementById('contact-form').reset()"
/>
<input type="submit" value="Send" />
</div>
</fieldset>
</form>
<ul style="list-style-type:none;">
<form name="frm1" action="" style="display:inline">
<li>
<input type="text" name="xxx">
</li>
<li>
<input type="submit" name="btn_submit" value="Submit">
</li>
</form>
<li>
<form name="frm2" action="" style="display:inline" >
<input type="submit" name="btn_reset" value="Reset">
</form>
</li>
</ul>
I want the two buttons to be displayed horizontally. i am trying to use lists rather than tables. What should i do to make the buttons displayed on the same line but as submit buttons of two forms.
You can use display:inline; on li
Demo on jsfiddle
If I understand correctly that you want to have the text input on the first line and the two buttons on the seccond line, here's an idea - float:
<div>
<form name="frm1" action="">
<input type="text" name="xxx"><br />
<input type="submit" name="btn_submit" value="Submit" style="float: left;">
</form>
<form name="frm2" action="">
<input type="submit" name="btn_reset" value="Reset" style="float: left;">
</form>
</div>
<br style="clear: both;" />
Note the line break with clear: both; at the end which makes sure that the next line will be really displayed on it's own line.
<form name="frm1" action="">
<input type="text" name="xxx">
<input type="submit" name="btn_submit" value="Submit">
</form>
<form name="frm2" action="">
<input type="submit" name="btn_reset" value="Reset">
</form>
CSS
form, form input{
float: left;
}
As seen here jsFiddle
Obviously though this would have an effect on all form-input elements, but can be updated to include css classes.