Skip Logic Javascript For HTML Survey Form - javascript

Anyone have any sample code to provide conditional skip logic within the context of an HTML survey form?
Here is a sample of the HTML I am trying to work with; for example if a user select an answer to question 19 and then skip to 21:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="//databroker.coremotives.com/Scripts/querystring.js"></script>
<script type="text/javascript" src="//databroker.coremotives.com/Scripts/rateit/jquery.rateit.min.js?v=2013-08-19"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form.CoreMotives').submit(function() {
if (!ValidateRequiredFields(this)) return false;
var submitButton = $(this).find("input[type='submit']");
if (submitButton != null) {
if (submitButton.attr('disabled') == 'disabled') return false;
submitButton.attr('disabled', 'disabled');
}
coreMotives.initForm(this);
return true;
});
var qs = new Querystring();
$('#txtFirstName').val(qs.get("txtFirstName", ""));
$('#txtLastName').val(qs.get("txtLastName", ""));
$('#txtCompanyName').val(qs.get("txtCompanyName", ""));
$('#txtTelephone').val(qs.get("txtTelephone", ""));
$('#txtEmailAddress').val(qs.get("txtEmailAddress", ""));
$('#txtComments').val(qs.get("txtComments", ""));
$('#Q22').val(qs.get("Q22", ""));
$('input[name=Question19][value=' + qs.get("Question19", "") + ']').prop('checked', true);
if ($.isNumeric(qs.get("Question1", ""))) $('#Question1').val(parseInt(qs.get("Question1", "")));
if ($.isNumeric(qs.get("Question2", ""))) $('#Question2').val(parseInt(qs.get("Question2", "")));
if ($.isNumeric(qs.get("Question3", ""))) $('#Question3').val(parseInt(qs.get("Question3", "")));
if ($.isNumeric(qs.get("Question4", ""))) $('#Question4').val(parseInt(qs.get("Question4", "")));
$('div.rateit').rateit();
});
</script>
<script type="text/javascript" src="//databroker.coremotives.com/Styles/WebForms/form.js"></script>
<link rel="stylesheet" href="//databroker.coremotives.com/Styles/WebForms/form.css" type="text/css" />
<link rel="stylesheet" href="//databroker.coremotives.com/Scripts/rateit/rateit.css?v=2013-08-19" type="text/css"/>
<style type="text/css">
</style>
</head>
<body class="noI">
<div id="container">
<form class="CoreMotives" method="post" enctype="multipart/form-data" action="//databroker.coremotives.com/WebCapture.aspx?cm_cid=01d60c03-47d8-e211-b434-00155d32390f&cm_iid=1584&cm_formid=b9e27eb2-49a5-e311-8684-000c293cd65c">
<ul>
<li class="complex">
<div>
<span class="half left">
<label class="desc" for="txtFirstName">First Name</label>
<input id="txtFirstName" name="txtFirstName" type="text" class="field text full " maxlength="255" tabindex="1" value="" />
</span>
<span class="half right">
<label class="desc" for="txtLastName">Last Name</label>
<input id="txtLastName" name="txtLastName" type="text" class="field text full " maxlength="255" tabindex="2" value="" />
</span>
</div>
</li>
<li>
<label class="desc" for="txtCompanyName">Company</label>
<div class="large">
<input id="txtCompanyName" name="txtCompanyName" type="text" class="field text full " maxlength="255" tabindex="3" value="" />
</div>
</li>
<li>
<label class="desc" for="txtTelephone">Phone</label>
<div class="large">
<input id="txtTelephone" name="txtTelephone" type="text" class="field text full " maxlength="255" tabindex="4" value="" />
</div>
</li>
<li>
<label class="desc" for="txtEmailAddress">Email<span class="req">*</span></label>
<div class="large">
<input id="txtEmailAddress" name="txtEmailAddress" type="text" class="field text full email" maxlength="255" tabindex="5" value="" />
</div>
</li>
<li>
<label class="desc" for="txtComments">Comments</label>
<div class="large">
<textarea id="txtComments" name="txtComments" class="field textarea medium " rows="10" cols="50" tabindex="6"></textarea>
</div>
</li>
<li>
<label class="desc" for="Question1">1. How satisfied are you, the employer, with BCBSVT?</label>
<div class="large">
<input type="text" id="Question1" name="Question1"/><div class="rateit star_blue" data-rateit-backingfld="#Question1" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question2">2. How satisfied would you say your employees are with BCBSVT?</label>
<div class="large">
<input type="text" id="Question2" name="Question2"/><div class="rateit star_red" data-rateit-backingfld="#Question2" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question3">3. Would you recommend BCBSVT to a business colleague?</label>
<div class="large">
<input type="text" id="Question3" name="Question3"/><div class="rateit star_red" data-rateit-backingfld="#Question3" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question4">4. At your next contract renewal, how likely is your company to renew with BCBSVT?</label>
<div class="large">
<input type="text" id="Question4" name="Question4"/><div class="rateit star_red" data-rateit-backingfld="#Question4" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<div class="large">
<label id="" class="desc">5. If benefits and their costs are the most important factors for considering a health insurance car</label>
</div>
</li>
<li>
<label class="desc" for="Question19">19. Did your company conduct open enrollment meetings for employees to discuss benefits for the new</label>
<div class="large">
<div><span style="width:100%; padding-bottom:0px;"><input id="Question19_0" name="Question19" type="radio" class="field radio" value="83668" tabindex="12" /><label class="choice" for="Question19_0">Yes</label></span><span style="width:100%; padding-bottom:0px;"><input id="Question19_1" name="Question19" type="radio" class="field radio" value="60591" tabindex="13" /><label class="choice" for="Question19_1">No</label></span></div>
</div>
</li>
<li>
<label class="desc" for="Q22">22. How can BCBSVT improve the open enrollment process for your company?</label>
<div class="large">
<textarea id="Q22" name="Q22" class="field textarea medium " rows="10" cols="50" tabindex="13"></textarea>
</div>
</li>
<li class="buttons">
<div><input id="submitButton" name="submitButton" class="btTxt submit" type="submit" value="Submit" /></div>
</li>
</ul>
</form>
</div>
<img id="bottom" src="//databroker.coremotives.com/Styles/WebForms/bottom.png" alt="" />
<script type="text/javascript">
var path = (("https:" == document.location.protocol) ? "https://databroker.coremotives.com/databroker.js?version=2" : "http://cdn.coremotivesmarketing.com/databroker.js");
document.write(unescape("%3Cscript src='" + path + "' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var coreMotives = new DataBroker();
coreMotives.customerId = "01d60c03-47d8-e211-b434-00155d32390f";
coreMotives.instanceId = 1584;
coreMotives.formId = "b9e27eb2-49a5-e311-8684-000c293cd65c";
coreMotives.trackPageView();
} catch (e) { }
</script>
</body>
</html>

Related

How do I make form submit only if required fields have input?

I was able to get this code to work before I put an alert button, but I need to give the user some sort of notification the form has been submitted (although not actually needing to submit anywhere). The email, phone and name fields are required but with the alert I have right now, it is giving the "submission received" alert even if required fields are empty.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Contact Us</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles/restaurantStyles.css" />
<script type="text/javascript">
const name = textField.checkValidity();
const email = emailField.checkValidity();
const phone = telField.checkValidity();
function submitAlert() {
alert("Thank you for your feedback. Your form has been submitted.");
}
</script>
<style>
form {
margin: 0 auto;
align-content: center;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
width: 35%;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron jumbotron-fluid">
<header>
<h1 class="display-1">Burger Shack</h1>
</header>
<p class="lead"> New location in Rice Village coming April 2020!</p>
</div>
<nav>
<hr />
<p><a class="btn" href="index.html"> <img src="images/homeIcon.png" alt="Home Icon"></a>
<a class="btn" href="menu.html">Menu</a>
<a class="btn" href="contact.html">Contact Us</a>
</nav>
<hr />
<div class="container">
<form name="contactForm" onsubmit="return validateForm()" method="post" class="text-center border border-light">
<div class="form-group row">
<label for "Name" class="col-md-2 col-form-label"><b>Name:</b></label>
<div class="col-md-10">
<input type="text" id="Name" name="Name" class="form-control" required> </div>
</div>
<div class="form-group row">
<label for "Email" class="col-md-2 col-form-label"><b>Email:</b></label>
<div class="col-md-10">
<input type="email" id="Email" name="Email" class="form-control" required> </div>
</div>
<div class="form-group row">
<label for "Phone" class="col-md-2 col-form-label"><b>Phone:</b></label>
<div class="col-md-10">
<input type="tel" id="Phone" name="Phone" class="form-control" minlength=10 maxlength=10 required> </div>
</div>
<div class="form-group row">
<label for "inquiry" class="col-form-label"><b>Reason for Inquiry:</b></label>
<div class="col">
<select name="Reasons" id="inquiry" class="form-control">
<option value="CateringDefault">Catering</option>
<option value="PrivateParty">Private Party</option>
<option value="Feedback">Feedback </option>
<option value="Other">Other</option>
</select></div></div>
<div class="form-group row">
<label for "info" id="info" class="col-form-label"><b>Aditional Information:</b></label>
<div class="col">
<textarea class="form-control" id="txtArea"></textarea></div></div>
<div class="form-group row">
<label for "customer" class="col-form-label">Have you been to the restaurant?</label>
<div class="col">
<div class="form-check form-check-inline">
<input type="radio" id="no" name="answer" value="NO" class="form-check-input" checked />
<label class="form-check-label" for="no">No</label></div>
<div class="form-check form-check-inline">
<input type="radio" id="yes" name="answer" value="YES" class="form-check-input" />
<label class="form-check-label" for="yes">Yes</label>
</div></div>
<div class="form-group row">
<label for"choices" class="col-form-label">Best days to contact you:</label>
<div class="col">
<div class="form-check-inline">
<label class="form-check-label" for="M">M </label>
<input type="checkbox" id="M" name="choices" value="monday" class="form-check-input">
<label class="form-check-label" for="T">T </label>
<input type="checkbox" id="T" name="choices" value="tuesday" class="form-check-input">
<label class="form-check-label" for="W">W </label>
<input type="checkbox" id="W" name="choices" value="wednesday" class="form-check-input">
<label class="form-check-label" for="Th">Th </label>
<input type="checkbox" id="Th" name="choices" value="thursday" class="form-check-input">
<label class="form-check-label" for="F">F</label>
<input type="checkbox" id="F" name="choices" value="friday" class="form-check-input">
</div></div>
</div> </div>
<div class="row">
<button type="submit" id="submitButton" class="btn btn-default" onclick="submitAlert();">Submit</button>
</div>
</form>
</container>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
<footer>
<hr />
<p> 305 Gray Street, Houston, TX, 77004 <br />
713-555-6752</p>
</footer>
</html>
Instead of calling checkValidity on each field and doing it immediately when the page loads, check the form's validity during the form's submit event. Do not do it on the submit button's click event. If it's valid, do nothing and let the submit event continue and do its thing. If it's not, cancel the event using event.preventDefault().
NOTES:
Place your script elements near the end of the code, just before the </body> tag so that by the time the browser gets to that point, all of the page HTML will have been parsed into memory and is accessible.
Do not set up events using inline HTML event attributes, such as
onclick or onsubmit. Do all event binding in a separate
JavaScript section.
The <footer> element must be placed within the <body> element.
Don't use self-terminating tags, like <br /> or <hr />.
The <b> element shouldn't be used just for visual styling. Use CSS instead.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Contact Us</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles/restaurantStyles.css" />
<style>
form {
margin: 0 auto;
align-content: center;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
width: 35%;
}
label { font-weight:bold; } /* Don't use <b>. Formatting is done with CSS */
</style>
</head>
<body>
<div class="container">
<div class="jumbotron jumbotron-fluid">
<header>
<h1 class="display-1">Burger Shack</h1>
</header>
<p class="lead"> New location in Rice Village coming April 2020!</p>
</div>
<nav>
<hr>
<p>
<a class="btn" href="index.html"> <img src="images/homeIcon.png" alt="Home Icon"></a>
<a class="btn" href="menu.html">Menu</a>
<a class="btn" href="contact.html">Contact Us</a>
</nav>
<hr>
<div class="container">
<form name="contactForm" method="post" class="text-center border border-light">
<div class="form-group row">
<label for "Name" class="col-md-2 col-form-label">Name:</label>
<div class="col-md-10">
<input type="text" id="Name" name="Name" class="form-control" required>
</div>
</div>
<div class="form-group row">
<label for "Email" class="col-md-2 col-form-label">Email:</label>
<div class="col-md-10">
<input type="email" id="Email" name="Email" class="form-control" required> </div>
</div>
<div class="form-group row">
<label for "Phone" class="col-md-2 col-form-label">Phone:</label>
<div class="col-md-10">
<input type="tel" id="Phone" name="Phone" class="form-control" minlength=10 maxlength=10 required>
</div>
</div>
<div class="form-group row">
<label for "inquiry" class="col-form-label">Reason for Inquiry:</label>
<div class="col">
<select name="Reasons" id="inquiry" class="form-control">
<option value="CateringDefault">Catering</option>
<option value="PrivateParty">Private Party</option>
<option value="Feedback">Feedback </option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="form-group row">
<label for "info" id="info" class="col-form-label">Aditional Information:</label>
<div class="col">
<textarea class="form-control" id="txtArea"></textarea>
</div>
</div>
<div class="form-group row">
<label for "customer" class="col-form-label">Have you been to the restaurant?</label>
<div class="col">
<div class="form-check form-check-inline">
<input type="radio" id="no" name="answer" value="NO" class="form-check-input" checked>
<label class="form-check-label" for="no">No</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="yes" name="answer" value="YES" class="form-check-input">
<label class="form-check-label" for="yes">Yes</label>
</div>
</div>
<div class="form-group row">
<label for"choices" class="col-form-label">Best days to contact you:</label>
<div class="col">
<div class="form-check-inline">
<label class="form-check-label" for="M">M </label>
<input type="checkbox" id="M" name="choices" value="monday" class="form-check-input">
<label class="form-check-label" for="T">T </label>
<input type="checkbox" id="T" name="choices" value="tuesday" class="form-check-input">
<label class="form-check-label" for="W">W </label>
<input type="checkbox" id="W" name="choices" value="wednesday" class="form-check-input">
<label class="form-check-label" for="Th">Th </label>
<input type="checkbox" id="Th" name="choices" value="thursday" class="form-check-input">
<label class="form-check-label" for="F">F</label>
<input type="checkbox" id="F" name="choices" value="friday" class="form-check-input">
</div>
</div>
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
<!-- A footer must be inside of the body -->
<footer>
<hr>
<p> 305 Gray Street, Houston, TX, 77004 <br>713-555-6752</p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
// Do you event binding in JavaScript, not with inline HTML event attributes like onsubmit
document.querySelector("form").addEventListener("submit", submitAlert);
// All event callbacks will automatically get the event passed to them
function submitAlert(event) {
// Since the form element is what raised the event, "this" will refer to it
if(this.checkValidity()){
alert("Thank you for your feedback. Your form has been submitted.");
} else {
event.preventDefault(); // Stop the submit event.
}
}
</script>
</body>
</html>
First, add a id for the inputs. Second:
function submitAlert() {
if (('.contact-form').find('input[type=text],select')) {
alert("Thank you for your feedback. Your form has been submitted.");
}
}
See if the inpunts are sending a value.

Perform certain action when radio button is checked

How to show input with class searchFilter below radio button only when that radio button is checked and hide all the others .searchFilter inputs?
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
No need for javascript for this, you can do this with css:
.searchFilter {
display: none;
/* hide search filters */
}
input[type=radio]:checked~.searchFilter {
display: block;
/* show filters that appear after a checked input */
}
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example1" name="role" checked/>
<label for="example1">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example2" name="role" checked/>
<label for="example2">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example3" name="role" checked/>
<label for="example3">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
Do this way:
$(document).ready(function(){
$('input[type=radio]').on('change',function(){
$('.searchFilter').hide();
$('input[type=radio]:checked').next('.searchFilter:first').show();
});
});
This should do the trick.
$(document).ready(function(){
$('.filter-option').children('input[type=radio]').on('change', function(){
$(this).parents('.details').find('input[type=radio]').each(function(){
$(this).is(':checked') ? $(this).siblings('.searchFilter').show() : $(this).siblings('.searchFilter').hide();
});
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example1" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example2" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
<li class="submenu">Check two
<div class="details">
<form>
<div class="filter-option">
<input type="radio" id="example3" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example4" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
Please check my code it might help you
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//For first form
//select last radiobutton as default
$("form").find(".searchFilter").attr("disabled",true).val("")
$("form").find(".searchFilter").last().attr("disabled",false)
//On radiobuttion selection change
$('input[type=radio]').on('change',function(){
$("form").find(".searchFilter").attr("disabled",true).val("");
$(this).siblings(".searchFilter").attr("disabled",false)
});
});
</script>
</head>
<body>
<ul class="filters">
<li class="submenu">Check one
<div class="details">
<form >
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
<div class="filter-option">
<input type="radio" id="example" name="role" checked/>
<label for="example">Example</label>
<input type="text" class="searchFilter">
</div>
</form>
</div>
</li>
</ul>
</body>
</html>

How can i get data from two input field under a radio button

I have a form where i used a radio button. when user select file, input field of file show and when select text input field of text show. my problem is how can i get data from a radio button which have another two input field.
<div class="span7">
<b>Select File or Link</b>
<input type="radio" name="Telephone" value="filelink1" id="rad1" checked="" />File
<input type="radio" name="Telephone" value="filelink2" id="rad2" />Link
</div>
<div class="span7" id="linkname">
<b>Press Release link</b>
<br/>
<input type="text" name="link" placeholder="Press Link" />
</div>
<div class="span7" style="margin-left:42px;display: none;" id="filename">
<b>Press Release File</b>
<br/>
<input type="file" name="file" />
</div>
<!--Onselect Radio button -->
Try this
if ($_GET['Telephone'] == 'filelink1') {
$val = $_GET['file']; }
else {
$val = $_GET['link']; }
ps:change the method if you don't use GET
Use onclick event of the the radio button and pass this as argument.
This will pass the reference to the element which is clicked and by checking its value we can perform our logic. See Below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function OnTelephoneSelect(radioButton)
{
if (radioButton.value=="filelink1") {
document.getElementById("linkname").style.display = "none";
document.getElementById("filename").style.display = "";
}
else
{
document.getElementById("linkname").style.display = "";
document.getElementById("filename").style.display = "none";
}
}
</script>
</head>
<body>
<div class="span7">
<b>Select File or Link</b>
<input type="radio" name="Telephone" value="filelink1" id="rad1" checked="" onclick="OnTelephoneSelect(this)"/>File
<input type="radio" name="Telephone" value="filelink2" id="rad2" onclick="OnTelephoneSelect(this)" />Link
</div>
<div class="span7" id="linkname" style="display: none;">
<b>Press Release link</b>
<br />
<input type="text" name="link" placeholder="Press Link" />
</div>
<div class="span7" style="margin-left:42px;" id="filename">
<b>Press Release File</b>
<br />
<input type="file" name="file" />
</div>
</body>
</html>
May this help you show and hide div elements based on the selection of radio buttons.
<div class="span7">
<b>Select File or Link</b>
<input type="radio" name="Telephone" value="filelink1" id="rad1" checked="" />File
<input type="radio" name="Telephone" value="filelink2" id="rad2" />Link
</div>
<div class="span7" id="linkname">
<b>Press Release link</b>
<br/>
<input type="text" name="link" placeholder="Press Link" />
</div>
<div class="span7" style="margin-left:42px;display: none;" id="filename">
<b>Press Release File</b>
<br/>
<input type="file" name="file" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="filelink1")
{
$("#filename").hide();
$("#linkname").show();
}
if($(this).attr("value")=="filelink2")
{
$("#linkname").hide();
$("#filename").show();
}
});
});
</script>
For live demo click here

Why does both the forms are in single page?

This is my html
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title</title>
<link rel="stylesheet" href="demo.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo1.js"></script>
<script type="text/javascript">
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
</script>
</head>
<div class="demo">
Form A
Form B
<form id="formA">
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">Name:
<input type="text" name="name" id="name" value="" />Email:
<input type="text" name="email" id="email" value="" />Comments:
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>
basically has two forms which can be selected using tabs.I have the java script
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
in the header which does the swapping.but when I implement this html file,both the forms are displayed in the page.
But this is the demo #http://jsfiddle.net/25WDr here its working fine,but this html is not working.The js fiddle demo is done by a user here.but I cant implement it.It showing both form.The mistake is in the html i made..can anyone figure it out
Try to put your javascript code inside a document ready
$(function() {
$('.tabHeader').click(function () {
$('.demo form').hide().filter($(this).attr('href')).show()
return false;
}).eq(0).click();
});
Because in head part all your html is not built yet, So $('.tabHeader') is empty.
You should wait the end of load of your html part in order to manipulate it.
Another solution could be put your script before the </body>
in the demo they are actually hiding the other form while clicking the first
$(function() {
$('<a>FormB</a>').prependTo('.demo').click(function () {
$('.demo form').hide().filter('#formB').show()
}).click();
$('<a>FormA</a>').prependTo('.demo').click(function () {
$('.demo form').hide().filter('#formA').show()
}).click();
});

HTML based brochures/flyers

I am wondering if its possible to be able to create an html type brochure that can get printed or saved to pdf but the html template would have a few things that the user can alter such as adding there own images putting there details in and a description of sorts.
I would prefer to use javascript,html,css and if necessary php.
I am at the moment kind of stuck at the moment I have created an html form so it does not go further than that.
Is there an api of sorts that I can use to create several templates and allow the users to be able add what they need.
Here is the form so far:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="FlyCreator.aspx.vb" Inherits="FlyCreator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Flyer Creator test</title>
<link rel="stylesheet" type="text/css" href="css/mainFlyer.css" media="all">
<script type="text/javascript" src="jquery/view.js"></script>
</head>
<body id="main_body" >
<div id="form_container">
<h1><a>Untitled Form</a></h1>
<form id="form_Flyer" class="appnitro" enctype="multipart/form-data" method="post" action="">
<div class="form_description">
<%--<h2>Flyer Creator Test</h2>--%>
</div>
<ul >
<li class="section_break">
<h3>Name and Title:</h3>
<p>Leave fields blank if they are not needed</p>
</li>
<li id="li_1" >
<label class="description" for="element_1">Name </label>
<span>
<input id="element_1_1" name= "element_1_1" class="element text" maxlength="255" size="20" value=""/>
<label>First</label>
</span>
<span>
<input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="20" value=""/>
<label>Last</label>
</span>
<span>
<input id="element_1_3" name="element_1_3" class="element text" maxlength="50" size="40" />
<label>Title</label>
</span>
</li>
<li class="section_break">
<h3>Business Address:</h3>
<p></p>
</li>
<li id="li_3" >
<div>
<input id="element_3_1" name="element_3_1" class="element text" maxlength="35" size="30" />
<label>Company Name</label>
</div>
<div>
<input id="element_3_2" name="element_3_2" class="element text" value="" type="text" maxlength="35" size="30"/>
<label for="element_3_1">Street Address</label>
</div>
<div class="left">
<input id="element_3_3" name="element_3_3" class="element text medium" value="" type="text"/>
<label for="element_3_2">City</label>
</div>
<div class="right">
<input id="element_3_4" name="element_3_3" class="element text medium" value="" type="text"/>
<label for="element_3_4"> Province / Region</label>
</div>
<div class="left">
<input id="element_3_5" name="element_3_5" class="element text medium" maxlength="15" value="" type="text"/>
<label for="element_3_5">Postal / Zip Code</label>
</div>
</li>
<li class="section_break">
<h3>Phones,Emails, and Website:</h3>
<p></p>
</li>
<li id="li_21" >
<label class="description" for="element_21" style="text-align:left;color:black"><b>phone no1 :</b> </label>
<div>
<select class="element select medium" id="element_21" name="element_21">
<option value="" selected="selected">Choose Label</option>
<option value="1" >home</option>
<option value="2" >office</option>
<option value="3" >cell</option>
<option value="4" >fax</option>
</select>
<input name="ph11" value="" maxlength="3" type="text" id="ph11" size="3"/>
<input name="ph12" value="" maxlength="3" type="text" id="ph12" size="3"/>
<input name="ph13" value="" maxlength="4" type="text" id="ph13" size="3"/>
</div>
</li>
<li id="li_22" >
<label class="description" for="element_22">phone no2: </label>
<div>
<select class="element select medium" id="element_22" name="element_22">
<option value="" selected="selected">Choose Label</option>
<option value="1" >home</option>
<option value="2" >office</option>
<option value="3" >cell</option>
<option value="4" >fax</option>
</select>
<input name="ph21" value="" maxlength="3" type="text" id="ph21" size="3"/>
<input name="ph22" value="" maxlength="3" type="text" id="ph22" size="3"/>
<input name="ph23" value="" maxlength="3" type="text" id="ph23" size="3"/>
</div>
</li>
<li id="li_23" >
<label class="description" for="element_23">phone no3: </label>
<div>
<select class="element select medium" id="element_23" name="element_23">
<option value="" selected="selected">Choose label</option>
<option value="1" >home</option>
<option value="2" >office</option>
<option value="3" >cell</option>
<option value="4" >fax</option>
</select>
<input name="ph31" value="" maxlength="3" type="text" id="ph31" size="3"/>
<input name="ph32" value="" maxlength="3" type="text" id="ph32" size="3"/>
<input name="ph33" value="" maxlength="3" type="text" id="ph33" size="3"/>
</div>
</li>
<li id="li_5" >
<label class="description" for="element_5">Email : </label>
<div>
<input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li>
<li id="li_6" >
<label class="description" for="element_6">company or personal website: </label>
<div>
<input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="http://"/>
</div>
</li>
<li class="section_break">
<h3>Section Break</h3>
<p></p>
</li> <li id="li_8" >
<label class="description" for="element_8">Photo of your self </label>
<div>
<input id="element_8" name="element_8" class="element file" type="file"/>
</div>
</li> <li id="li_9" >
<label class="description" for="element_9">Main photo of house </label>
<div>
<input id="element_9" name="element_9" class="element file" type="file"/>
</div>
</li> <li id="li_10" >
<label class="description" for="element_10">interior 1 </label>
<div>
<input id="element_10" name="element_10" class="element file" type="file"/>
</div>
</li> <li id="li_11" >
<label class="description" for="element_11">house 2 </label>
<div>
<input id="element_11" name="element_11" class="element file" type="file"/>
</div>
</li> <li id="li_12" >
<label class="description" for="element_12">house 3 </label>
<div>
<input id="element_12" name="element_12" class="element file" type="file"/>
</div>
</li> <li id="li_13" >
<label class="description" for="element_13">company logo </label>
<div>
<input id="element_13" name="element_13" class="element file" type="file"/>
</div>
</li>
<li id="li_14" >
<label class="description" for="element_14">qr code </label>
<div>
<input id="element_14" name="element_14" class="element file" type="file"/>
</div>
</li>
<li id ="li_15">
<label class="description" for="element_15">Opional IEASA logo</label><img src="images/ieasa.gif" />
<div >
<input id="element_15a" name="select1" value="on" type="radio" />On<br />
<input id="element 15b" name="select1" value="on" type="radio" />Off<br />
</div>
</li>
<li class="section_break">
<h3></h3>
<p></p>
</li>
<li id="li_16" >
<label class="description" for="element_16">Property Information:</label>
<div>
<input id="element_16_1" name="element_16_1" class="element text large" value="" type="text"/>
<label for="element_16_1">Street Address</label>
</div>
<div>
<input id="element_16_2" name="element_16_2" class="element text large" value="" type="text"/>
<label for="element_16_2">Address Line 2</label>
</div>
<div class="left">
<input id="element_16_3" name="element_16_3" class="element text medium" value="" type="text"/>
<label for="element_16_3">City</label>
</div>
<div class="right">
<input id="element_16_4" name="element_16_4" class="element text medium" value="" type="text"/>
<label for="element_16_4"> Province / Region</label>
</div>
<div class="left">
<input id="element_16_5" name="element_16_5" class="element text medium" maxlength="15" value="" type="text">
<label for="element_16_5">Postal / Zip Code</label>
</div>
</li>
<li id="li_17" >
<label class="description" for="element_17">Description of property </label>
<div>
<textarea id="element_17" name="element_17" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_18" >
<label class="description" for="element_18">property details </label>
<div>
<textarea id="element_18" name="element_18" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_19" >
<label class="description" for="element_19">property details 2 </label>
<div>
<textarea id="element_19" name="element_19" class="element textarea medium"></textarea>
</div>
</li>
<li id="li_20" >
<label class="description" for="element_20">property details 3 </label>
<div>
<textarea id="element_20" name="element_20" class="element textarea medium"></textarea>
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="745249" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
<div id="footer">
</div>
</div>
</body>
</html>
To create and thereafter save/print pdf, you can try "DOMPDF". Its pretty easy to use and good results. Essentially what you would do is create your application and user options as usual using html/css/php etc. Add in your adjustments etc.
Once done, you wrap the result in a php variable called......well for now, called " $html ",
then inside of your processing page you put something like
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("YOURPDFNAMEHERE.pdf");
?>
and the domPDF lib will create a pdf with your html in it.
check it out
https://code.google.com/p/dompdf/
good luck
EDIT***
to expand on this, say that your result from all the edits/user selections is html that looks like this:
(random code)
<table >
<tr>
<td><img src="logo.jpg" alt=""></td>
</tr>
<tr>
<td width="420" style="background-color:#f00; color:#fff;">lopan?</td>
<td>lopan right</td>
</tr>
</table>
then youd assign this code into any php variable. We will call it " $html ". Youd assign it like so:
$html = '
<table >
<tr>
<td><img src="logo.jpg" alt=""></td>
</tr>
<tr>
<td width="420" style="background-color:#f00; color:#fff;">lopan?</td>
<td>lopan right</td>
</tr>
</table>
';
and this below
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->stream("sample.pdf");
?>
takes your $html content and creates the pdf accordingly.

Categories

Resources