Having Trouble with Href in form

Having Trouble with Href in form - javascript

I am trying to create a form that will give an alert if a field is empty, or if the fields are not empty then it will take the user to a new page(this page does exist) I have tried replacing 'button' with 'input', but still no hope
<div id='signupbox'>
<div class="formbox">
<h1>My first contact form</h1>
<p style="color:red;">Anything With a * is required</p>
<br>
<form name="app-form" onsubmit="return validateForm()" method="post">
<input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />
<input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
<select name="languages" id="lang" class="feedback-input">
<option value="javascript">Select a language</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
<button type='submit' onclick="return validateFormData(); Link();" >SUBMIT</button>
</form>
</div>
</div>
</body>
<script>
function validateForm() {
let x = document.forms["app-form"]["Fname"].value;
let y = document.forms["app-form"]["Email"].value;
if ((x == "") || (y=='')) {
alert("Required Fields Must be Filled Out.");
return false;}}
function Link(){
document.location.href = "SuccessPage.html";
}
</script>

Also oninvalid attribute does give an alert if the case is to warn the user by showing an alert:
<input
name="Fname"
id='Fname'
type="text"
class="feedback-input"
oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Fname" />
<input
name="Email"
id='Email'
type="text"
class="feedback-input"
oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Email" />
Check HTML oninvalid Event Attribute for detailed information.

Your onClick method is wrong. It should be this:
<button type='submit' onclick="validateFormData()" >SUBMIT</button>
In your validateFormData method you should check to make sure the form has data, if it does then you call your Link() method. If it doesn't, display an alert.

firstly, if you want a good form page, you have to prevent default behaves like page renewing thus you can have so good form validating process. I edited your code please use this.
<div id='signupbox'>
<div class="formbox">
<h1>My first contact form</h1>
<p style="color:red;">Anything With a * is required</p>
<br>
<form name="app-form" method="post">
<input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />
<input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
<select name="languages" id="lang" class="feedback-input">
<option value="javascript">Select a language</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
<button type='submit' id="button" >SUBMIT</button>
</form>
</div>
</div>
</body>
<script>
document.getElementById("button").addEventListener("submit", function validateForm(e) {
e.preventDefault();
let x = document.getElementById("Fname").value;
let y = document.getElementById("Email").value;
if (!x || !y) {
alert("Please fill required areas.")
return
} else {
window.location.href="/SuccessPage.html"
}}
)
</script>

Related

remove the value set in input field's value attribute after submitting the form

I am using HTML, bootstrap, php, MySQL, and Ajax. I want that when I submit the form the value set in the input field's value attribute become null. I am badly stuck here. Can anyone please advice me that how can I solve this problem?? Thanks in advance guys. codes are given below :
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value="12"><br>
<label>Name : </label>
<input type="text" name="name" id="name" value="Sneha"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
$('.btn-submit').click(function() {
$.ajax({
url:"insert.php",
method:"POST",
data:$('#cForm').serialize(),
success:function(data)
{
document.getElementById("cForm").reset();
$("input[type='text']").val('');
}
});
});
});
</script>

First of all you should remove default values of input fields, because on submit the page refreshes and default values will popup. Next you should create an event listener "submit". Once it is present find the nodes with input and replace the value with empty string. The working sample is bellow:
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value=""><br>
<label>Name : </label>
<input type="text" name="name" id="name" value=""><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
<input type="submit" class="btn-modify" name="modify" value="Modify">
</form>
<script>
const form = document.querySelector('#cForm');
let inputs = form.getElementsByTagName('input')
form.addEventListener('submit', function() {
console.log('Submit');
inputs.name.value = '';
inputs.roll.value = '';
inputs.age.value = '';
})
</script>
Don't forget to remove default value from input!!! Otherwise you will see them after submit.

Just use $("input[type='text']").val(''); to remove the values hardcoded in the input's value tag.
$("#cForm").on("submit", function(e) {
e.preventDefault();
$("input[type='text']").val('');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value="112"><br>
<label>Name : </label>
<input type="text" name="name" id="name" value="john"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
<input type="submit" class="btn-modify" name="modify" value="Modify">
</form>
EDIT
You are using ajax to submit the form so you should add the line $("input[type='text']").val(''); inside you ajax success callback function
$.ajax({
url:'/some-url/file.php',
success:function(data){
//your code to check if the save was success full
//and if yes then reset the form inputs
$("input[type='text']").val('');
}
});

custom message still showing after form input is filled

I'm doing a client-side form validation while setting the custom warning messages, but that same pop-up message keeps showing even when the input is filled with the name.
For example i have an input field to get the user name on the code below:
<form id="form" name="contactForm" method="post" action="php/formulario_contactos.php">
<div>
<label for="name">Your name</label>
<input type="text" id="name" name="name" required="">
</div>
<div>
<label for="mail">Your email</label>
<input type="email" id="mail" name="user_mail" required="">
</div>
<div>
<label for="topic">Select Topic</label>
<select id="topic" name="topic" required="">
<option selected disabled hidden value="">Choose a Topic</option>
<option value="link">Site Link</option>
<option value="copyright">Copyright</option>
<option value="errors">Site/Article errors</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="msg">Your message</label>
<textarea id="msg" name="user_message" required=""></textarea>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
And i wrote the javascript code below to change the default browser error message to the one below:
var inputName = document.getElementById('name');
var form = document.getElementById('form');
form.onsubmit = validateForm();
function validateForm() {
if(inputName.value === ""){
inputName.setCustomValidity("Name is required");
return false;
} else {
inputName.setCustomValidty("");
}
}
What am i doing incorrectly?

There were two issues in your JavaScript that were causing your validation to break:
The validateForm function was running on page load, rather than when the user submits the form. I've added in a revised event handler to resolve this
A spelling error was generating an error: setCustomValidty should be setCustomValidity
The following code fixes those issues.
HTML:
<form id="form" name="contactForm" method="post" action="php/formulario_contactos.php">
<div>
<label for="name">Your name</label>
<input type="text" id="name" name="name" required="">
</div>
<div>
<label for="mail">Your email</label>
<input type="email" id="mail" name="user_mail" required="">
</div>
<div>
<label for="topic">Select Topic</label>
<select id="topic" name="topic" required="">
<option selected disabled hidden value="">Choose a Topic</option>
<option value="link">Site Link</option>
<option value="copyright">Copyright</option>
<option value="errors">Site/Article errors</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label for="msg">Your message</label>
<textarea id="msg" name="user_message" required=""></textarea>
</div>
<div class="button">
<button id="submit" type="submit">Submit</button>
</div>
</form>
JavaScript:
var inputName = document.getElementById('name');
var form = document.getElementById('form');
var submitButton = document.getElementById("submit");
submitButton.onclick = function () { validateForm(); };
function validateForm() {
if(inputName.value === ""){
inputName.setCustomValidity("Name is required");
return false;
} else {
inputName.setCustomValidity("");
}
}

how to enable /disable form field based on selection using php

I am create the form with for online course. if the existing student refer the student means they will get the money.
My form contain Name,Mobile No,Email Id
Give your referral details as drop down.
Eg: i select 2 in the drop-down means it show the 2 rows form data again
Referral form value contain Name,Mobile No,City,Course Name.
Based on the selection i need to show and hide multiple form fields and
I need put validation and Mobile,City and Course is mandatory field.
Then,I need to capture the refers name and assign the students are created by referrer.
When i select refer as 2 it shows the field value two times how to do it. How to put validation
$(document).ready(function(){
$('select#select_btn').change(function(){
var sel_value = $('option:selected').val();
if(sel_value==0)
{
//Resetting Form
//$("#form_submit").empty();
//$("#form1").css({'display':'none'});
}
else{
//Resetting Form
//$("#form_submit").empty();
//Below Function Creates Input Fields Dynamically
create(sel_value);
//appending submit button to form
$("#form_submit").append(
$("<input/>",{type:'submit', value:'Sumbit'})
)
}
});
function create(sel_value){
for(var i=1;i<=sel_value;i++)
{
$("div#form1").slideDown('slow');
$("div#form1").append(
$("#form_submit").append(
$("<div/>",{id:'head'}).append(
$("<h3/>").text("Refer Form"+i)),
$("<h7/>").text("Name: "),
$("<input/>", {type:'text', placeholder:'Name', name:'name_'+i}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Mobile No: "),
$("<input/>", {type:'text', placeholder:'Mobile', name:'mobile'+i}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Email: "),
$("<input/>", {type:'email', placeholder:'Email', name:'email_'+i}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("City: "),
$("<select>").append('<option val="0">--Select--</option>','<option val="1">One</option>','<option val="2">Two</option>','<option val="3">Three</option>','<option val="4">Four</option>','<option val="5">Five</option>'),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Course: "),
$("<select>").append('<option val="0">--Select--</option>','<option val="1">One</option>','<option val="2">Two</option>','<option val="3">Three</option>','<option val="4">Four</option>','<option val="5">Five</option>'),
$("<hr/>"),
$("<br/>")
))
}
}
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class ="container">
<div id="form1">
<form id="form_submit" action="#" method="post">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p> Refer:
<div id="selected_form_code">
<select id="select_btn">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<!-- dynamic Registration Form Fields Creates here-->
</form>
</div>
<!------ right side advertisement div ----------------->
</div>
<?Php
print_r($_REQUEST);
?>
when i select the refer as 2 and then it shows refer form fields 2 times.... i change refer field from 2 to 1 it shows one times of refer field.But,Now its show 3 times(2+1). How to do it....Where i did wrong????

$(document).ready(function(e) {
$("#select_btn").val('0');
$('#select_btn').change(function(e) {
var selno = $(this).val();
$('#input').empty();
for(i=0; i < selno; i++ ){
$('#input').append('<div class="input'+i+'"><h2>'+(i+1)+'</h2><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<p>Change the age field and see what happens</p>
<div id="form1">
<form id="form_submit" action="#" method="post">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Refer:
<select id="select_btn" name="refer" value="0">
<option value="0">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<div id="input">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
</div>

$(document).ready(function(e) {
$('#select_btn').change(function(e) {
var selno = $(this).val();
$('.input').remove();
for(i=0; i < selno; i++ ){
$('#input').append('<div class="input'+i+'"><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<p>Change the age field and see what happens</p>
<div id="form1">
<form id="form_submit" action="#" method="post">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Refer:
<select id="select_btn" name="refer">
<option >select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<div id="input">
<div class="input">
<p> Name:
<input type="text" name="name" />
</p>
<p> Mobile:
<input type="text" name="mob" />
</p>
<p>Email:
<input type="text" name="email" />
</p>
<p>City:
<select id="city" name="City">
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
</div>
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
</div>

Submit button disappears when clicked

When you fill in the form and click the "Start Earning" button the button disappears!!! It still goes through and goes to the next page so that much works but I have no idea why the button disappears.... Any ideas???
<?php /*** Form begins here ***/ ?>
<form method="post" action="redirect.php" name="home_sub" accept-charset="utf-8" id="home_sub">
<div class="form_fields">
<p><label for="first_name" class="over">First Name:</label>
<input name="first_name" id="first_name" class="text_input required" type="text" value="" onClick="$('#optinsection').show()" /></p>
<p><label for="last_name" class="over">Last Name:</label>
<input name="last_name" id="last_name" class="text_input required" type="text" value="" onClick="$('#optinsection').show()" /></p>
<p><label for="email" class="over">E-mail:</label>
<input name="subscriber_email" id="email" class="text_input xverify_email required" type="text" value="" onClick="$('#optinsection').show()" autocomplete="off" /></p>
<p><label for="custom_Address" class="over">Address:</label>
<input name="custom_Address" type="text" id="custom_Address" value="" class="text_input" autocomplete="off" /></p>
<p><label for="custom_City" class="over">City:</label>
<input name="custom_City" type="text" id="custom_City" value="" class="text_input" autocomplete="off" /></p>
<p><label class="hidden">Select State</label>
<select name="custom_State" id="custom_State" class="select_input">
<option value="">Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="WY">Wyoming</option>
</select></p>
<p><label for="custom_ZipCode" class="over">Zip code:</label>
<input name="custom_ZipCode" type="text" id="custom_ZipCode" class="text_input required" value="" maxlength="5" autocomplete="off" /></p>
<p><label class="hidden">Birth Month</label>
<select name="custom_DOBMonth" id="custom_DOBMonth" class="select_input select_month">
<option value="">Birth Month</option>
<option value="01">January</option>
<option value="02">Febuary</option>
</select>
<label class="hidden">Birth Day</label>
<select name="custom_DOBDay" id="custom_DOBDay" class="select_input select_day">
<option value="">Day</option>
<?php for($dy=1; $dy<32; $dy++){
$sdy = $dy < 10? '0'.$dy: $dy;
echo '<option value="'.$sdy.'">'.$dy.'</option>';
} ?>
</select>
<label class="hidden">Birth Year</label>
<select name="custom_DOB_Year" id="custom_DOB_Year" class="select_input select_year">
<option value="">Year</option>
<?php for($yr=2000; $yr>1910; $yr--){
echo '<option value="'.$yr.'">'.$yr.'</option>';
} ?>
</select></p>
<p><label class="hidden">Select Gender</label>
<select name="custom_Gender" id="custom_Gender" class="select_input">
<option value="">Select Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select></p>
<p><label for="custom_Phone" class="over">Phone: (xxx-xxx-xxxx)</label>
<input type="text" name="custom_Phone" id="custom_Phone" class="text_input" value="" /></p>
<span id="optinsection">
<br />
<input type="checkbox" name="chk_allinbox" id="chk_allinbox" class="required" value="1" />
By checking this box, you agree to our Terms of Service and Privacy Policy and agree to receive daily newsletters and promotions via email from BestHotSurveys.com.
<br /><br />
</div>
<div class="form_button">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;" />
</div>
</form>
<?php /*** Form ends here ***/ ?>

From the site you provided after submit button is clicked the submit button wrapper div form_button is stylized by a background-image style.
Before Button Click :
<div class="form_button">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;">
</div>
After button click with validation pass :
<div class="form_button" style="background-image: url(http://www.besthotsurveys.com/images/form_bottom_sending.gif);">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;" disabled="disabled">
</div>
So look onto your TMG_CheckForClick for removing that style or check the availability of that image.
Currently for the image access it throws
The requested URL /images/form_bottom_sending.gif was not found on
this server.

How to validate a drop down menu in a form?

Hi I'm a relative beginner. I need each object in my form to be validated and basically I don't know how to validate a drop-down menu. Here is my HTML, thanks guys.
<div id="valAlert"></div>
<form name="review" onsubmit="return validateForm()">
<div id="valAlert"></div>
<fieldset>
Title: <input type="text" name="Title"><br/>
Email Address: <input type="text" name="Email"><br/>
Rating: <select name="Rating">
<option value="0"></option>
<option value="1">Excellent</option>
<option value="2">Good</option>
<option value="3">Bad</option>
<option value="4">Awful</option>
</select><br/>
<textarea name ="Comments" rows="8" colspan="40">Comments: </textarea>
</fieldset>
<fieldset>
<input class="button" type="submit" value="Submit"/>
</fieldset>
</form>

`else if (r=="0"){
document.getElementById("valAlert").innerHTML="We require a rating";
return false;
} `

Develop Reference

JavaScript is the programming language of the Web.

Having Trouble with Href in form - javascript

Your onClick method is wrong. It should be this: <button type='submit' onclick="validateFormData()" >SUBMIT</button> In your validateFormData method you should check to make sure the form has data, if it does then you call your Link() method. If it doesn't, display an alert.

Related

remove the value set in input field's value attribute after submitting the form

custom message still showing after form input is filled

how to enable /disable form field based on selection using php

Submit button disappears when clicked

How to validate a drop down menu in a form?

Categories

Resources