This is what I'm working on:
<form name="leave" method="post" action="lins.jsp" onSubmit="chk();">
<center>
<p>Leave Type: <select id="myl" name="Type">
<option> </option>
<option>Casual</option>
<option>Extended</option>
<option>Medical/Sick</option>
</select>
<p>Start Date: <input type="text" id="datepicker" name="dt"></p>
<p>End Date: <input type="text" id="datepicker2" name="edt"></p>
<input type="submit" value="Submit" name="subm" />
<input type="reset" value="Clear" name="clr" />
</center>
</form> `
Is there any way to display an additional set of buttons(Basically to upload a file) when Medical option is chosen (without directing to a fresh page)?
You can achive this by using JQuery :
<script type="text/javascript">
function showBtn(ele)
{
if($(ele).val() == "medical"){
$("#uploadFile").show();
}
else{
$("#uploadFile").hide();
}
}
</script>
HTML Code :
<form name="leave" method="post" action="lins.jsp" onSubmit="chk();">
<center>
<p>Leave Type: <select id="myl" name="Type" onchange="showBtn(this)">
<option> </option>
<option value="casual">Casual</option>
<option value="extended">Extended</option>
<option value="medical">Medical/Sick</option>
</select>
<p>Start Date: <input type="text" id="datepicker" name="dt"></p>
<p>End Date: <input type="text" id="datepicker2" name="edt"></p>
<input type="submit" value="Submit" name="subm" />
<input type="reset" value="Clear" name="clr" />
<input type="file" value="Upload File" name="file" id="uploadFile" style="display: none;" />
</center>
</form>
Here i have given value to the options in dropdown, added upload file button in form but initially it is hidden. I have call function showBtn(ele) on onChange event of dropdown, in that function i have cheked that if value of selected option is medical than show button else hide it.
You could show that using jquery hide/show() event
Create a button,
<button id="hideMe">Upload file</button>
And following jquery ,
$(document).ready(function(){
$("#hideMe").hide();
var selVal=$('#my1').va();
if(selVal=="Medical"){
$("#hideMe").show();
}
return false;
});
});
Hope it helps !!
Related
I would like to get the value from my custom dialog (HTML) to use it as a string parameter to a function.
Dialog.html:
<form id="subject-form">
<div class="form-inline">
<input type="text" id="subject" placeholder="Bookmark name" name="subject" maxlength="16" required >
<span>.</span>
<div class="select-dropdown">
<select id="selector">
<option value="student">student</option>
<option value="cs">cs</option>
<option value="hr">hr</option>
</select>
</div>
<span>.xyz.com</span>
</div>
<div class="btn-container" id="dialog-button-bar">
<button type="submit" class="action" onclick="getLabel()">Add</button>
<button id="dialog-cancel-button" onclick="google.script.host.close()">Cancel</button>
</div>
<!-- <div id="dialog-status"></div> -->
</form>
DialogJS:
function getLabel () {
const subj = document.getElementById('subject').value;
const subd = document.getElementById('selector').value;
google.script.run
.withSuccessHandler()
.mailIt(subj, subd);
}
The problem is that you are reloading the page every time you press the button.
Change this:
<form id="subject-form">
To this:
<form onsubmit="return false" id="subject-form">
Then the function will work as expected.
Reference:
Stop form refreshing page on submit
I am importing a form written in GoogleApps Script into an iframe on a page built with Squarespace but for the life of me cannot prevent the form from submitting. I am using:
window.addEventListener( 'load', preventFormSubmit );
as suggested in GAS documentation but this does not seem to be triggering the preventFormSubmit function. Instead, when the submit button is clicked the form submits and goes to a blank google page. Also the alerts in the preventFormSubmit function (now commented out) never display which suggests that the form is never called.
I have spent days on this, cannot find an answer anywhere and can no longer see the woods for the trees. Any clues as to what I am doing wrong?
Squarespace is a website builder which enables one to embed code, in this case as an iframe.
My code:
js.html:
<script>
function preventFormSubmit() {
//alert( "prevent form submit triggered" );
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
//alert( "forms prevented from submitting: " = forms.length );
}
window.addEventListener( "ready", preventFormSubmit );
function handleFormSubmit(formObject) {
google.script.run
.withSuccessHandler( showSuccess )
.withFailureHandler( showError )
.processForm_1( formObject );
}
</script>
html:
<!DOCTYPE html >
<head>
<base target="_top" >
<?!= include('css'); ?>
<?!= include('js'); ?>
</head>
<body>
<div id="formDiv" class="card" >
<h2 id="title" >Alternative Booking form</h2>
<form id="alternative-booking-form-1" onsubmit="handleFormSubmit(this)" >
<fieldset>
<legend>About You</legend>
<p>Please tell us a bit about yourself.
</p>
<input type="text" id="firstName" name="firstName" form="alternative-booking-form-1"
placeholder="your first name" value="" required
/><br />
<input type="text" id="lastName" name="lastName" form="alternative-booking-form-1"
placeholder="your last name" value="" required
/><br />
<input type="text" id="title" name="title" form="alternative-booking-form-1"
placeholder="your title, eg: mr, mrs, ms etc" value="" /><br>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>We will only use your contact details in case we need to contact you with regard to
this booking, unless you consent
to further communications, as offered later in this booking process.</p>
<input type="email" id="email" name="email" form="alternative-booking-form-1"
placeholder="your email address" value=""
required /><br />
<input type="tel" id="phone" name="phone" form="alternative-booking-form-1"
placeholder="phone" value="" required /><br />
</fieldset>
<fieldset>
<input type="hidden" id="form" name="form" form="alternative-booking-form-1" value="1" />
<br />
<input type="submit" id="submit" name="submit" form="alternative-booking-form-1"
class="red" value="Next →" />
<br />
<br />
</fieldset>
</form>
</div>
<div id="output" name="output" ></div>
</body>
<!DOCTYPE html >
<head>
<base target="_top" >
<?!= include('css'); ?>
<?!= include('js'); ?>
</head>
<body>
<div id="formDiv" class="card" >
<h2 id="title" >Alternative Booking form</h2>
<form id="alternative-booking-form-1" >
<fieldset>
<legend>About You</legend>
<p>Please tell us a bit about yourself.
</p>
<input type="text" id="firstName" name="firstName" form="alternative-booking-form-1"
placeholder="your first name" value="" required
/><br />
<input type="text" id="lastName" name="lastName" form="alternative-booking-form-1"
placeholder="your last name" value="" required
/><br />
<input type="text" id="title" name="title" form="alternative-booking-form-1"
placeholder="your title, eg: mr, mrs, ms etc" value="" /><br>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>We will only use your contact details in case we need to contact you with regard to
this booking, unless you consent
to further communications, as offered later in this booking process.</p>
<input type="email" id="email" name="email" form="alternative-booking-form-1"
placeholder="your email address" value=""
required /><br />
<input type="tel" id="phone" name="phone" form="alternative-booking-form-1"
placeholder="phone" value="" required /><br />
</fieldset>
<fieldset>
<input type="hidden" id="form" name="form" form="alternative-booking-form-1" value="1" />
<br />
<input type="button" id="submit" name="submit" form="alternative-booking-form-1"
class="red" value="Next →" />
<br />
<br />
</fieldset>
</form>
</div>
<div id="output" name="output" ></div>
<script>
window.onload = function() {
document.getElementById("alternative-booking-form-1").addEventListener( "ready", handleFormSubmit );
}
function handleFormSubmit(formObject) {
google.script.run
.withSuccessHandler( showSuccess )
.withFailureHandler( showError )
.processForm_1( formObject );
}
</script>
</body>
I just want a simple form that sends the user to an adress with a added value from the form. Like http://example.com(value from input name "epost")
Is it possible to do that without any script etc?
<form method="get" action="http://google.com">
E-post:<br>
<input type="text" name="epost">
<p>
Organisation
<select name="organisation">
<option value="1">org 1</option>
<option value="2">org 2 Korset</option>
</p>
</br>
<input type="submit" value="Done">
</form>
You can send params in url using GET:
<form action="http://www.google.com/search" target='_blank'>
Key word:
<input type='text' name='q' value='Rob' />
<input type='submit' />
</form>
<a href="http://www.google.com/search?q=Rob" target='_blank'>Search for Rob</a>
The input form is not sending the input to the database, i even changed the Post to Put it staring sending info to the URL but thats it still did not end up in the database. By the way im using SQLite,
Could really use some help or input.
<section class="wrapper">
<div class="panel panel-default">
<div class="panel-body">
<!-- Standar Form -->
<form method="POST" action="{{ action('UploadController#handleCreate') }}" role="form">
<fieldset>
<h5>Upload Your Product's Files Here</h5>
<div class="form-actions form-group">
<input type="file" name="filepath" />
</div>
<div class="form-group">
<label for="name">
Product Name
</label>
<input class="form-control" placeholder="Name of your Product" type="text" name="name" id="name"/>
</div>
<div class="form-group">
<label for="developer_name">
Developer Name
</label>
<input class="form-control" placeholder="developer name" type="text" name="developer_name" id="developer_name"/>
</div>
<div class="form-group">
<label for="description">
The Description Of Your Product
</label>
<textarea class="form-control" rows="5" type="text" name="description"/>
</textarea>
</div>
<div class="form-group">
<label for="OS">
Compatible Operating System
</label>
<select class="form-control" name="OS"/>
<option value="Crossplatform">Cross Platform</option>
<option value="OSX">OSX</option>
<option value="Windows">Windows</option>
<option value="Linux">Linux</option>
<option value="IOS">IOS</option>
<option value="Android">Android</option>
</select>
</div>
<div class="form-group">
<label for="price">
Set The Price (if free leave as is)
</label>
<input class="form-control" placeholder="0.00" type="decimal" name="price" id="price"/>
</div>
<div class="form-group">
<label for="category">
Choose a category for your product
</label>
<select class="form-control" name="category"/>
<option value="free">Free</option>
<option value="premuim">Premium</option>
<option value="opensource">Opensource</option>
<option value="collaborativeefforts">Collabritive Efforts</option>
<option value="developertools">Developer Tools</option>
</select>
</div>
<h4>upload a thumbnail for your product</h4>
<div class="form-inline">
<input type="file" name="image" />
</div>
<hr>
<div class="form-actions form-group">
<input type="submit" value="submit" class="btn btn-primary" />
Cancel
</div>
</fieldset>
</form>
</div>
</div>
</section>
And here is the part of the controller that handles the form submission controller
public function create()
{
return View::make('developerpanel.upload.index');
}
//Handle create form submission.
public function handleCreate()
{
$product = new Product;
$product->filepath = Input::file('filepath');
$product->name = Input::get('name');
$product->developer_name = Input::get('developer_name');
$product->description = Input::get('description');
$product->OS = Input::get('OS');
$product->price = Input::get('price');
$product->category = Input::get('category');
$product->image = Input::file('image');
$product->save();
return Redirect::route('developerpanel.index');
}
Could really use the help Thanks!
Since you're uploading files, your form needs to have an enctype="multipart/form-data" attribute.
<form method="POST" action="{{ action('UploadController#handleCreate') }}" role="form" enctype="multipart/form-data">
Also, you don't want to just try to save the file object to the database like that. Check out the Laravel docs here regarding file uploads.
Use Laravel's methods, and maybe do some validation to make sure it's an image file.
validation#rule-image
html#opening-a-form
{{ Form::open(array('action'=>'UploadController#handleCreate', 'role'=>'form', 'files'=>true)) }}
...
{{ Form::close() }}
I have the following form (in brail):
<form method="post" enctype="multipart/form-data" action="${UrlHelper.For({#action:'Upload'})}">
<p><b>Select Template:</b>
<select id="template">
<option selected>Select One..</option>
<option value="Research">Research</option>
</select>
</p>
<br/>
<p><b>Download Worksheet:</b> <a id="downloadLink">Worksheet</a></p>
<br/>
<p><b>Research Item Upload</b></p>
<fieldset>
<legend>Upload Research Items File</legend>
<label for="file">File</label>
<input type="file" name="file" size="80" accept="application/vnd.ms-excel,application/excel,application/x-msexcel" />
<br />
<input type="submit" value="Upload" />
</fieldset>
</form>
Which posts to the following method signature on my controller:
[AccessibleThrough(Verb.Post)]
public UploadResults Upload(string template, [HttpPostedFileAdapterBinder] IHttpPostedFileAdapter file) {}
When I post the form, I only get the file. The template var is null and I am not sure why. Does anyone see something obvious I am missing?
You're missing the name attribute on the <select>:
<select name="template" id="template">
...
</select>