I have a simple contact form with a file upload option built in. However, it only has 1 "Browse" button, and I want there to be unlimited. But instead of duplicating the "Browse" code a bunch of times, I'd rather it create a NEW browse button once the user has used the old one (uploaded a file).
How do I create another button in real-time?
Here is a full demo of the form: http://www.html-form-guide.com/files/contact-form/contact-form-attachment-1/contactform.php
The form's code is below, my question relates to upload button. Thank you!!
<form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' enctype="multipart/form-data" accept-charset='UTF-8'>
<fieldset >
<legend>Describe the issue:</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
<div class='short_explanation'>*All fields are required.</div>
<div><span class='error'><?php echo $formproc->GetErrorMessage(); ?></span></div>
<div class='container'>
<label for='name' >Full Name: </label><br/>
<input type='text' name='name' id='name' value='<?php echo $formproc->SafeDisplay('name') ?>' maxlength="50" /><br/>
<span id='contactus_name_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='email' >Email Address:</label><br/>
<input type='text' name='email' id='email' value='<?php echo $formproc->SafeDisplay('email') ?>' maxlength="50" /><br/>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='message' >Message:</label><br/>
<span id='contactus_message_errorloc' class='error'></span>
<textarea rows="10" cols="50" name='message' id='message'><?php echo $formproc->SafeDisplay('message') ?></textarea>
</div>
<div class='container'>
<label for='photo' >Upload your file:</label><br/>
<input type="file" name='photo' id='photo' /><br/>
<span id='contactus_photo_errorloc' class='error'></span>
</div>
<div class='container'>
<input type='submit' name='Submit' value='Submit' />
</div>
</fieldset>
</form>
Suppose you have one upload button in html like this:
<body>
<form>
<input type="file" name="upload1" id="upload1"/>
</form>
</body>
Then, you can add another upload button on Click event on previous button using jquery:
$(function(){
$('#upload1').on('click',function(){
var r= $('<input type="file" value="new button"/>');
$("form").append(r);
});
});
JSFIDDLE DEMO HERE
If you are not familiar with how to use Jquery, This is the place where you can learn:Learn jquery
Related
I'm trying to make login form method=POST but if click button submit on the next page php inform me:
Notice: Undefined index: username in C:\xampp\htdocs\Kurs\odbierz.php
on line 99
Notice: Undefined index: haslo in C:\xampp\htdocs\Kurs\odbierz.php on
line 100
login page(post.php):
<body>
<div id="form">
<form name="loginform" method="POST" action="odbierz.php" enctype="multipart/form-data">
<div id="odbierz">
<div id="login">
Login: <input id="log" type="text" name="username" value="" maxlength="20" size="30" required />
<div id="pass">
<br />
Password: <input id="pass" type="password" name="haslo" value="" maxlength="20" size="30" required />
</div>
<div id="input">
<input type="submit" name="submit" value="Zaloguj Się" />
</div>
</div>
</div>
</form>
</div>
</body>
action page(odbierz.php):
<?php
echo $pagname;
if($_SERVER["REQUEST_METHOD"] == "POST")
if(isset($_POST['username']) && isset($_POST['haslo']))
echo "Hello ".$_POST["username"]." ".$_POST["haslo"];
else
echo "Coś poszło nie tak<br />";
else
echo "Coś poszło nie tak<br />";
?>
Thanks any helping Person.
I've the following form on JSP:
<form class="form-horizontal" style="margin-bottom: 24px">
<fieldset id="myFieldset" disabled>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align: left">Created By</label>
<div class="col-sm-4">
<input class="form-control" type="text" name="created_by" value="${inputConfiguration.getCreatedBy()}" readonly/>
</div>
</div>
.
.
. few more divs of form-group
.
.
</fieldset>
<div class="form-group row">
<div class="col-sm-offset-4">
<form action="${pageContext.request.contextPath}/Configuration/EditConfiguration" method="GET">
<input type="hidden" name="marketplace" value="${param.marketplace}">
<input type="hidden" name="program" value="${param.program}">
<button class="btn btn-primary"> form_Edit </button>
</form>
</div>
<div class="col-sm-1">
<form action="${pageContext.request.contextPath}/Configuration/CopyConfiguration" method="GET">
<input type="hidden" name="marketplace" value="${param.marketplace}">
<input type="hidden" name="program" value="${param.program}">
<button class="btn btn-primary"> form_Copy to New </button>
</form>
</div>
</div>
</form>
However, the forms that are within the outer-form are not redirecting to the correct path on clicking their respective buttons. NOTE: the hidden input fields are just to pass them as url parameters to the paths mentioned in the action and nothing else. Can anyone suggest as to how to pass these as url params and how to make the nested forms work?
I want to embed my second view to my first view, but when I try to do it then my variable profile from my controller fails when I try to do this , how could I fix this?is there a way to do this?
main view
<div class="content-wrapper">
<section class="content">
<section class="col-lg-12 connectedSortable">
<?php $this->load->view('signup/signup'); ?>
</section>
</section>
</div>
</div>
second view
<link rel="stylesheet" href="<?=base_url('assets/dist/css/singup.css');?>">
<div class="container">
<div class="col-md-6">
<div id="logbox">
<form id="signup" method="post">
<h1>create an account</h1>
<input name="user[name]" type="text" placeholder="What's your username?" pattern="^[\w]{3,16}$" autofocus="autofocus" required="required" class="input pass" />
<select name="profile_id" id="profile_id">
<option value="">Select a Profile</option>
<?php foreach ($profile as $value): ?>
<option value="<?php echo $value['id'];?>"><?php echo $value['profile']; ?></option>
<?php endforeach ?>
</select>
<input name="user[password]" type="password" placeholder="Choose a password" required="required" class="input pass" />
<input name="user[password2]" type="password" placeholder="Confirm password" required="required" class="input pass" />
<input name="user[email]" type="email" placeholder="Email address" class="input pass" />
<input type="submit" value="Sign me up!" class="inputButton" />
<div class="text-center">
already have an account? login
</div>
</form>
</div>
</div>
</div>
Use $this->load->vars($data) instead of passing data in second argument in $this->load->view('main', $data).
Example controller method code:
//you create $data array to be passed to view
$this->load->vars($data);
$this->load->view('main');
This way variables are available to all view files no matter of loading order.
Docs.
I have a form in HTML and I'd like to submit this form after 4000ms ,from when the document is ready, without click the submit button. but i need my hidden data in controller while submitting
how can it possible ? please help me?
<form action="<?echo base_url();?>register/form_success" method="post" class="form-horizontal" id="career_submitform">
<div class="control-group">
<span class="caption-title">Please complete the registration form for getting the admission application number</span>
</div>
<input type="hidden" value="<? echo $applicant_id?>" name="applicant_id">
<input type="hidden" value="<? echo $grade_name?>" name="grade_name">
<input type="hidden" value="<? echo $grade_id?>" name="grade_id">
<div class="form-actions clearfix">
<div class="btncontinue-wrap">
<input type="submit" value="Continue" name="submit" class="btn-d btn-continue blue button-next" id="button_submit_style">
</div>
</div>
</form>
Use Jquery to make delay
$(function() {
$('#career_submitform').delay(2000).submit();
});
Then use like this.
html part:
<form id="career_submitform">
<input type="text">
<button>Submit</button>
</form>
script part:
$("#career_submitform").submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 1000);
$("<p>Working...</p>").appendTo("form");
});
Check http://jsfiddle.net/eoko1ap4/
<form action="<?echo base_url();?>register/form_success" method="post" class="form-horizontal" id="career_submitform">
<div class="control-group">
<span class="caption-title">Please complete the registration form for getting the admission application number</span>
</div>
<input type="hidden" value="<? echo $applicant_id?>" name="applicant_id">
<input type="hidden" value="<? echo $grade_name?>" name="grade_name">
<input type="hidden" value="<? echo $grade_id?>" name="grade_id">
<div class="form-actions clearfix">
<div class="btncontinue-wrap">
<input type="button" onclick="myFunction()" value="Continue" name="submit" class="btn-d btn-continue blue button-next" id="button_submit_style">
</div>
</div>
</form>
<script>
function myFunction() {
$('#career_submitform').delay(4000).submit();
}
</script>
Could someone please take a look at my website's code and tell me why my contact form isnt working?
Here are the relevant portions of code:
From the contact.html file:
<h3 class="indent-bot2">Contact Form</h3>
<form action="#" id="contact-form">
<div class="success"> Contact form submitted!<br>
<strong>We will be in touch soon.</strong> </div>
<fieldset>
<label class="name">
<input type="text" value="Enter Your Name:">
<span class="error">*This is not a valid name.</span>
<span class="empty">*This field is required.</span> </label>
<label class="email">
<input type="text" value="Enter Your E-mail:">
<span class="error">*This is not a valid email address.</span>
<span class="empty">*This field is required.</span> </label>
<label class="phone">
<input type="tel" value="Enter Your Phone:">
<span class="error">*This is not a valid phone number.</span>
<span class="empty">*This field is required.</span> </label>
<label class="message">
<textarea>Enter Your Message:</textarea>
<span class="error">*The message is too short.</span>
<span class="empty">*This field is required.</span> </label>
<div class="buttons-wrapper">
<a class="button" data-type="reset">Clear</a>
<a class="button" data-type="submit">Send</a>
</div>
</fieldset>
</form>
Also from the contact.html file:
<script type="text/javascript">
$(window).load(function(){
$('.slider')._TMS({
duration:800,
easing:'easeInCirc',
preset:'zabor',
pagination:false,
slideshow:7000,
banners:'fromTop',
nextBu:'.next',
prevBu:'.prev',
waitBannerAnimation:false,
pauseOnHover:true,
beforeAnimation:function(){
$('.slider .prev')
.stop()
.animate({top:'425px'},300,'easeOutCirc')
$('.slider .next')
.stop()
.animate({top:'425px'},300,'easeOutCirc')
},
afterAnimation:function(){
$('.slider .prev')
.css({top:'425px'})
.stop()
.animate({top:'327px'},300,'easeOutCirc')
$('.slider .next')
.css({top:'425px'})
.stop()
.animate({top:'327px'},300,'easeOutCirc')
}
})
$('#contact-form').forms({
ownerEmail:'info#dohatutor.com'
})
});
</script>
I think this is the piece of code that links to a javascript file which in turn calls "mailhandler.php".
<form action="some script" METHOD="POST" ENCTYPE="multipart/form-data"></form>
action="php or asp or pl script for processing form"
You didn't specify where the form should post to - what is the name of the script that you want to post this form to?
Now it says:
form action="#"
And it should say something like:
form action="contact.php"