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
Related
I have a form where I would like my users to add max 3 of languages skills and languages levels. I would like to only show it one and let user click to add one more (add one more "profile2" div, max add 3). I did not find anyway to do it.
my html code:
<div class="container">
<div class="profile2">
<label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"> </select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
</select>
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
</div>
</div>
script
<script>
$("#btnAddLanguage").click(function () {
$('#container').append("<div class="profile2">
<label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"> </select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
</select>
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
</div>");
});
</script>
is this what you need ? please check this.
<script>
$("#btnAddLanguage").click(function () {
var $appendItem = $('.profile2').html();
$($appendItem).appendTo('.profile2');
});
</script>
<div class="profile2">
<label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"></select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
</select>
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
</div>
I have a simple form which I would like to redirect the user to a specific URL within my site, depending on the value they have selected. So far I have this but instead of directing to one of the 4 urls, I instead get "http://mydomain.com/?ApplianceType=americano.html&sub=Submit" in my address bar:
<form name="form1" method="get">
<p>
<label>
<select name="ApplianceType" id="ApplianceType">
<option value="americano.html">American Fridge Freezer</option>
<option value="freezer.html">Freezer only</option>
<option value="fridge.html">Fridge only</option>
<option value="fridgefreezer.html">Fridge/Freezer</option>
</select>
</label>
<label>
<input type="submit" name="sub" id="sub" value="Submit">
</label>
</p>
</form>
Can anyone please advise?
You can change your HTML:
<form name="form1" id="yourForm" action="americano.html" method="get"> <!-- Added an ID to the form, and set the default value of `action` to 'americano.html'. -->
<p>
<label>
<select name="ApplianceType" id="ApplianceType" onchange="setURL(this)"> <!-- Assigned the `select` to run the function on value change. -->
<option value="americano.html">American Fridge Freezer</option>
<option value="freezer.html">Freezer only</option>
<option value="fridge.html">Fridge only</option>
<option value="fridgefreezer.html">Fridge/Freezer</option>
</select>
</label>
<label>
<input type="submit" name="sub" id="sub" value="Submit">
</label>
</p>
</form>
Then use the following Javascript function:
<script>
function setURL(selectedValue)
{
var element = document.getElementById('yourForm'); // Change 'yourForm' to the actual ID you assign on your form.
element.action = selectedValue.value;
}
</script>
Please take note of the comments in the code.
Using Angular to design a form with 3 inputs (based on Scotch.IO tutorial for Node+Express+Angular).
I would like the user to compulsorily select values for each input before submitting the form. If he doesn't, then I would like to display an error message.
<form>
<div class="form-group">
Start Date: <input type="date" class="form-control input-lg text-center" ng-model="formData.fromDate" placeholder="yyyy-MM-dd">
</div>
<div class="form-group">
End Date: <input type="date" class="form-control input-lg text-center" ng-model="formData.toDate" placeholder="yyyy-MM-dd">
</div>
<div class="form-group">
Report Type: <select class="form-control input-lg text-center" ng-model="formData.reportType">
<option value="csv">CSV</option>
<option value="pdf">PDF</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-lg" ng-click="findStat()">Add</button>
</form>
In other words, i would not like to pass 'undefined' values back to my Node.js code.
I have tried using 'required' options, which doesn't prevent undefined values from being passed back.
Give your form a name:
<form name="myForm">
Also give your inputs a name, and add validity constraints on them (required, etc.):
<input type="date" name="date" ...
Then in your findStat() function, you can access the form and check if it's valid:
$scope.findStat = function() {
if ($scope.myForm.$invalid) {
$scope.displayError = true;
}
else {
$scope.displayError = false;
...
}
}
See http://code.angularjs.org/1.2.15/docs/api/ng/directive/form and http://code.angularjs.org/1.2.15/docs/api/ng/type/form.FormController for more information.
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 !!
I'm struggling with a form submit in jquery mobile and the api doesn't show any useful examples.
Here is my html:
<div data-role="page" id="test" data-id="test">
<div data-role="content">
<form id="form1">
<div id="titleDiv" data-role="fieldcontain">
<label id="titlelabel" for="title">Title *</label>
<select id="title" name="title">
<option value="null">Please select a title</option>
<option value="mr">Mr</option>
<option value="miss">Miss</option>
<option value="mrs">Mrs</option>
<option value="ms">Ms</option>
<option value="dr">Dr</option>
</select>
</div>
<div id="submitDiv" data-role="fieldcontain">
<input type="submit" value="Submit Form" data-inline="true"/>
</div>
</form>
</div>
</div>
<div data-role="page" id="test" data-id="test">
<p>form confirmation page</p>
</div>
and here is my javascript:
$('div').live('pageshow',function(event, ui) {
$('#form1').submit(function() {
alert('test');
// Submit the form
// $.post("/forms/requestProcessor.php", form1Var.serialize(), function(data){
// });
$.mobile.changePage($("#test"), "slideUp");
return false;
});
});
On submit, I want it to show an alert then take the user to a page. At the moment, that code shows the alert 3 times the does nothing. Any ideas what is wrong with it?
A problem is that you're re-using the test id. Give the second page a different id and changePage to that id will work. Also it would be better to omit the pageshow or restrict it to #test rather than all the divs in your page.