I am trying to use the JQuery Ui function "Verfiy();" to verify that the name, age, country and date fields have been filled before allowing the form to submit.
The verify function should be called when the user hits 'submit', however when I use the following code the webpage is directed to the 'thankyou' page whether the fields have been completed or not. It does not show an error message.
<head>
...
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Wayne Nolting (w.nolting#home.com) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://www.javascriptsource.com -->
<!-- Begin
function verify() {
var themessage = "You are required to complete the following fields: ";
if (document.form.name.value=="") {
themessage = themessage + " - Name";
}
if (document.form.age.value=="") {
themessage = themessage + " - Age";
}
if (document.form.country.value=="") {
themessage = themessage + " - Country";
}
if (document.form.date.value=="") {
themessage = themessage + " - Date";
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
document.form.submit();
}
else {
alert(themessage);
return false;
}
}
// End -->
</script>
</head>
<body>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by The JavaScript Source</font>
</center><p>
...
<input type="submit" value="Submit" onClick="verify()"/></div>
<input type=reset value="Clear Form"><br>
...
</body>
Any insight would be greatly appreciated.
Andrew
Here you go, just a little tweak in your markup.
<input type="submit" value="Submit" onClick="return verify()"/></div>
Related
So today i worked on to create emoji picker in jQuery, PHP and HTML.
The problem is that jQuery is not inserting emojis into the input type, here is my code
<input class="form-control" name="message" placeholder="Enter your message..." maxlength="150" id="shout" required>
<button type="button" onclick="toggleEmojiDrawer()" class="btn btn-primary btn-block mg-b-10">Emojis </button>
</div>
<div class="body hidden" id="emojis">
<center>
<?php
$result = mysqli_query($con, "SELECT * FROM `emojis` ") or die(mysqli_error($con));
while($row = mysqli_fetch_assoc($result)) {
echo "
<img class='icon' onclick='addEmoji(this.innerHTML)' src='".$row['url'] ."' alt='".$row['Wut'] ."' height='20' width='20' />
<script>
function addEmoji(icon) {
let inputEle = document.getElementById('shout');
input.value += icon;
}
function toggleEmojiDrawer() {
let drawer = document.getElementById('emojis');
if (drawer.classList.contains('hidden')) {
drawer.classList.remove('hidden');
} else {
drawer.classList.add('hidden');
}
}
</script>
";
}
?>
Not sure where to start, but here are some things:
center tag is deprecated, just FYI
you are looping the tag that has a function in it, so you're inserting the same function into DOM multiple times... Take it out of the loop, it should be one function that handles all calls
this is not a PHP question, most likely it's a jquery one, but since we can't see the output of your query because we don't have your tables, I would recommend to click "view source" on your page and paste in the source here so we can see what you're actually trying to do... but first, remove the functions from the loop. :)
I want to develop a loop for chat bubbles. Every time I write a message, a bubble should be created and be on the right. When the chat partner replies, the message should be on the left in the bubble. How can I develop this loop?
My current code is this one:
<div class="Webview">
<div class="message_container" id="myForm"></div>
<form class="send_container">
<input id="textField" type="text">
<p>
<input type="button" id="theButton" value="Nachricht absenden!" onclick="document.getElementById('myForm').innerHTML=document.getElementById('textField').value" />
</p>
<h3>
<div id="div"></div>
</h3>
</form>
</div>
OK, it is not add messages to the DOM in loops, but just add message on Enter on the trigger that sending the message.
If you want to add value from Text Field such as text input,
You probably want to do two steps:
Getting the value from the input
Inject the value into a balloon template (html) and then into the DOM.
Then, you should add Javascript scope into your html or just include js file that contain the following function:
function addMessage() {
// Add XSS validation
const $messages = document.getElementById('myForm');
const $textElement = document.getElementById('textField');
const newMessage = '<div class="message-balloon">' + $textElement.value + '</div>';
$messages.innerHTML += newMessage;
return false;
}
<input type="button" id="theButton" value="Nachricht absenden!" onclick="addMessage()" />
In jQuery it will be like this (in the js scope of course):
$("#theButton").off('click').on('click', function() {
e.preventDefault();
const $messages = $('#myForm');
const $textElement = $('#textField');
const newMessage = '<div class="message-balloon">' + $textElement.value + '</div>';
$messages.html += newMessage;
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="theButton" value="Nachricht absenden!" />
Hope it helps :)
Good luck
I am trying to make a search engine "comparer." By that I mean I am trying to make a local website that takes a search term and makes it into a clickable search engine URL (google, bing, yahoo, etc). I'm starting with Google. The search term needs to go after https://www.google.com/search?q= I don't know how to add the userSearch onto the end of the URL and make the URL into a clickable link. I'm not even sure that I'm gathering the search term correctly.
<!-- Enter search term -->
<form>
<fieldset>
<legend></legend>
<p>
<label>Search Here! (please, no spaces)</label>
<input type = "text"
id = "userSearch"
var = term
/>
</p>
</fieldset>
</form>
<var> gURL = 'https://www.google.com/search?q=' + userSearch </var>
<script type="text/javascript">
<var> searchTerm = "userSearch"; </var>
<var> gURL = "https://www.google.com/search?q=" + 'searchTerm'; </var>
document.getElementById("gURL").src = url;
</script>
<!-- Search URL results -->
<h3>Results</h3>
<fieldset>
<h4 style="text-align:left;">Google.com
If you can help, thank you. I appreciate it.
I used a button and Jquery - but is this what you are trying to do?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#userSearch').click(function() {
var fromForm = "<br>" + '<a href="https://www.google.com/search?q="' +
$('#searchField').val() + ">" + 'https://www.google.com/search?q="' +$('#searchField').val() + '</a>';
$('#outPut').append(fromForm);
});
});
</script>
</head>
<body>
<br>
<!-- Enter search term -->
<form>
<fieldset>
<legend></legend>
<label>Search Here! (please, no spaces)</label> <input type='text' id='searchField' placeholder="Search">
</fieldset>
</form>
<button id='userSearch'>Search</button>
<br>
<div id='outPut'>
</div>
I was able to make my comparer using some different code using multiple guides, but I do really appreciate your feedback. I am putting my code up on a Weebly website ( Click here ) and my goal is to make it a tool that makes it easy to search from different engines. It is mostly just for personal use, but I have it set up where others could find it helpful and useful.
I used this code:
<!-- Enter search term -->
<div>
<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField" float: center; display: block;/>
</div>
<script type="text/javascript">
//creates a listener for when you press a key
window.onkeyup = keyup;
//creates a global Javascript variable
var inputTextValue;
function keyup(e) {
//setting your input text to the global Javascript Variable for every key press
inputTextValue = e.target.value;
//listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
if (e.keyCode == 13) {
window.location = "https://www.google.com/search?q=" + inputTextValue;
}
}
</script>
Thank you for all your guy's help, and I will definitely continue learning.
I have a field that is required to collect a year from the user (i.e. a date with a year resolution - for ease of storage I'd prefer to store an actual date value and not a number).
I would like to use the date input UI supported by modern browsers or webshims because its nice and plays well with modern platforms. I couldn't figure out how to get the UI to display only the year. Any ideas?
If there is no platform support, ideally I would like to have a UI something like you can see here if you click "Preview" and then click the top of the widget a couple of times, except in reverse: when you first click the input you get a widget with a list of decades, then you drill down to choose the year, then the UI closes.
No you can not, but input type number provides exactly the functionality you need for this purpose.
Example:
<input type="number" min="1900" max="2099" step="1" value="2016" />
No, you can't, it doesn't support only year, so to do that you need a script, like jQuery or the webshim link you have, which shows year only.
If jQuery would be an option, here is one, borrowed from Sibu:
Javascript
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy'});
});
CSS
.ui-datepicker-calendar {
display: none;
}
Src: https://stackoverflow.com/a/13528855/2827823
Src fiddle: http://jsfiddle.net/vW8zc/
Here is an updated fiddle, without the month and prev/next buttons
If bootstrap is an option, check this link, they have a layout how you want.
There is input type month in HTML5 which allows to select month and year. Month selector works with autocomplete.
Check the example in JSFiddle.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Select a month below</h1>
</header>
Month example
<input type="month" />
</body>
</html>
You can do the following:
Generate an Array of the years I'll be accepting,
Use a select box.
Use each item from your Array as an 'option' tag.
Example using PHP (you can do this in any language of your choice):
Server:
<?php $years = range(1900, strftime("%Y", time())); ?>
HTML
<select>
<option>Select Year</option>
<?php foreach($years as $year) : ?>
<option value="<?php echo $year; ?>"><?php echo $year; ?></option>
<?php endforeach; ?>
</select>
As an added benefit, this has a 100% browser compatibility ;-)
Add this code structure to your page code
<?php
echo '<label>Admission Year:</label><br><select name="admission_year" data-component="date">';
for($year=1900; $year<=date('Y'); $year++){
echo '<option value="'.$year.'">'.$year.'</option>';
}
?>
It works perfectly and can be reverse engineered
<?php
echo '<label>Admission Year:</label><br><select name="admission_year" data-component="date">';
for($year=date('Y'); $year>=1900; $year++){
echo '<option value="'.$year.'">'.$year.'</option>';
}
?>
With this you are good to go. 😉
I try with this, no modifications on the css.
$(function() {
$('#datepicker').datepicker({
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
onClose: function(dateText, inst) {
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, 1));
}
});
$("#datepicker").focus(function() {
$(".ui-datepicker-month").hide();
$(".ui-datepicker-calendar").hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<p>Date: <input type="text" id="datepicker" /></p>
Example code jsfiddle
<!--This yearpicker development from Zlatko Borojevic
html elemnts can generate with java function
and then declare as custom type for easy use in all html documents
For this version for implementacion in your document can use:
1. Save this code for example: "yearonly.html"
2. creaate one div with id="yearonly"
3. Include year picker with function: $("#yearonly").load("yearonly.html");
<div id="yearonly"></div>
<script>
$("#yearonly").load("yearonly.html");
</script>
-->
<!DOCTYPE html>
<meta name="viewport" content="text-align:center; width=device-width, initial-scale=1.0">
<html>
<body>
<style>
.ydiv {
border:solid 1px;
width:200px;
//height:150px;
background-color:#D8D8D8;
display:none;
position:absolute;
top:40px;
}
.ybutton {
border: none;
width:35px;
height:35px;
background-color:#D8D8D8;
font-size:100%;
}
.yhr {
background-color:black;
color:black;
height:1px">
}
.ytext {
border:none;
text-align:center;
width:118px;
font-size:100%;
background-color:#D8D8D8;
font-weight:bold;
}
</style>
<p>
<!-- input text for display result of yearpicker -->
<input type = "text" id="yeardate"><button style="width:21px;height:21px"onclick="enabledisable()">V</button></p>
<!-- yearpicker panel for change only year-->
<div class="ydiv" id = "yearpicker">
<button class="ybutton" style="font-weight:bold;"onclick="changedecade('back')"><</button>
<input class ="ytext" id="dec" type="text" value ="2018" >
<button class="ybutton" style="font-weight:bold;" onclick="changedecade('next')">></button>
<hr></hr>
<!-- subpanel with one year 0-9 -->
<button class="ybutton" onclick="yearone = 0;setyear()">0</button>
<button class="ybutton" onclick="yearone = 1;setyear()">1</button>
<button class="ybutton" onclick="yearone = 2;setyear()">2</button>
<button class="ybutton" onclick="yearone = 3;setyear()">3</button>
<button class="ybutton" onclick="yearone = 4;setyear()">4</button><br>
<button class="ybutton" onclick="yearone = 5;setyear()">5</button>
<button class="ybutton" onclick="yearone = 6;setyear()">6</button>
<button class="ybutton" onclick="yearone = 7;setyear()">7</button>
<button class="ybutton" onclick="yearone = 8;setyear()">8</button>
<button class="ybutton" onclick="yearone = 9;setyear()">9</button>
</div>
<!-- end year panel -->
<script>
var date = new Date();
var year = date.getFullYear(); //get current year
//document.getElementById("yeardate").value = year;// can rem if filing text from database
var yearone = 0;
function changedecade(val1){ //change decade for year
var x = parseInt(document.getElementById("dec").value.substring(0,3)+"0");
if (val1 == "next"){
document.getElementById('dec').value = x + 10;
}else{
document.getElementById('dec').value = x - 10;
}
}
function setyear(){ //set full year as sum decade and one year in decade
var x = parseInt(document.getElementById("dec").value.substring(0,3)+"0");
var y = parseFloat(yearone);
var suma = x + y;
var d = new Date();
d.setFullYear(suma);
var year = d.getFullYear();
document.getElementById("dec").value = year;
document.getElementById("yeardate").value = year;
document.getElementById("yearpicker").style.display = "none";
yearone = 0;
}
function enabledisable(){ //enable/disable year panel
if (document.getElementById("yearpicker").style.display == "block"){
document.getElementById("yearpicker").style.display = "none";}else{
document.getElementById("yearpicker").style.display = "block";
}
}
</script>
</body>
</html>
So I have been sitting here racking my brain for a few hours and just cannot seem to find what I have wrong here. I am trying to get my form to send the information that the user inputs to my email. When I click send nothing happens... Anything would help! Thanks!
Here is the code I have atm:
Email me!
<div class="formCenter">
<form action="MAILTO:myemail#yahoo.com" method="post" enctype="text/plain">
First Name:<br>
<input type="text" name="firstName"><br>
Last Name:<br>
<input type="text" name="lastName"><br>
Email:<br>
<input type="text" name="email"><br>
Comments:<br>
<textarea name="commentBox" rows="6" cols="40"></textarea><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</div>
Okay so you have to send the Action to a page like Email.PHP (or ASP.net ect) which will process your POST variables.
Example:
<?php
$firstame = $_POST['firstName'];
?>
You then have to use Mail(), which will work on most servers but sometimes it won't so you can use a tool like PHPMailer which is an object orientated tool.
As you are providing the link as MAILTO, it opens up your local mail client to send an email with the POST variables listed, which is very unprofessional at best. You are better off having a link that goes to MAILTO for the time being, perhaps with a hidden value like or something like that, so when they open the client it automatically generates an email that they can just click. With that being said, you would keep your form layout as it is, but just swap out variables so they don't appear.
The reason you didn't see anything when you clicked Send is because even though your TYPE is a submit, you sometimes need the Value and/or Name to be Submit. Some browsers and servers will treat it differently, even frameworks like Bootsrap. If you change your name and value to Submit then change one back to Send to see what works for you, you can keep it in the Send format, given that it works.
I hope this helps.
you can try this one:
<?php
if($_POST["message"]) {
mail("your#email.address", "Form to email message", $_POST["message"], "From: an#email.address");
}
?>
see this page http://htmldog.com/techniques/formtoemail/
The form itself is not able to send the email. What the code does is prompts you to select email client software such as Outlook.
Did you check whether your email client software work properly? A reboot of machine is also a mean of troubleshooting.
JavaScript
function submitEmail() {
var fname = $.trim($("#txtfname").val());
var lname = $.trim($("#txtlname").val());
var email = $.trim($("#txtemail").val());
var comments = $.trim($("#txtComments").val());
if (isValidEmail(email) && (fname.length > 1) && (lname.length > 1)) {
$.ajax({
type: "POST",
url: "index.aspx/SubmitEmail",
data: "{'Email':'" + $.trim($("#txtemail").val()) + "'," + "'FName':'" + $.trim($("#txtfname").val()) + "'," + "'LName':'" + $.trim($("#txtlname").val()) + "'," + "'Comments':'" + $.trim($("#txtComments").val()) + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.d != "null") {
var JsonObj = $.parseJSON(response.d);
if (JsonObj._Status == "OK") {
alert('Success Email :)')
}
else {
alert(JsonObj._Message);
}
}
},
failure: function (msg) {
alert(msg);
}
});
}
else {
return false;
}
}
function isValidEmail(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
<WebMethod()> _
Public Shared Function SubmitEmail(ByVal Email As String, ByVal FName As String, ByVal LName As String, ByVal Comments As String) As String
Dim _serializer = New JavaScriptSerializer()
Dim jSonRes As String = String.Empty
Dim MyString As New StringBuilder()
MyString.Append("First Name: " & FName).Append(Environment.NewLine)
MyString.Append("Last Name: " & LName).Append(Environment.NewLine)
MyString.Append("Email Address: " & Email).Append(Environment.NewLine)
MyString.Append("Comments: " & Comments).Append(Environment.NewLine)
Try
Dim Message As New Net.Mail.MailMessage("Do-Not-Reply#test.com", "myemail#yahoo.com")
Message.CC.Add("test#test.com,test#test.com")
Message.Subject = "New Request from " & FName & " " & LName
Message.IsBodyHtml = False
Message.Body = MyString.ToString()
Dim SmtpMail As New System.Net.Mail.SmtpClient
SmtpMail.Host = "localhost"
SmtpMail.Send(Message)
jSonRes = _serializer.Serialize(New With {._Status = "OK", ._Message = ""})
Catch ex As Exception
jSonRes = _serializer.Serialize(New With {._Status = "Error", ._Message = ex.Message})
End Try
Return jSonRes
End Function
<form action="index.aspx/submitEmail" method="post" enctype="text/plain">
First Name:<br>
<input type="text" name="firstName" id="fname"><br>
Last Name:<br>
<input type="text" name="lastName" id="lname"><br>
Email:<br>
<input type="text" name="email" id="txtemail"><br>
Comments:<br>
<textarea name="commentBox" rows="6" cols="40" id="txtComments"></textarea><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
This is the correct way to send a email. You can also use a php or C# code for sending a email. I have used vb.net code(webmethod) for sending email.