I'm trying to add the jSignature widget to a standard Bootstrap form, but so far nothing is appearing on the form (other form fields show fine).
Here's my form:
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I'm including all the files at the bottom of the page in the correct order:
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="assets/js/flashcanvas.js"></script>
<![endif]-->
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
but the signature canvas doesn't show. Here's a screenshot of what I'm seeing if that helps:
I'm not getting any server errors or console errors so quite stumped at the moment - this is my first go at using jSignature.
Upon further inspection with the dev tools I noticed that the height of the signature div was 0px. I ended up adding this to the script:
$(document).ready(function() {
$("#signature").jSignature({
height: 200
});
$("#signature").resize();
})
and this is at least showing the signature capture now.
Hi now this code is working please check to properly your code is correct
Ref this code
$('#signature').signature();
#signature{
width:300px;
height:200px;
border:solid 1px red;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet">
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
First I want to apologize if this question was already asked. However I am not able to resolve this issue. I don't know where to find the problem and why it does not print out when the form is filled. I have simple PHP file which takes data from form and should print it out on screen:
if (isset($_POST['submit']))
{
//get data from form
$Title = $_POST['Title']; // title of case study
$Summary = $_POST['Summary']; // summary of case study
$WhatDid = $_POST['WhatDid']; // what did you do question
$Volunteering = $_POST['Volunteering'];
$Credit = $_POST['Credit-bearing'];
$Local = $_POST['Local-schools']; // themes checkboxes
$Elderly = $_POST['Elderly'];
$Environmental = $_POST['Environmental'];
$Edinburgh = $_POST['Edinburgh'];
$Scotland = $_POST['Scotland'];
$UK = $_POST['UK']; // themes checboxes
$International = $_POST['International'];
$Online = $_POST['Online'];
$Other = $_POST['Other_theme']; // themes checboxes
$Undergraduate = $_POST['Undergraduate']; // cohort checboxes
$Masters = $_POST['Masters'];
$PhD = $_POST['PhD']; // cohort checboxes
$WhyDid = $_POST['WhyDid'];
$WhatWell = $_POST['WhatWell'];
$WhatDifferently = $_POST['WhatDifferently'];
$Scalability = $_POST['Scalability'];
$FurtherInfo = $_POST['FurtherInfo'];
$Location = $_POST['Location'];
$AuthorTitle = $_POST['title'];// authors title
$F_Name = $_POST['first_name'];
$L_Name = $_POST['last_name'];
$Email = $_POST['email'];
$Contactauthor = $_POST['contact'];
$Note1 = $_POST['note1'];
$Note2 = $_POST['note2'];
$Engagement = $_POST['engagement']; // date of engagement
echo nl2br(
"This is a $Title,
\n this is a $Summary,
this is a $WhatDid,
\n this is checkbox $Volunteering,
this is checkbox $Credit,
\n this is checkbox $Local,
this is checkbox $Elderly,
\n this is checkbox $Environmental,
this is checkbox $Edinburgh,
\n this is checkbox $Scotland,
this is checkbox $UK,
\n this is checkbox $International,
this is checkbox $Online,
\n this is other themes $Other,
this is an $Undergraduate,
\n this is a $Masters,
this is a $PhD,
\n this is why it was done: $WhyDid,
this is what went well: $WhatWell,
\n this is what could be done differently: $WhatDifferently,
Could it be scalable & transerable?: $Scalability,
\n Additional information?: $FurtherInfo,
Location of practice: $Location,
\n this is an Author $AuthorTitle $F_Name $L_Name, email address: $Email
and he is contact: $Contactauthor,
\n this is a date of engagement $Engagement,
Author agrees with possible ammendments: $Note1, $Note2."
);
and then here is a html itself:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Submit Case Study</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript">
// if Google is down, it looks to local file...
if (typeof jQuery == 'undefined') {
document.write(unescape("script src='js/jquery-1.11.2.min.js' type='text/javascript'/script"));
}
</script>
<!-- jQuery library -->
<!--<script src="http://code.jquery.com/jquery-2.1.4.js"></script>-->
<!-- script to clone author -->
<script type="text/javascript" src="JS/clone-form-td.js"></script>
<!-- Own stylesheet -->
<link rel="stylesheet" href="CSS/style.css" type="text/css"/>
<!-- jQuery customized theme-->
<link rel="stylesheet" href="CSS/jquery-ui.css">
<script src="JS/jquery-ui.js"></script>
<script src="JS/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
function toggle(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
} //script to expand text field when
</script>
<script>
$(function(){
$("#date").datepicker({dateFormat: "dd-mm-yy"}); // datepicker
});
</script>
<style>
.ui-datepicker {font-size:85%; } /* custom size of datepicker */
</style>
</head>
<body>
<form name="submit" action="PHP/submit-test.php" method="POST">
<div class="main container">
<p class="label1">Title *</p>
<input class="textboxstyle" type="text" name="Title">
<p class="help-block">Meaningful, short descriptive title</p>
<br>
<p class="label1">Summary *</p>
<textarea name="Summary"></textarea>
<p class="help-block">Brief summary of what the engagement involved.</p>
<br>
<p class="label1">What did you do? *</p>
<textarea name="WhatDid"></textarea>
<p class="help-block">Please give a description of the case study including the theme(s)/topics(s) it relates to (please see list overleaf). It would be helpful if this could include the stage of development (e.g. whether the practice is new or established). Please include links to key themes/topics .</p>
<br>
<div>
<p class="label1">Links to key themes/topics *</p>
<div class="checkbox">
<input type="checkbox" id="Volunteering" name="Volunteering" value="YES"/> Volunteering<br/>
<input type="checkbox" id ="Credit-bearing" name="Credit-bearing" value="YES"/> Credit-bearing course<br/>
<input type="checkbox" id="Local-schools" name="Local-schools" value="YES"/> Working with local schools and / or young people<br/>
<input type="checkbox" name="Elderly" value="YES"/> Working with elderly people<br/>
<input type="checkbox" name="Environmental" value="YES"/> Environmental or sustainability<br/>
<input type="checkbox" name="Edinburgh" value="YES"/> Based in Edinburgh or the Lothians<br/>
<input type="checkbox" name="Scotland" value="YES"/> Based in Scotland (excluding Edinburgh or the Lothians)<br/>
<input type="checkbox" name="UK" value="YES"/> Based in the UK<br/>
<input type="checkbox" name="International" value="YES"/> Based internationally<br/>
<input type="checkbox" name="Online" value="YES"/> Online component<br/>
<input type="checkbox" onclick="toggle('Other_theme')" name="Other"> Other<br/>
<div id="other_theme" style="display:none;">
<input type="text" class="singleline1" id="Other_theme" name="Other_theme" required="">
</div>
</div>
</div>
<div>
<p class="label1">Student cohort*</p>
<div class="checkbox">
<input type="checkbox" name="Undergraduate" value="YES"> Undergraduate<br>
<input type="checkbox" name="Masters" value="YES"> Postgraduate (Masters)<br>
<input type="checkbox" name="PhD" value="YES"> Postgraduate (Research)<br>
</div>
</div>
<p class="label1">Why did you do it? *</p>
<textarea name="WhyDid"></textarea>
<p class="help-block">A brief outline of the reasons behind the practice described - its purpose and benefits. What change was it intended to make or problem was it designed to solve?</p>
<br>
<p class="label1">What went well? *</p>
<textarea name="WhatWell"></textarea>
<p class="help-block">A brief outline of what worked well for you/ your organisation. What were the highlights? Did you receive any positive feedback?</p>
<br>
<p class="label1">What might you have done differently? *</p>
<textarea name="WhatDifferently"></textarea>
<p class="help-block">A brief outline of any particular challenges faced and how these were addressed. Please also say if you are planning any changes or further developments.</p>
<br>
<p class="label1">Scalability and transferability *</p>
<textarea name="Scalability"></textarea>
<p class="help-block">Is this practice scalable and transferable? What is the potential for it being expanded and/or run elsewhere in the University? A brief outline of workload commitments in setting up and maintaining the practice would also be useful.</p>
<br>
<p class="label1">Further information *</p>
<textarea name="FurtherInfo"></textarea>
<p class="help-block">e.g. website or publications, materials used, presentation slides, screen shots, testimonials. A couple of quotes from community members, students or staff illustrating the case study would be particularly useful.</p>
<br>
<p class="label1">Location of practice *</p>
<textarea name="Location"></textarea>
<p class="help-block">Name of community partner, academic School/ support service involved (if applicable).</p>
<br>
<div id="author1" class="clonedInput">
<p id="author" class="label1">Author </p>
<div class="row">
<div class="col-md-1 col-sm-6 col-xs-4">
<input id="title" name="title" type="text" placeholder="" class="input_title textboxstyle">
<p id="help-block-title" class="help-block-title">Title</p>
</div>
<div class="col-md-2">
<input id="first_name" name="first_name" type="text" placeholder="" class="input_fn textboxstyle">
<p id="help-block-fn" class="help-block-fn">First Name</p>
</div>
<div class="col-md-2">
<input id="last_name" name="last_name" type="text" placeholder="" class="input_ln textboxstyle">
<p id="help-block-ln" class="help-block-ln">Last Name</p>
</div>
<div class="col-md-2">
<input id="email" name="email" type="email" placeholder="abc#example.com" class="input_email textboxstyle">
<p id="help-block-email" class="help-block-email">Email</p>
</div>
<div class="col-md-1 col-sm-1 col-xs-2">
<input id="contact" name="contact" type="checkbox" value="YES" class="contact">
<p id="help-block-checkbox" class="help-block-checkbox">Contact</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-4">
<input id="btnAdd" name="btnAdd" type="button" class="btn btn-info" value="Add author">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<input id="btnDel" name="btnDel" type="button" class="btn btn-danger" value="Remove author">
</div>
</div>
</div>
<p class="label1">Date*</p>
<div>
<div class="datebox">
<input id="date" class="date" name="engagement">
<p class="help-block">When the engagement activity took place</p>
</div>
</div>
<div>
<p class="label1">Note for authors</p>
<div>
<input name="note1" type="checkbox" value="YES"><p class="prg-text"> 1) The full case study (in this template format) will be included on a public wiki database.</p>
</div>
<div>
<input name="note2" type="checkbox" value="YES"><p class="prg-text"> 2) The Student Community Engagement team will produce a summary version of each case study suitable for an external and internal audience. Authors will be asked to approve these public versions of their case studies before they are made available on open websites. These case studies will be available as .pdf downloads and other formats suitable for printing and inclusion in publications, as web pages and for presentations. These will be available on the public section of the Student Community Engagement website and linked to other key sites.</p>
</div>
<p class="help-block">The case study will be used in two ways and consent of author is required for both.</p>
</div>
<br><br>
<input class="submit btn btn-primary" type="submit" name="submit" value="submit">
</div>
</form>
</body>
Any idea will be appreciated.
Thank you
You are having problem in this code.
.
.
<div>
<p class="label1">Links to key themes/topics *</p>
<div class="checkbox">
.
.
<input type="checkbox" onclick="toggle('Other_theme')" name="Other" > Other<br/>
<div id="other_theme" style="display:none;">
<input type="text" class="singleline1" id="Other_theme" name="Other_theme" required="">
</div>
</div>
</div>
.
.
Either you click checkbox 'Other' or not, 'Other_theme' textbox will be required. So, remove 'required' attribute from 'Other_theme' textbox. You thinking, that <div> is hidden so, it will not ask required field. But, actually this is not happening.
Validate it through jquery. Write onsubmit="return checkValidation();" in your <form> tag too (as below) for validating it at end. One more thing i added in your code is add value="Other" in 'Other_theme' textbox. Please see my code minutely.
Updated Code.
<form action="PHP/submit-test.php" method="POST" onsubmit="return checkValidation();">
.
.
<div>
<p class="label1">Links to key themes/topics *</p>
<div class="checkbox">
.
.
<input type="checkbox" onclick="toggle('Other_theme')" name="Other" value="Other"> Other<br/>
<div id="other_theme" style="display:none;">
<input type="text" class="singleline1" id="Other_theme" name="Other_theme">
</div>
</div>
</div>
.
.
Add This too in your .js file.
<script>
function checkValidation()
{
var OtherVal = $("input[name='Other']:checked").val();
if(OtherVal == 'Other')
{
alert("Please Fill Other Theme");
return false;
}
}
</script>
In Addition to user's requirement on Jan 19.
<script>
function checkValidation()
{
var OtherVal = $("input[name='Other']:checked").val();
var OtherThemeValue = $("#Other_theme").val();
if(OtherVal == 'Other' && OtherThemeValue=="")
{
alert("Please Fill Other Theme");
return false;
}
}
</script>
<form name="submit" action="PHP/submit-test.php" method="POST">
<input class="submit btn btn-primary" type="submit" name="submit" value="submit">
There is two elements with same name. So change name of anyone element.
<form name="form1" action="PHP/submit-test.php" method="POST">
Update your html code to this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Submit Case Study</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript">
// if Google is down, it looks to local file...
if (typeof jQuery == 'undefined') {
document.write(unescape("script src='js/jquery-1.11.2.min.js' type='text/javascript'/script"));
}
</script>
<!-- jQuery library -->
<!--<script src="http://code.jquery.com/jquery-2.1.4.js"></script>-->
<!-- script to clone author -->
<script type="text/javascript" src="JS/clone-form-td.js"></script>
<!-- Own stylesheet -->
<link rel="stylesheet" href="CSS/style.css" type="text/css"/>
<!-- jQuery customized theme-->
<link rel="stylesheet" href="CSS/jquery-ui.css">
<script src="JS/jquery-ui.js"></script>
<script src="JS/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
function toggle(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
} //script to expand text field when
</script>
<script>
$(function(){
$("#date").datepicker({dateFormat: "dd-mm-yy"}); // datepicker
});
</script>
<style>
.ui-datepicker {font-size:85%; } /* custom size of datepicker */
</style>
</head>
<body>
<form action="PHP/submit-test.php" method="POST">
<div class="main container">
<p class="label1">Title *</p>
<input class="textboxstyle" type="text" name="Title">
<p class="help-block">Meaningful, short descriptive title</p>
<br>
<p class="label1">Summary *</p>
<textarea name="Summary"></textarea>
<p class="help-block">Brief summary of what the engagement involved.</p>
<br>
<p class="label1">What did you do? *</p>
<textarea name="WhatDid"></textarea>
<p class="help-block">Please give a description of the case study including the theme(s)/topics(s) it relates to (please see list overleaf). It would be helpful if this could include the stage of development (e.g. whether the practice is new or established). Please include links to key themes/topics .</p>
<br>
<div>
<p class="label1">Links to key themes/topics *</p>
<div class="checkbox">
<input type="checkbox" id="Volunteering" name="Volunteering" value="YES"/> Volunteering<br/>
<input type="checkbox" id ="Credit-bearing" name="Credit-bearing" value="YES"/> Credit-bearing course<br/>
<input type="checkbox" id="Local-schools" name="Local-schools" value="YES"/> Working with local schools and / or young people<br/>
<input type="checkbox" name="Elderly" value="YES"/> Working with elderly people<br/>
<input type="checkbox" name="Environmental" value="YES"/> Environmental or sustainability<br/>
<input type="checkbox" name="Edinburgh" value="YES"/> Based in Edinburgh or the Lothians<br/>
<input type="checkbox" name="Scotland" value="YES"/> Based in Scotland (excluding Edinburgh or the Lothians)<br/>
<input type="checkbox" name="UK" value="YES"/> Based in the UK<br/>
<input type="checkbox" name="International" value="YES"/> Based internationally<br/>
<input type="checkbox" name="Online" value="YES"/> Online component<br/>
<input type="checkbox" onclick="toggle('Other_theme')" name="Other"> Other<br/>
<div id="other_theme" style="display:none;">
<input type="text" class="singleline1" id="Other_theme" name="Other_theme" required="">
</div>
</div>
</div>
<div>
<p class="label1">Student cohort*</p>
<div class="checkbox">
<input type="checkbox" name="Undergraduate" value="YES"> Undergraduate<br>
<input type="checkbox" name="Masters" value="YES"> Postgraduate (Masters)<br>
<input type="checkbox" name="PhD" value="YES"> Postgraduate (Research)<br>
</div>
</div>
<p class="label1">Why did you do it? *</p>
<textarea name="WhyDid"></textarea>
<p class="help-block">A brief outline of the reasons behind the practice described - its purpose and benefits. What change was it intended to make or problem was it designed to solve?</p>
<br>
<p class="label1">What went well? *</p>
<textarea name="WhatWell"></textarea>
<p class="help-block">A brief outline of what worked well for you/ your organisation. What were the highlights? Did you receive any positive feedback?</p>
<br>
<p class="label1">What might you have done differently? *</p>
<textarea name="WhatDifferently"></textarea>
<p class="help-block">A brief outline of any particular challenges faced and how these were addressed. Please also say if you are planning any changes or further developments.</p>
<br>
<p class="label1">Scalability and transferability *</p>
<textarea name="Scalability"></textarea>
<p class="help-block">Is this practice scalable and transferable? What is the potential for it being expanded and/or run elsewhere in the University? A brief outline of workload commitments in setting up and maintaining the practice would also be useful.</p>
<br>
<p class="label1">Further information *</p>
<textarea name="FurtherInfo"></textarea>
<p class="help-block">e.g. website or publications, materials used, presentation slides, screen shots, testimonials. A couple of quotes from community members, students or staff illustrating the case study would be particularly useful.</p>
<br>
<p class="label1">Location of practice *</p>
<textarea name="Location"></textarea>
<p class="help-block">Name of community partner, academic School/ support service involved (if applicable).</p>
<br>
<div id="author1" class="clonedInput">
<p id="author" class="label1">Author </p>
<div class="row">
<div class="col-md-1 col-sm-6 col-xs-4">
<input id="title" name="title" type="text" placeholder="" class="input_title textboxstyle">
<p id="help-block-title" class="help-block-title">Title</p>
</div>
<div class="col-md-2">
<input id="first_name" name="first_name" type="text" placeholder="" class="input_fn textboxstyle">
<p id="help-block-fn" class="help-block-fn">First Name</p>
</div>
<div class="col-md-2">
<input id="last_name" name="last_name" type="text" placeholder="" class="input_ln textboxstyle">
<p id="help-block-ln" class="help-block-ln">Last Name</p>
</div>
<div class="col-md-2">
<input id="email" name="email" type="email" placeholder="abc#example.com" class="input_email textboxstyle">
<p id="help-block-email" class="help-block-email">Email</p>
</div>
<div class="col-md-1 col-sm-1 col-xs-2">
<input id="contact" name="contact" type="checkbox" value="YES" class="contact">
<p id="help-block-checkbox" class="help-block-checkbox">Contact</p>
</div>
<div class="col-md-2 col-sm-2 col-xs-4">
<input id="btnAdd" name="btnAdd" type="button" class="btn btn-info" value="Add author">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<input id="btnDel" name="btnDel" type="button" class="btn btn-danger" value="Remove author">
</div>
</div>
</div>
<p class="label1">Date*</p>
<div>
<div class="datebox">
<input id="date" class="date" name="engagement">
<p class="help-block">When the engagement activity took place</p>
</div>
</div>
<div>
<p class="label1">Note for authors</p>
<div>
<input name="note1" type="checkbox" value="YES"><p class="prg-text"> 1) The full case study (in this template format) will be included on a public wiki database.</p>
</div>
<div>
<input name="note2" type="checkbox" value="YES"><p class="prg-text"> 2) The Student Community Engagement team will produce a summary version of each case study suitable for an external and internal audience. Authors will be asked to approve these public versions of their case studies before they are made available on open websites. These case studies will be available as .pdf downloads and other formats suitable for printing and inclusion in publications, as web pages and for presentations. These will be available on the public section of the Student Community Engagement website and linked to other key sites.</p>
</div>
<p class="help-block">The case study will be used in two ways and consent of author is required for both.</p>
</div>
<br><br>
<input class="submit btn btn-primary" type="submit" name="submit" value="submit">
</div>
</form>
</body>
I want to create a edit profile Form. But my task is that my editprofile.js doesn't execute. But I give editprofile.js path in between head tag.
But It doesn't load the JavaScript file, how connect node JavaScript with AngularJS JavaScript?
<!DOCTYPE html>
<html ng-app="payloads">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Payload | Edit</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- SPELLS -->
<script src="/editprofile.js"></script>
<!-- load angular -->
</head>
<div id="column-content">
<img alt="payload" src="/images/logo.png">
<myspan>Payload</myspan>
</div>
<body ng-controller="myCtrl">
<div style="float:right; position:fixed ; right:0 ; bottom:0">
<img>
</div>
<!-- You only need this form and the form-basic.css -->
<form class="form-basic" method="post" action="/kyc/edit">
<div class="form-row">
<div class="fontSize">KYC</div>
</div>
<div class="form-row">
<div class="greyColor">Know Your Customer</div>
</div>
<div class="form-row">
<div class="ss-required-asterisk" aria- hidden="true">* Required</div>
</div>
<div class="form-row">
<label>
<span>LegalName*</span>
<input type="text" name="name" ng-model="name" required>
</label>
</div>
<div class="form-row">
<label>
<span>CNIC Number*</span>
<input name="cnic" ng-model="cnic" required>
</label>
</div>
<div class="form-row">
<label>
<span>Father Name*<br></span>
<input name="fatherName" ng-model="fatherName" required>
</label>
</div>
<div class="form-row">
<label>
<span>Occupation*</span>
<input name="occupation" ng-model="occupation" required>
</label>
</div>
<div class="form-row">
<label>
<span>NTN Number</span>
<input name="ntn" ng-model="ntn">
</label>
</div>
<div class="form-row">
<div class="fontSize">Contact Details</div>
</div>
<div class="form-row">
<button type="submit">Save Changes</button>
</div>
</form>
</body>
</html>
editprofile.js
This is JavaScript file that show the user profile data in input text field.
var app = angular.module('payloads', []);
var userController = require('./controllers/userController').profileDataArray;
var profiledata = [];
profiledata = profiledata.concat(userController());
app.controller('myCtrl', function($scope) {
$scope.name = profiledata[0];
$scope.cnic = profiledata[1];
$scope.fatherName = profiledata[2];
$scope.occupation = profiledata[3];
$scope.ntn = profiledata[4];
});
With the require call in editprofile.js you appear to be trying to load server-side NodeJS code from within your client-side UI code. That doesn't work.
Your client and server need to be able to communicate, most likely over AJAX (e.g. using Angular's $http methods on the client and using http.createServer on the server side).
I'm creating a simple AngularJS app using ng-clip. This is my code:
<!doctype html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="src/ZeroClipboard.min.js"></script>
<script src="src/ngClip.js"></script>
</head>
<body>
<div ng-app="myapp">
<div class="container" ng-controller="myctrl">
<div class="page-header">
<h3>Simple Script</h3>
</div>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="" ng-model="name">
</div>
<div class="form-group">
<label>Gender</label>
<input type="radio" ng-model="gender" value="Male"> Male <input type="radio" ng-model="gender" value="Female"> Female
</div>
<div class="form-group">
<label>DOB</label>
<input type="text" class="form-control" placeholder="" ng-model="dob">
</div>
<p><strong>Preview</strong></p>
<p ng-model="final">Name: {{name}}<br/>
Gender: {{gender}}<br/>
DOB: {{dob}}</p>
<button class="btn btn-default" clip-copy="final">Copy!</button>
<br><br>
<textarea class="form-control" rows="3" placeholder="Test here"></textarea>
</form>
</div>
</div>
<script>
var myapp = angular.module('myapp', ["ngClipboard"]);
myapp.config(['ngClipProvider', function(ngClipProvider) {
ngClipProvider.setPath("src/ZeroClipboard.swf");
}]);
myapp.controller('myctrl', function ($scope) {
$scope.fallback = function(copy) {
window.prompt('Press cmd+c to copy the text below.', copy);
};
$scope.showMessage = function() {
console.log("clip-click works!");
};
});
</script>
</body >
</html>
Plunker Preview
Plunker Code
When I click on the "Copy!" button, I couldn't copy all text inside the final p element.
How to copy entire text inside the final p element into my clipboard?
It will definately not work as per doc ng-model cannot applied to paragraph("<p>") tag.
The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope using NgModelController, which is
created and exposed by this directive.
I am trying to use parsley.js validation using simple form but is not working. My cdn is working correctly but I am not getting any validation. The code is:
<!doctype html>
<html>
<head>
<title>Parsley.js form validation</title>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.6/parsley.min.js"></script>
<link rel="stylesheet"type="text/css"href="css/bootstrap.min.css">
<script>
$('.parsley-validate').parsley();
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6 offset3">
<h2>Parsley.JS</h2>
<form role="form" class="parsley-validate" data-validate="parsley">
<label>Name</label>
<input type="text" class="form-control" name="name" data-parsley-required="true"><br/>
<label>Email</label>
<input type="text" class="form-control" name="name" data-parsley-required="true" data-parsley-type="email" data-parsley-trigger="change" /><br/>
<label>Website</label>
<input type="text" name="name" class="form-control" data-parsley-required="true" data-parsley-type="url" data-parsley-trigger="change" /><br/>
<input type="button" value="submit" class="btn btn-success"/>
</form>
</div>
</div>
</div>
</body>
</html>
You are calling $('.parsley-validate').parsley(); in the <head> before the form exists. Move the script to the end of the <body> or wrap it in a document ready:
<script>
$(function(){
$('.parsley-validate').parsley();
})
</script>
I don't believe you need to use the data tags to validate if you are calling $('.parsley-validate').parsley();. Look at the warning under this section on the docs: Parsley.js Javascript Installation
EDIT: I should have been more specific, you don't need data-validate='parsley on the form when also using $('.parsley-validate').parsley(). That is what the above link points out. Of course, you can still use data tags on elements to define validations.