I'm testing the waters with HTML/CSS/Javascript. I have a (moderately) firm grasp of the three languages separately, it's just trying to get them to cooperate with each other that is giving me issues.
My CSS and Javascript files are linked externally to my HTML file.
I'm trying to get Javascript to save user input in a variable and show the text in an alert window.
function saveUn() {
var username = document.getElementById('un').value;
alert(username);
}
<form>
Username:
<input type="text" size="12" id="un" /><br />
<input type="submit" onclick="saveUn();" />
</form>
Any help is greatly appreciated!
UPDATE: It turns out my problem was, in fact, that I didn't insert my external Javascript file correctly. I fixed it, and now my code works just fine. Typos ruin lives, kids.
try with event.preventDefault();
function saveUn(event) {
var username = document.getElementById('un').value;
alert(username);
event.preventDefault();
}
<form>
Username:
<input type="text" size="12" id="un" /><br />
<input type="submit" onclick="saveUn(event);" />
</form>
Let your callback return false and pass that on to the onclick handler:
<form>
Username:
<input type="text" size="12" id="un" /><br />
<input type="submit" onclick="return saveUn();" />
</form>
function saveUn() {
var username = document.getElementById('un').value;
alert(username);
return false;
}
Here is the Code that might help you.
document.getElementById("clickHere").addEventListener("click", function(event){
event.preventDefault()
var username = document.getElementById('un').value;
alert(username);
});
<form >
Username:
<input type="text" size="12" id="un" /><br />
<input type="submit" id="clickHere" />
</form>
Try this one if you do not want to submit the form and just want display an alert:
<form onSubmit = "return saveUn();">
Username:
<input type="text" size="12" id="un" /><br />
<input type="submit" />
</form>
<script>
function saveUn() {
var username = document.getElementById('un').value;
alert(username);
return false;
}
</script>
You can return boolean value for saveUn(), return false if you do not want to submit
function saveUn() {
var username = document.getElementById('un').value;
alert(username);
return false;
}
<form>
Username:
<input type="text" size="12" id="un" /><br />
<input type="submit" onclick="return saveUn();" />
</form>
Using ES6 this should be better:
<form >
Username:
<input type="text" size="12" id="un" /><br />
<input type="submit" id="clickHere" />
</form>
const smBtn = document.querySelector("clickHere");
smBtn.addEventListener("click", (event) => {
event.preventDefault()
let username = document.querySelector('un').value;
alert(username);
});
Related
I had multi tag input the same name.I had insert into Mysql success. But it's reload page. I want insert into mysql , then it's without reload page. I know use Ajax for this. But i don't know must how i do. Who can help me?Thanks
HTML :
<form id="students" action="insert.php" method="post">
a :<input name="c1[]" type="text" />
b :<input name="c2[]" type="text" />
c :<input name="c3[]" type="text" />
</br>
a :<input name="c1[]" type="text" />
b :<input name="c2[]" type="text" />
c :<input name="c3[]" type="text" />
</br>
a :<input name="c1[]" type="text" />
b :<input name="c2[]" type="text" />
c :<input name="c3[]" type="text" />``
<input type="submit" value="submit" id="submitbutton" class="insert" />
</form>
<script>
$('#students').submit(function() {
$.post('insert.php', $('form#students').serialize())
});
</script>
and "insert.php"
$a1=$_POST['c1'];
$b1=$_POST['c2'];
$c1=$_POST['c3'];
$index=0;
foreach($a1 as $s){
$sql = "INSERT INTO test(col_a,col_b,col_c) VALUES('$s','".$b1[$index]."','".$c1[$index]."')";
mysql_query($sql);
$index++;
}
You can send this form via Jquery Post method. For example
$.post(
'insert.php',
$('#students').serialize(),
function(data){
console.log(data);
}
)
You simply have to trigger this function on any event like on hover,click, keyup or any thing.
With JQuery it's simple:
$('#students').submit(function() {
var self = $(this);
$.post(self.attr('action'), self.serializeArray(), function() {
// do something after ajax complete
});
return false; // prevent submiting the form
});
I have a Delete button in my PHP page which deletes a record.
But when I delete that button I do a confirm box with:
<form action="log.php" method="post" onsubmit="return confirm('Are you sure?');">
Can I make it so when they confirm they have to fill in a password?
So what I mean is something like this
<form action="log.php" method="post" onsubmit="return confirm('password :');">
And then they have to fill in a password
Thanks in advance.
Hi You Need some thing like this, Modify according to your requirements
<script>
function do_check()
{
var return_value=prompt("Password:");
if(return_value==="your_password")
return true;
else
return false;
}
</script>
<form action="log.php" method="post" onsubmit="return do_check();">
Try using input type="password" , required attribute` ; disable submit until password set
document.forms["form"].querySelector("input[type=button]").onclick = function(e) {
e.preventDefault();
this.nextElementSibling.disabled = false;
this.nextElementSibling.nextElementSibling.disabled = false;
}
<form name="form">
<input type="button" value="Are you sure?" />
<input type="password" minlength="3" maxlength="7" required disabled />
<input type="submit" disabled />
</form>
document.forms["form"].querySelector("input[type=button]").onclick = function(e) {
e.preventDefault();
this.nextElementSibling.disabled = false;
this.nextElementSibling.nextElementSibling.disabled = false;
}
<form name="form">
<input type="button" value="Are you sure?" />
<input type="password" minlength="3" maxlength="7" required disabled />
<input type="submit" disabled />
</form>
I want to validate a input fields of form in javascript. I have searched a lot on net and always got different ways to do it. It was so confusing. I want for every single input if it is left empty an alert should popup. Here is my code
<form method="post" action="form.html" id="FormContact" name="frm">
<p>Full Name: <br /><br /> <input type="text" name="FullName" size="50" id="Name"></p>
<span id="error"></span>
<p>Email:<br /><br /> <input type="email" name="Email" size="50" id="Mail"></p>
<p> Subject:<br /><br /> <input type="text" name="subject" size="50" id="Subject"></p>
Message:<br /><br />
<textarea rows="15" cols="75" name="Comment" id="text">
</textarea> <br /><br />
<input type="submit" value="Post Comment">
</form>
I got it done sometimes but that only worked for Full Name field.
Thanks and regards,
You can do something like this, to have an alert popup for each empty input.
$('form').on('submit', function(){
$('input').each(function(){
if($(this).val() === ""){
alert($(this).attr('name') + " is empty");
}
});
});
http://www.w3schools.com/js/js_form_validation.asp
if you're willing to use javascript, this would be pretty easy to implement.
use jquery validation plugin.
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$("#FormContact").validate({
rules: {
FullName: {
required:true
}
},
messages:{
FullName:{
required:"Please Enter FullName."
}
}
});
</script>
USE submit method of jquery the use each loop to validate the controls
LIVE CODE
$('form#FormContact').submit(function(){
var i= 0;
$('input').each(function(i,j){
if($(this).val() == "" || $(this).val() == undefined){
alert('empty');
i++;
}else{
i=0;
}
})
if(i == 0){
return false;
}else{
return true;
}
})
I am trying to build a website with a webform. I am using Godaddy's default webform PHP and I am not sure how to validate the form for required fields.
I want the user to not be able to submit the form prior to validation. I found JavaScript files online submitted by other users that address this problem but I can not seem to get it to work.
<script language="javascript" type="text/javascript">
function checkForm() {
if (form.FirstName.value == "") {
alert("Please enter your first name");
form.FirstName.focus();
return false;
}
if (form.LastName.value == "") {
alert("Please enter your last name");
form.LastName.focus();
return false;
}
var email = form.email.value;
if (email.indexOf('#') == -1) {
alert("Plelase enter valid email");
form.email.focus();
return false;
}
return true;
}
</script>
Below is the form:
<form onsubmit="return checkForm()" action="/webformmailer.php" method="post">
<input type="hidden" name="subject" value="Submission" />
<input type="hidden" name="redirect" value="thankyou.html" />
<span>First Name:</span><br>
<input type="text" name="FirstName"/><br>
<span>Last Name:</span><br>
<input type="text" name="LastName" /><br>
<span>*Email:</span><br>
<input type="text" name="email" /><br>
<span>*Comments:</span><br>
<textarea name="comments" cols="40" rows="10">
</textarea><br>
<input type="submit" name="submit" value="submit"/> <span id ="required">*required field</span>
<input type="hidden" name="form_order" value="alpha"/> <input type="hidden" name="form_delivery" value="daily"/> <input type="hidden" name="form_format" value="html"/>
I tried submitting without entering anything and it redirects me to the thank you.
form is not defined in the function. There are several ways to handle this. The simplest would be to change return checkForm() to return checkForm(this) and
function checkForm(form) {
In the form, change checkForm() to checkForm(this). Then, in your javascript, change function checkForm() { to function checkForm(form) {
Maybe this will help.
You forgot 2 thing:
first, please add name="form" into
<form name="form" onsubmit="return checkForm()" action="/webformmailer.php" method="post">
second, you misstake close form, please add this code to end of HTML
</form>
Your HTML will look like:
<form name="form" onsubmit="return checkForm()" action="/webformmailer.php" method="post">
<input type="hidden" name="subject" value="Submission" />
<input type="hidden" name="redirect" value="thankyou.html" />
<span>First Name:</span><br>
<input type="text" name="FirstName"/><br>
<span>Last Name:</span><br>
<input type="text" name="LastName" /><br>
<span>*Email:</span><br>
<input type="text" name="email" /><br>
<span>*Comments:</span><br>
<textarea name="comments" cols="40" rows="10"></textarea><br>
<input type="submit" name="submit" value="submit"/>
<span id ="required">*required field</span>
<input type="hidden" name="form_order" value="alpha"/>
<input type="hidden" name="form_delivery" value="daily"/>
<input type="hidden" name="form_format" value="html"/>
</form>
1 other thing is in javascript, function to check email address is incorrect, Correct is:
var email = form.email.value;
var re = /^[\w-]+(\.[\w-]+)*#([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!email.match(re) || !email) {
// incorrect email address
}
New script will be:
<script language="javascript" type="text/javascript">
function checkForm() {
if (form.FirstName.value == "") {
alert("Please enter your first name");
form.FirstName.focus();
return false;
}
if (form.LastName.value == "") {
alert("Please enter your last name");
form.LastName.focus();
return false;
}
var email = form.email.value;
var re = /^[\w-]+(\.[\w-]+)*#([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!email.match(re) || !email) {
alert("Plelase enter valid email");
form.email.focus();
return false;
}
return true;
}
</script>
Goodluck!
When no value is provided to the roll input field an alert is produced by the empty() function but this empty value is still passed to retrive.php. So how can I stop this from happening and only pass the value to retrive.php when some input value is provided?
<html>
<head>
<title>STUDENT FORM</title>
<script type="text/javascript">
function empty()
{
var x;
x = document.getElementById("roll-input").value;
if (x == "")
{
alert("Enter a Valid Roll Number");
};
}
</script>
</head>
<body >
<h1 align="center">student details</h1>
<div id="input">
<form action='retrive.php' method='get'>
<fieldset>
<legend>Get Details</legend>
<dl>
<dt><label for="roll-input">Enter Roll Number</label></dt>
<dd><input type="text" name="roll" id="roll-input"><dd>
<input type="submit" value="submit" onClick="empty()" />
</dl>
</fieldset>
</form>
</div>
</body>
</html>
You need to return false to cancel the submit.
function empty() {
var x;
x = document.getElementById("roll-input").value;
if (x == "") {
alert("Enter a Valid Roll Number");
return false;
};
}
and
<input type="submit" value="submit" onClick="return empty()" />
jsFiddle example
How about using the required attribute?
<input id="Name" name="Name" class="form-control" placeholder="Enter name" type="text" required/>
Only works in html5 though.
The easiest way is to add attribute "required" into the input tag
<input type="text" name="name" required>
<form method="post" name="loginForm" id ="loginForm" action="login.php">
<input type="text" name="uid" id="uid" />
<input type="password" name="pass" id="pass" />
<input type="submit" class="button" value="Log In"/>
<script type="text/javascript">
$('#loginForm').submit(function()
{
if ($.trim($("#uid").val()) === "" || $.trim($("#pass").val()) === "") {
alert('Please enter Username and Password.');
return false;
}
});
</script>
</form>
i use with this I thinking it's maybe can help
$(function () {
$('form').submit(function () {
if ($('input').val() === "") {
alert('Please enter Username and Password.');
return false;
}
});
})
or work with class or ID like this
$('.inputClass')
$('#inputID')
If you want to save code you can simply do:
<input type="text" name="roll" id="roll-input">
<input type="submit" value="submit" onClick="return document.getElementById('roll-input').value !=''"/>
I just say.