We Keep Coding

Pass form data to redirected page - javascript - jQuery

<div class="box-wrapper">
<form method="POST" action="/cgi-bin/formmail/FormMail.pl">
<input type="hidden" name="recipient" value="mail123#gmail.com">
<input type="hidden" name="subject" value="Contact Form">
<input type="hidden" name="redirect" value="http://127.0.0.1/contact.html?formsubmit=success">
<input type="text" name="name" placeholder="Name" required="">
<input type="email" name="email" placeholder="Email Id" required="">
<input type="text" name="mobile" maxlength="10" placeholder="Mobile Number" id="number" required="">
<input name="service" list="services" placeholder="What service you need?" required>
<datalist id="services">
<option value="Web Design">Web Design</option>
<option value="Graphic Design">Graphic Design</option>
<option value="UI/UX Design">UI/UX Design</option>
<option value="Digita Marketing">Digital Mareketing</option>
<option value="Others">Others</option>
</datalist>
<textarea placeholder="Additonal detail" name="details" required=""></textarea>
<button type="submit" name="submit" id="submit-btn" onclick="thanksMsg()"><i class="fa fa-send"></i></button>
</form>
<div id="thanksmsg"></div>
</div>
This is my html code.I'm passing form data to my mail after submit. and redirecting to "http://127.0.0.1/contact.html?formsubmit=success". On this page i display thanks msg using jQuery.
<script type="text/javascript">
$(document).ready(function(){
var url = window.location.href;
var text = $('#form').find('input[name="name"]').val();
if(url == 'http://127.0.0.1:8887/contact.html?formsubmit=success'){
var name = $('#form').find('input[name="name"]').val();
$('#thanksmsg').append('<p>Hi'+text+', Thanks for reaching us out. <br>We will get back to you shortly 😉</p><div><a class="cta-btn">Back to home</a><a class="cta-btn">View our Portfolio<a></div>');
$('form').css('display', 'none');
}
});
</script>
here in thanks msg i wanted to show the name entered in input field. but as it gets redirected it doesn't appear. how to display the name?

Try to use cookies. At the form submit, write something like $.cookie('name', name). To recover you call $.cookie('name').
I'm not sure if it'll work, because in some cases the cookies are erased, but is easy to try.

Field only required if certain dropdown is selected in a HTML form

I was wondering how a certain field is required only if a certain dropdown is selected. In my form, the person would select "Canada" and two fields underneath will appear(province and postal code), which are required before person submits the form. And if the person selected "United States", the state and zip code will appear instead.
The trouble i am having is that if i choose either country, the fields that are not associated with that country are still required even though they are hidden. I need it so that if i choose United States, then province nor postal code would be required, and the same the other way around.
Any help is greatly appreciated:) Here is the form
<script type='text/javascript'>//<![CDATA[
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#provinceselect').show();
$('#province').prop('required',true);
} else {
$('#provinceselect').prop('required',false);
$('#provinceselect').hide();
$('#province').prop('required',false);
}
});
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#postalselect').show();
$('#postal').prop('required',true);
} else {
$('#postalselect').prop('required',false);
$('#postalselect').hide();
$('#postal').prop('required',false);
}
});
</script>
<!--HTML Form-->
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname">
<input placeholder="First Name" type="text" name="first_name" required>
<input placeholder="Last Name" type="text" name="last_name" required>
<input placeholder="Email" type="email" name="email" id="email" required>
<!--Country select-->
<select class="countrycss" id="country" name="country" required>
<option value="" selected="selected">Please Select Country</option>
<option value="Canada" id="Canada">Canada</option>
<option value="United States" id="United States">United States</option>
</select>
<!--Province select-->
<div id="provinceselect" style="display:none;">
<select class="provincecss" id="province" name="province" required>
<option value="" selected="selected">Please Select Province</option>
<option value="Alberta" id="Alberta">Alberta</option>
<option value="British Coloumbia" id="British Coloumbia">British Coloumbia</option>
</select>
</div>
<!--State select-->
<div id="stateselect" style="display:none;">
<select class="statecss" id="state" name="state">
<option value="" selected="selected">Please Select State</option>
<option value="Arkansas" id="Arkansas">Alaska</option>
<option value="Hawalli" id="Hawalli">Hawalli</option>
</select>
</div>
<!--Postal select-->
<div id="postalselect" style="display:none;">
<input placeholder="Postal Code" type="text" name="postal" required>
</div>
<!--Zip select-->
<div id="zipselect" style="display:none;">
<input placeholder="ZipCode" type="text" name="zip" required>
</div>
<input placeholder="City" type="text" name="city" required>
<input placeholder="Address" type="text" name="address1" required>
<input name="shipping" class="shipping" type="radio" id="shipping" checked/>
<label class="shippingcheck">$19.99 Shipping – DATABASE SENT ON CD ROM </label>
<br>
<input name="shipping" class="shipping" type="radio" id="noshipping" />
<label class="shippingcheck">FREE SHIPPING – DATABASE SENT VIA EMAIL</label>
<br>
<button name="submit" type="submit" id="submit">Pay Now</button>

You could use the .prop() method, so for each of your .change you will have something like
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#provinceselect').show();
$('#provinceselect').prop('required',true);
} else {
$('#provinceselect').prop('required',false);
$('#provinceselect').hide();
}
});
I'm curious as to why you have four different instances of .change() I would have put them all under the same instance of change() since they are all reacting to the same thing.

Yeah, remove the required field from the optional fields and add them by using prop() method.

I want to validate a form field using a red border when field is empty or wrong field is entered

I want to validate this form using red border when the field is empty or if the user entered the wrong field.
I'd also like to disable the submit button when fields are invalid.
Note that there are other fields that are not mandatory like MOBILE and EMAIL (they can be submitted later in "edit user details"). Although if the wrong email is entered, I'd like to validate it also.
<form action="" method="POST">
<input type="date" name="date" placeholder="Registration Date" /></br>
<input name="full_names" type="text" placeholder="Full names" /></br>
<input name="mobile" type="text" placeholder="Mobile" /></br>
<span>Select status </span>
<select name="status">
<option value="Paid">Paid</option>
<option value="Unpaid">Unpaid</option>
</select></br>
<span>Select Chapter </span>
<select name="chapter">
<option value="Known">Known</option>
<option value="Unknown">Unknown</option>
</select></br>
<span>Select Gender </span>
<select name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></br>
<input type="text" name="email" placeholder="Email Address" /></br>
<textarea type="text" placeholder="Any Remarks" rows="2" name="remarks"></textarea></br>
<button type="submit">Submit </button>
</form>

HTML5 has a lot of this built in, with required attributes and the ability to provide a regex pattern attribute to validate against. Some is even built in, like when you use type="email" attribute instead of type="text".
Using HTML5 validation + CSS3, you can pick up on the :invalid state and apply styles to the elements in that state.
Although this does not apply the disabled state to the submit button, it does not submit the form if validation fails.
input,
textarea {
margin: 5px 0;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
input:invalid,
select:invalid,
textarea:invalid {
border-color: red;
}
<form action="" method="POST">
<input type="date" name="date" placeholder="Registration Date" required />
<br/>
<input name="full_names" type="text" placeholder="Full names" required />
<br/>
<input name="mobile" type="tel" pattern='[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}' placeholder="Mobile" title="+99(99)9999-9999" />
<!-- Pattern from: http://www.htmlgoodies.com/html5/tutorials/whats-new-in-html5-forms-email-url-and-telephone-input-types.html#fbid=UQp7PiVwsX2 -->
<br/>
<span>Select status </span>
<select name="status" required>
<option value="Paid">Paid</option>
<option value="Unpaid">Unpaid</option>
</select>
<br/>
<span>Select Chapter </span>
<select name="chapter" required>
<option value="Known">Known</option>
<option value="Unknown">Unknown</option>
</select>
<br/>
<span>Select Gender </span>
<select name="gender" required>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br/>
<input type="email" name="email" placeholder="Email Address" />
<br/>
<textarea type="text" placeholder="Any Remarks" rows="2" name="remarks" required></textarea>
<br/>
<button type="submit">Submit</button>
</form>

Duplicate similar fields of the form on checked

I have a form in which I have a permanent address and correspondence address.
I want the user to enter the permanent address first and then give a checkbox stating if the correspondence address is the same as permanent address. I was able to fill the text boxes with javascript but not able to do it in selection i.e dropdown. How can I do that?
My code for form is:
<form action="" name="form1" >
<fieldset>
PERMANENT ADDRESS:<br />
<br/>
HOUSE/DOOR<input type="text" name="hno1" placeholder="HOUSE/DOOR NUM" required><br/>
STREET<input type="text" name="street1" placeholder="STREET" required><br/>
CITY<input type="text" name="city1" placeholder="CITY" required><br/>
DISTRICT<input type="text" name="district1" placeholder="DISTRICT" required> <br/>
STATE<select required name="state1">
<option>ANDHRA PRADESH</option>
<option>KARNATAKA</option>
</select><br />
COUNTRY<select name="country1" required>
<option>INDIA</option>
<option>USA</option>
</select><br />
PIN<input type="text" name="pin1" placeholder="PIN" required><br/><br />
CORRESPONDENT ADDRESS:<br />
<label for="adress same">Same as PERMANENT ADDRESS </label>
<input name="copy" type="checkbox" onclick="data_copy()"> <br />
<!--<select required>
<option>PERMANENT & CORRESPONDENT</option>
<option>RESPECTIVELY</option>
</select>-->
<br/>
HOUSE/DOOR <input type="text" name="hno11" placeholder="HOUSE/DOOR NUM" required><br/>
STREET<input type="text" name="street11" placeholder="STREET" required><br/>
CITY<input type="text" name="city11" placeholder="CITY" required><br/>
DISTRICT<input type="text" name="district11" placeholder="DISTRICT" required> <br/>
STATE<select name="state11" required>
<option>ANDHRA PRADESH</option>
<option>KARNATAKA</option>
</select><br/>
COUNTRY<select name="country11" required>
<option>INDIA</option>
<option>USA</option>
</select><br/>
PIN<input type="text" name="pin11" placeholder="PIN" required><br/><br />
</fieldset>
</form>
Is there a better way to assign this duplication of similar fields in form on checking the checkbox and I also want the fields to clear on deselecting the checkbox.

<select required>
<option>PERMANENT & CORRESPONDENT</option>
<option>RESPECTIVELY</option>
</select>
use onchange event for dropdown, like this,
<select required onChange="data_copy(this.value)">
<option value="1">PERMANENT & CORRESPONDENT</option>
<option value="2">RESPECTIVELY</option>
</select>
and then get the value of the selected option and perform action accordingly.

Here is the function to fill the value,
<script type="text/javascript">
function data_copy(str){
if(str=='1'){ // if this the case where both the addresses will be same
document.form1.hno11.value = document.form1.hno1.value;
document.form1.street11.value = document.form1.street1.value;
//.....
//... so on.. add fields this ways
}
}

jquery validation doesn't respond

<form class="admission" name="form" method="POST" action="#" enctype="multipart/form-data" id="new_student">
<h2> Student Details </h2>
<p>Fields marked with <span class="necessary-field">*</span> must be filled.</p>
<label>Admission number
<span class="small">Add your name</span>
</label>
<input type="text" name="Admission_number" id="Admission_number"/><br/>
<label>Admission Date
<span class="small">Add your name</span>
</label>
<input type="text" name="Admission_Date" id="Admission_Date" /><br/>
<h2>Personal Details</h2><p></p>
<label>First Name</label>
<input type="text" name="first_name" id="first_name" /><br/>
<label>Middle Name</label>
<input type="text" name="middle_name" id="middle_name" /><br/>
<label>Last Name
<span class="small">Last name or Surname</span>
</label>
<input type="text" name="last_name" id="last_name" /><br/>
<label>Course </label>
<select id="student_batch_id" name="student_batch_id">
<option value="11">10 - 2010 A</option>
<option value="14">LKG</option>
</select><br/>
<label>Date of Birth</label>
<input type="text" name="dob" id="dob"/><br/>
<label>Gender</label>
<select id="gender" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Blood Group</label>
<select id="student_blood_group" name="student_blood_group"><option value="">Unknown</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option></select>
<label>Identification Marks</label>
<input type="text" name="id_mark_1" id="id_mark_1" /><br/>
<label> </label>
<input type="text" name="id_mark_2" id="id_mark_2" /><br/>
<label>Place of Birth</label>
<input type="text" name="birth_palace" id="birth_palace" /><br/>
<label>Nationality</label>
<input type="text" name="nationalaity" id="nationalaity" /><br/>
<label>Mother Tongue</label>
<input type="text" name="mother_tongue" id="mother_tongue" /><br/>
<label>Religion</label>
<input type="text" name="religion" id="religion" /><br/>
<label>Cast</label>
<input type="text" name="cast" id="cast" /><br/>
<label>Creed</label>
<input type="text" name="creed" id="creed" /><br/>
<label>category</label>
<select id="student_category_id" name="category_id]">
<option value="">Select a Category</option>
<option value="1">GENERAL</option>
<option value="2">SC/ST</option>
<option value="3">OBC</option>
<option value="4">OEC</option>
<option value="5">NRI</option>
</select><br/>
<h2>Contact Details</h2><p></p>
<label>Address Line1</label>
<input type="text" name="address_line1" id="address_line1" /><br/>
<label>Address Line2</label>
<input type="text" name="address_line2" id="address_line2" /><br/>
<label>Locality</label>
<input type="text" name="locality" id="locality" /><br/>
<label>City</label>
<input type="text" name="city" id="city" /><br/>
<label>State</label>
<input type="text" name="state" id="state" /><br/>
<label>PIN</label>
<input type="text" name="pin_num" id="pin_num" /><br/>
<label>Telephone</label>
<input type="text" name="telephone" id="telephone" /><br/>
<label>Mobile</label>
<input type="text" name="mobile" id="mobile" /><br/>
<label>Upload User Photo</label>
<span class="small">Upload User Photo (60KB max)</span>
<input id="student_photo" name="student_photo" type="file" >
<input type="submit" value="NEXT">
<br/>
</form>​
This form is to be validated. I include these below js files to the page.
<script src="../JavaScript/jquery.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>
And add the java script code:-
<script type="text/javascript">
$(document).ready(function(){
$("#new_student").validate({
rules: {
Admission_number: {
required: true,
minlength: 2
},
Admission_Date: "required"
},
messages: {
Admission_Date: "This is a comment form. Why in the heck would you leave the comment blank?",
Admission_number: {
required: "Stand up for your comments or go home.",
minlength: jQuery.format("You need to use at least {0} characters for your name.")
}
}
});
});
</script>
I am new to jquery but. I couldnt understand where the mistake is
here is the jsFiddle link http://jsfiddle.net/abelkbil/cVjez/

It's working for me...
http://jsfiddle.net/cVjez/10/
All I did was change the jQuery version to 1.7.2 and then added the jQuery.validation.js file from the Microsoft Ajax CDN
Maybe double check that the jquery and jquery validation js libraries are being loaded... the relative path might be wrong or something along those lines.