One form to another form HTML - html

I am working on my school work and I am trying to add subtitles when user upload video to webpage. The source code was created earlier and I only added code at row 12 -18.
<div class="form-group">
<input type="checkbox" id="inputCheck" name="enhancement">
<label for="inputCheck"> Add subtitles(text): </label>
<form id="post" accept-charset="UTF-8" name="post" method="post" action="/application/controllers/media.php">
<textarea rows="5" cols="85" name="blogentry" form="post"></textarea>
<input class="button" type="submit" value="Submit">
</form>
</div>
I tried this code alone and it works, so it saved subtitles to file on server. But when I added it to this source code it doesn't work. I know it doesn't work because there is "form in form". Please kindly I need your help. I don't know how to transfer this two forms to just one form. I am new in HTML and I don't know how to do it.
<form action="<?php echo base_url();?>media/upload" class="form-horizontal" enctype="multipart/form-data" method="post" id="form1">
<div class="form-group">
<select name="gender" class="form-control hide-scroll" size="<?php echo sizeof($gender_list);?>">
<?php foreach($gender_list as $key => $gender):?>
<option <?php if($key==0) echo 'selected="selected"';?> value="<?php echo $gender['gender_name'];?>"><?php echo $gender['gender_name'];?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="inputFile" class="col-sm-2 control-label input-sm m-bot15">Add file:</label>
</div>
<div class="form-group">
<input type="checkbox" id="inputCheck" name="enhancement">
<label for="inputCheck"> Add subtitles(text): </label>
<form id="post" accept-charset="UTF-8" name="post" method="post" action="/application/controllers/media.php">
<textarea rows="5" cols="85" name="blogentry" form="post"></textarea>
<input class="button" type="submit" value="Submit">
</form>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info col-sm-12"><i class="glyphicon glyphicon-arrow-up"></i> Upload</button>
</div>
</form>

You don't need two forms there. You need only one form on client-side and script, which adds subtitles to DB/file if $_POST['inputCheck'] == true - on server-side. You only need to reorganize server-side script.
On client-side you only need to remove internal 'form' tag.
On server-side you need to move script from '/application/controllers/media.php' to 'media/upload'. That's all.

Related

FormSubmit says my form should use method=POST but it actually does

I'm using FormSubmit to create a contact form in my static website (hosted on a server).
My form looks like this:
<div id="contact-area" class="container">
<h1>~$ contactme</h1>
<br>
<form action="https://formsubmit.co/c379c266434ca1a039bdf03209919395" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Your name..." required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Your e-mail" required>
</div>
</div>
</div>
<div class="form-group">
<textarea maxlength="1000" placeholder="Your message..." class="form-control" name="message" rows="10" required></textarea>
</div>
<input type="hidden" name="_template" value="table">
<input type="text" name="_honey" style="display:none">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="message_sent.html">
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit</button>
</form>
</div>
My email is verified. When the user clicks on submit button, this message appears in a new page:
" Make sure your form has the method="POST" attribute "
However, I receive the message. That's weird. Anyone know why it says my form should have POST attribute while my form actually has the post attribute.
Your code snippet is all okay. I have tested it, forms are getting submitted, and nothing wrong except the way you implement the "_next" feature. As FormSubmit documentation clearly mentioned you have to provide an alternative URL not just a path or file, it should be a URL.
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
Please change the hidden filed in your form to:
<input type="hidden" name="_next" value="https://yourdomain.co/message_sent.html">
and that should probably work fine.
Additional information:
FormSubmit documentation: https://formsubmit.co/documentation
I guess you have gone wrong in the action of the form.
Try using this:
<form action="https://formsubmit.co/your#email.com" method="POST">
<!-- Your form inputs here -->
</form>

Submit 3 HTML forms with one Javascript button to store in same MySQL DB row

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

HTML Submit Button not firing when form filled

I have a new login page which is not submitting. :(
If I click the button and the required fields are not entered, it fires me back the errors, but as soon as they're filled and I try to submit it does nothing.
The page is live at https://www.safewise.co.nz/trainwise/login
The code
<form action="login.php" method="post" name="logForm" id="logForm" class="styled_form">
<?php if(isset($redirectURL) && !empty($redirectURL)) { ?><input type="hidden" id="redirect" name="redirect" value="<?php echo $redirectURL; ?>" /><?php } ?>
<div>
<p id="login-title">Login</p>
<input name="userEmail" type="email" class="validate[required]" id="userEmail" placeholder="Email"<?php if(isset($enteredEmail) && !empty($enteredEmail)){echo ' value="'.$enteredEmail.'"';} ?> required /><span class="form_hint">Email Address</span>
<input name="userPwd" type="password" class="validate[required]" placeholder="Password" id="userPwd" required /><span class="form_hint">Password</span>
<div class="login-checkbox"><input type="checkbox" name="remember" id="remember" style="vertical-align:middle;" /> <label for="remember">Remember Me</label></div>
<p><input name="doLogin" type="submit" id="doLogin" value="Continue" class="form-button" /></p>
<div id="forgot"><p>Register</p><p>Forgotten Password?</p>
</div>
</form>
<div id="forgotPass" class="reveal-modal">
<div class="modal-header"><h3>Forgot Password</h3></div>
<div class="modal-body" style="text-align:center;">
<form action="login.php" method="post" name="forgotForm" id="forgotForm" >
<p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
<p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john#example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
The weird thing is as soon as I remove this code it works.
<div id="forgotPass" class="reveal-modal">
<div class="modal-header"><h3>Forgot Password</h3></div>
<div class="modal-body" style="text-align:center;">
<form action="login.php" method="post" name="forgotForm" id="forgotForm" >
<p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
<p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john#example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
Any suggestions?
Where is that div located in the page? It is incorrect to have a form inside a form. And so your code may work when you remove the div above because you've taken out the second form.
Consider having them as two separate entities instead of nested.
Are these forms nested? You cannot have nested forms. You can have multiple forms in a page, just as long they're not nested.
Here's some ref on it http://www.w3.org/MarkUp/html3/forms.html
I was missing a closing div
<div id="forgot">
<p>Register</p>
<p>Forgotten Password?</p>
Needs a closing div at end
<div id="forgot">
<p>Register</p>
<p>Forgotten Password?</p>
</div>

Adding a append to an input where one already exists

This is my first post so be gentle :)
I have a form which I am updating a bit of information in multiple selections on the page.
I'm using datepicker to populate the box and I want to use the refresh icon to update a table with the new date info and fire off some other scripts too.
The issue is that the following code
<div class="control-group">
<form name="form2" action="<?php echo editFormAction;?>">
<label class="control-label" for="process_app_form_sent">Application Form Sent</label>
<div class="controls">
<div class="date datepicker input-append">
<input id="process_app_form_sent" name="process_app_form_sent" type="text" placeholder="Click to enter date" class="input-medium date"> <span class="add-on"><i class="icon-th"></i></span>
<button type="submit" class="add-on input-append"><i class="icon-refresh"></i>
</button>
<input name="member_id" type="hidden" id="member_id" value="<?php echo $row_members['member_id']; ?>" />
<input name="type" type="hidden" id="type" value="1" />
</div>
</div>
</form>
<!--end form-->
</div>
The last box with the refresh icon in it isn't sitting right. Any ideas?
As screen grab image:
You can always make the div outside position:relative and the button position absolute and then place it exactly where you want it using top: & left:

Editing a basic contact form using hre

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>