I have a form with two fields, a drop-down list and a text box. Both drop-down and text box are mandatory but with one exception that if user selects "Other" the text-box will not be mandatory and will not show asterisk.
Form:
<form method="post" id="configForm" action="">
<div class="field">
<label class="required" for="type"><em>*</em>Type</label>
<div class="input-box">
<select name="type" class="required-entry">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="field">
<label class="required" for="price"><em>*</em>Price</label>
<div class="input-box">
<input type="text" value="" name="price" class="required-entry">
</div>
</div>
</form>
Script:
<script type="text/javascript">
//< ![C
var Form= new VarienForm('configForm', true);
//]]>
</script>
Its feels awkward while answering my own question but as I solve it myself so posting because it may help someone else.
<script type="text/javascript">
//< ![C
Validation.add('conditional-required', 'This is a required field.', function(v) {
var type = $('type').getValue();
if(type == 'Other')
{
return ( (v != "none") && (v != null) && (v.length != 0));
}
else
{
return true;
}
});
//]]>
</script>
Add id type to dropdown list
<select name="type" class="required-entry" id="type">
Add class conditional-required to text field
<input type="text" value="" name="price" class="conditional-required">
Fairly Simple!
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 making a dynamic form with multiple fields in bootstrap and when I add a new inline form, it is not aligned with the previous one. I appreciate if someone can help me with that.
image of the form
html:
<!-- start of the column with properties(form-control)-->
<div class="col-lg-8" id="property-col">
<div class="container">
<form class="form">
<div class="row">
<h3>Properties</h3>
<br>
</div>
<div class="row">
<div class="form-group">
<fieldset class="form-inline">
<label class="control-label">Image Size:</label>
<select class="form-control" id="image-size-selector">
<option value="128">128×128</option>
<option value="256">256×256</option>
<option value="512">512×512</option>
<option value="1024">1024×1024</option>
</select>
</fieldset>
</div>
</div>
<div class="row" id="dynamic_form">
<div class="form-group form-horizontal">
<label>Primitives</label>
<div class="container">
<div class="form-inline" id="primitive_fields">
<select class="input-small form-control" id="primitive-selector" name="PrimitiveChoose[]">
<option value=" " disabled selected>primitive</option>
<option value="sphere">sphere</option>
<option value="triangle">triangle</option>
</select>
<input type="number" class="input-small form-control" id="diameter" name="Diameter[]" step="any" placeholder="diameter(D)">
<input type="text" class="input-small form-control" id="sphere-position" name="SpherePosition[]" placeholder="(x, y, z)">
<select class="input-small form-control" id="circle-color-selector" name="CircColorSelect[]" >
<option value=" " disabled selected>color</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
</select>
<button type="button" class="btn btn-success btn-add" id="add_more"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
css:
.form-inline .input-mini
{
width: 70px;
font-weight: bold;
}
.form-inline .input-small
{
width: 120px;
font-weight: bold;
}
#primitive-form > *
{
margin: 2px 2px;
}
Hmmm maybe you need to create a codepen.
It seems align if not created dynamically.
http://codepen.io/seiran/pen/LWwWgX
Try to post your script.
//code is the same -- dont mind this
I think you are asking this type of format here i executed with the single input so you can add your own new things.
The fieldset is closed on the first form itself just cut the fieldset there with the belowed two div and paste at the end.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
var next = 1;
$(".add-more").click(function(e){
e.preventDefault();
var addto = "#field" + next;
var addRemove = "#field" + (next);
next = next + 1;
var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';
var newInput = $(newIn);
var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
var removeButton = $(removeBtn);
$(addto).before(newInput);
$(addRemove).before(removeButton);
$('.remove-me').click(function(e){
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length-1);
var fieldID = "#field" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<input type="hidden" name="count" value="1" />
<div class="controls" id="profs">
<form class="input-append">
<div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
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>
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 am wanting to concatenate a few form fields into a span or div area.
I have found a script on the web that works really well for me. But it concatenates the fields into another form field.
What do I need to change to tell it to put it in a span/div.
I have made a fiddle to help explain what Im after.
http://jsfiddle.net/3ZHfB/
Cheers in advance!!
Your fiddle updated with answer, see this.
1) Replace copyPassDetails textbox with a span/div:
<div class="field">
<label for="copyPassDetails">Full Name:</label>
<span id="fullName"></span>
</div>
2) Replace textbox' val() inside bind function with span's html():
$('#fullName').html($('#Title').val() + ' ' +
$('#First_Name').val() + ' ' +
$('#Last_Name').val() );
<form method="post" action="">
<div class="field">
<label for="Title">Title:</label>
<select name="Title" id="Title">
<option value="" selected="selected">Select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Revd">Revd</option>
<option value="Prof">Prof</option>
<option value="Judge">Judge</option>
</select>
</div>
<div class="field">
<label for="First_Name"> First Name:</label>
<input type="text" id="First_Name" name="First_Name" />
</div>
<div class="field">
<label for="Last_Name"> Last Name:</label>
<input type="text" id="Last_Name" name="Last_Name" />
</div>
<br>
<br>
<div class="field">
<label for="copyPassDetails">Full Name:</label>
<!-- <input type="text" id="copyPassDetails" name="address" /> -->
<div id="copyPassDetails"></div>
</div>
</form>
<script>
$('#Title, #First_Name, #Last_Name').bind('blur', function() {
$('#copyPassDetails').html($('#Title').val() + ' ' +
$('#First_Name').val() + ' ' +
$('#Last_Name').val() );
});
</script>
Try this, i have edited
<input type="text" id="copyPassDetails" name="address" /> this to
<div id="copyPassDetails"></div> and $('#copyPassDetails').val( to $('#copyPassDetails').html(
To put the value in <div><span> tags you need to use html and for
input val