I have a search form which contains text-boxes. What I want to ask is if textbox1(Hotel (num_rooms)) is not empty then the textbox2(Packages(num_days)) will be disabled or if textbox2(Packages(num_days)) is not empty then the textbox1(Hotel (num_rooms)) will be disabled. Because this search form will leads to different output based on the inputs of an user. If the user tries to put data in textbox1 and submit it, then it will return a lot of recommendations based on the user preferences about hotel same as in packages.
<form action="Filtered-SearchResult.php" method="post">
<div class="SearchForm">
<label id="Form"><h3 style="color:beige; text-align:left;">Search Form</h3></label><br>
<br>
<input type="text" name="location" class="searchtext" id="locate" placeholder="location" onkeyup="LettersOnly(this)" /><br>
<input type="text" name="from_budget" class="searchtext" placeholder="minimum budget" style="width:150px;" onkeyup="NumbersOnly(this)" />
<input type="text" name="to_budget" class="searchtext" placeholder="maximum budget" style="width:150px;" onkeyup="NumbersOnly(this)" /><br>
<input type="text" name="person" class="searchtext" placeholder="no of person" onkeyup="NumbersOnly(this)" /><br>
<input type="text" name="no_of_rooms" class="searchtext" style="width:150px;" placeholder="hotel(num_rooms)" onkeyup="NumbersOnly(this)" />
<input type="text" name="no_of_days" class="searchtext" style="width:150px;" placeholder="Packages(num_days)" onkeyup="NumbersOnly(this)" />
<script>
function LettersOnly(input) {
var regex = /[^a-zA-Z ]/gi;
input.value = input.value.replace(regex, "");
}
function NumbersOnly(input) {
var regex1 = /[^0-9]/gi;
input.value = input.value.replace(regex1, "");
}
</script>
<input type="submit" name="search1" value="Show Prices" id="Prices2" />
</div>
</form>
You can write a change event for no of rooms and no of days like this.
You can add more condition accordingly
$("#no_of_days").change(function(){
if($(this).val() == ""){
$("#no_of_rooms").attr("disabled", false);
}else{
$("#no_of_rooms").attr("disabled", true);
}
});
$("#no_of_rooms").change(function(){
if($(this).val() == ""){
$("#no_of_days").attr("disabled", false);
}else{
$("#no_of_days").attr("disabled", true);
}
});
Related
I am trying to validate the fields in the form and pull up a different html file when the user clicks the submit button if there's no error in field validation.
However, the validators don't seem to work. I want the Event Name and Location fields to alphanumeric characters and spaces, but it seems to take other values as well.
Putting onClick="self.location='successPage.html'" inside the submit button does not seem to validate the fields either. I want it to move to the successPage.html file if all fields in the form are successfully validated.
I don't want to use jQuery.
Here is my code:
<form action="" >
<p>
<label>
Day of the week:<br>
<select name="days">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
</select><br>
</label>
<label>
Start Time:<br>
<input id="appt1" type="time" name="appt1" min="9:00" max="18:00" required /><br>
</label>
<label>
End Time:<br>
<input id="appt2" type="time" name="appt2" min="9:00" max="18:00" required /><br>
</label>
<label>
Event Name:<br>
<input id="ename" type="text" name="ename" required /><br>
</label>
<label>
Location:<br>
<input id="loc" type="text" name="location" required /><br><!--pattern="[A-Za-z0-9\s]"-->
</label>
<label>
Enter URL for the pictture:<br>
<input id="urlpic" type="text" name="urlname" />
</label>
<br><br>
<input type="reset" id="reset" value="Reset" />
<input type="submit" id="submit" value="Submit" /><!--onClick="self.location='successPage.html'"-->
<!-- <input type=button value="Submit" onClick="self.location='successPage.html'"> -->
</p>
</form>
<script>
function chkName() {
var myName = documnet.getElementById("ename");
var pos = myName.value.search( /^[A-Za-z0-9\s]/);
if (pos != 0) {
alert("Please check your input (" + myName + ") again");
return false;
} else
return true;
}
function chkLoc() {
var myLoc = documnet.getElementById("loc");
var pos = myLoc.value.search( /^[A-Za-z0-9\s]/);
if (pos != 0) {
alert("Please check your input (" + myLoc + ") again");
return false;
} else
return true;
}
document.getElementById("ename").onchange = chkName;
document.getElementById("loc").onchange = chkLoc;
</script>
<form action="." method="POST" onsubmit="return validate(this)">
<input type="submit" value="Submit">
</form>
the form element will be passed into the validate function when the user submits, return false to not submit the form, and true to submit it.
<script>
function validate(form) {
console.log(form); // log element to console on submit
return false; // replace with true if input is good to be submitted
}
</script>
Why is the hidden form not shown when it looses focus? The alert is coming up nicely when leaving the input but the other hidden form is still not there.
html
<body>
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
</body>
javascript
window.onload = function() {
$("#myinput").blur(myAlert);
};
function myAlert() {
alert("This input field has lost its focus.");
$("#validation_message_email").show();
}
You can't display a hidden input like that.A span will suit better for this purpose,
<input type="text" id="myinput" value="">
<span style="display:none" id="validation_message_email">enter a valid email</span>
validation_message_email doesn't have its display style property as none, so show() will not make it visible from type="hidden".
You need to replace
$("#validation_message_email").show();
with
$("#validation_message_email").attr( "type", "text" );
However, if the intent is to only show a message, then you don't need to use a hidden input for the same.
<body>
<input type="text" id="myinput" value="">
</body>
and
window.onload = function() {
$("#myinput").blur(function(){
alert("This input field has lost its focus.");
$(this).append('<span id="emailValidationMessage">enter a valid email</span>')
});
$("#myinput").focus(function(){
$("#emailValidationMessage").remove();
});
};
No need to use type="hidden" as hidden elements are not display:none they are hidden by default.
Use type="text" and hide it with css and show where you want
<input type="text" id="myinput" value="" style="display:none;">
use like this
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
<script>
window.onload = function() {
$("#myinput").blur(myAlert);
};
function myAlert() {
$("#validation_message_email").attr("type","text");
}
</script>
<div class="form-group" id="usernamediv">
<input class="form-control" name="username" id="username"
placeholder="Username" type="text" required=""> </div>
<div class="form-group" id="passworddiv">
<input name="password" class="form-control" id="password" placeholder="Password" type="password" required="">
</div>
<button id="#loginButton">Login</button>
<button id="#forgotpassword">Forgot Password</button>
<script>
$("#forgotpassword").hide();
$("#forgotpassword").click(function(e){
$("#loginButton").hide();
$("#usernamediv").show();
$("#passworddiv").hide();
})
</script>
Check this jsfiddle link, it might help you.
$("#myinput").blur( function(){
myAlert();
});
function myAlert() {
$("#validation_message_email").attr("type", "text");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
I would like to add a function that generates multiple fields to my form.
This is how my form looks like:
<form action="form_sent.php" method="post">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
In my case I want 3 new fields (name, phone, email) when clicking on "Add more fields".
How can I do this?
https://jsfiddle.net/374cxt5s/
Try this: https://jsfiddle.net/Twisty/q8zj00s0/1/
HTML
<form action="form_sent.php" method="post">
<ul id="fieldList">
<li>
<input name="name[]" type="text" placeholder="Name" />
</li>
<li>
<input name="phone[]" type="text" placeholder="Phone" />
</li>
<li>
<input name="email[]" type="text" placeholder="E-Mail">
</li>
</ul>
<button id="addMore">Add more fields</button>
<br>
<br>
<input type="submit">
</form>
CSS
ul {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
JQuery
$(function() {
$("#addMore").click(function(e) {
e.preventDefault();
$("#fieldList").append("<li> </li>");
$("#fieldList").append("<li><input type='text' name='name[]' placeholder='Name' /></li>");
$("#fieldList").append("<li><input type='text' name='phone[]' placeholder='Phone' /></li>");
$("#fieldList").append("<li><input type='text' name='email[]' placeholder='E-Mail' /></li>");
});
});
This allows you to store the results in array when you submit the form. Since you could have 5 names, phones, and emails, an array is the best way to address that. Then in PHP, you would have $_POST['name'][0] as the first one.
I'm assuming you probably want to create a dynamic form that allows you to add multiple contacts, etc.
CodePen Example
http://codepen.io/anon/pen/yeVRgw
The Basic HTML Setup
So that you can loop through things, and for sake of your own sanity, you'll probably want to segment out each chunk within the form. We'll also set up a hidden input to track how many partitions of name,phone,email have been created. We'll default at 1
<form action="form_sent.php" method="POST">
<input type="hidden" name="contacts" id="contacts" value="1">
<div class="form-contacts-container">
<div class="form-contact" id="form-contact-1">
<input type="text" name="name-1" id="name-1" placeholder="Name">
<input type="text" name="email-1" id="email-1" placeholder="E-mail">
<input type="text" name="phone-1" id="phone-1" placeholder="Phone">
</div>
<!-- We'll be adding additional inputs here -->
</div>
<div class="form-contacts-add">
<input type="button" value="Add More Fields" id="add-fields">
</div>
<div class="form-contacts-submit">
<input type="submit" name="submit" id="submit" value="Submit">
</div>
</form>
The JavaScript
This assumes you are using jQuery, so ensure that this is in your <head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Now we need to do a few things - firstly, attach an event listener to our button and secondly, add a new <div class="form-contact"> with included fields to our form. We'll also need to ensure that we're counting up to make sure each section has a unique name/id, and we'll increase the hidden input value to count how many contacts have been added in total.
<script type="text/javascript">
var total = 1; // Our default for how many contacts we have
$( document ).on( 'click', '#add-fields', function() {
var addBlockId = total = total + 1;
var addBlock = document.createElement('div');
$(addBlock).addClass('form-contact');
$(addBlock).attr('id','form-contact-' + addBlockId);
var inputName = document.createElement('input');
$(inputName).attr('type','text');
$(inputName).attr('name','name-' + addBlockId);
$(inputName).attr('id','name-' + addBlockId);
$(inputName).attr('placeholder','Name');
$(inputName).appendTo($(addBlock));
var inputEmail = document.createElement('input');
$(inputEmail).attr('type','text');
$(inputEmail).attr('name','email-' + addBlockId);
$(inputEmail).attr('id','email-' + addBlockId);
$(inputEmail).attr('placeholder','E-mail');
$(inputEmail).appendTo($(addBlock));
var inputPhone = document.createElement('input');
$(inputPhone).attr('type','text');
$(inputPhone).attr('name','phone-' + addBlockId);
$(inputPhone).attr('id','phone-' + addBlockId);
$(inputPhone).attr('placeholder','Phone');
$(inputPhone).appendTo($(addBlock));
$(addBlock).appendTo($('.form-contacts-container'));
$('#contacts').val(total);
});
</script>
Processing your Form
The last piece of the puzzle is to process your form properly. Not goign to give you all the answers here, but the basic logic would be to grab the $_POST['contacts'] value we've been updated and run a loop through to grab all of your inputs and associated values. For instance in PHP:
$total = $_POST['contacts'];
$contacts = array();
for( $i = 1; $i < $total; $i++ ) {
$this_contact = $array(
'Name' => $_POST['name-' . $i],
'Email' => $_POST['email-' . $i],
'Phone' => $_POST['phone-' . $i]
);
array_push($contacts, $this_contact);
}
var_dump( $contacts );
try something like this :
(function() {
var button=document.getElementById("add-user");
button.addEventListener('click', function(event) {
event.preventDefault();
var cln = document.getElementsByClassName("user")[0].cloneNode(true);
document.getElementById("users").insertBefore(cln,this);
return false;
});
})();
<form id="users" action="form_sent.php" method="post">
<div class="user">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button id='add-user'>Add more fields</button><br><br>
<input type="submit">
</form>
https://jsfiddle.net/9955n4fo/
It might not be a bad idea to wrap your input fields in a div just so when you append the other inputs they appear consecutively. Try something like this in your html
<form action="form_sent.php" method="post">
<div id="fields">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
and then your javascript can be completed as so
$(function() {
$('button').click(function() { addFields(); });
});
function addFields() {
var html = "<input name='name' type='text' placeholder='Name'><br>
<input name='phone' type='text' placeholder='Phone'><br>
<input name='email' type='text' placeholder='E-Mail'><br><br>";
$('#fields').append(html);
}
You need to implement jQuery to change the HTMLs DOM.
So, you add this in your <head></head> tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
You need to modify your HTML like this:
<form action="form_sent.php" method="post">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
<button extra="0">Add more fields</button><br><br>
<input type="submit">
</form>
Then you need to use this jQuery code:
<script>
$("button").on("click",function(){
var extra = $(this).attr("extra") + 1;
$("form").append("<input type='text' placeholder='Other Field' name='field' />");
$(this).attr("extra",extra);
}
</script>
This is the end!! :)
Try This :
Jquery append() function seems to sort out your answer
HTML Code should be as follow :
<form action="form_sent.php" method="post">
<div class = 'xyz'>
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
you JS should be as follow :
$(button).click(function(event){
$('.xyz').append("<input type ='text' class ='name' placeholder = 'Enter name'/><br/>");
$('.xyz').append("<input type='text' class='phone' placeholder='Enter phone'/><br/>");
$('.xyz').append("<input type='mail' class='phone' placeholder='Enter e-mail'/><br/>");
event.preventDefault();
});
This is how I would solve it.
HTML:
<form action="form_sent.php" method="post">
<div id="inputHolder">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
</div>
<button id="addMoreFields">Add more fields</button><br><br>
<input type="submit">
</form>
JS:
$( document ).ready(function() {
$("#addMoreFields").click(function(event) {
event.preventDefault();
$("#inputHolder").append('<input name="name" type="text" placeholder="Name"><br>');
$("#inputHolder").append('<input name="phone" type="text" placeholder="Phone"><br>');
$("#inputHolder").append('<input name="email" type="text" placeholder="E-Mail"><br><br>');
});
});
https://jsfiddle.net/r71odb7t/
First you want to clone the elements you want to be adding. Do that when the page loads. Then when the button is clicked, clone the copy and add a copy to the page. And, you could either add type="button" to the button or use e.preventDefault() so your form does not get submitted when the button is clicked.
$(function() {
var inputs = $('form > button').prev().prev().prevUntil().clone().add('<br><br>');
$('form > button').on('click', function(e) {
e.preventDefault();
$(this).before(inputs.clone());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="form_sent.php" method="post">
<input name="name" type="text" placeholder="Name"><br>
<input name="phone" type="text" placeholder="Phone"><br>
<input name="email" type="text" placeholder="E-Mail"><br><br>
<button>Add more fields</button><br><br>
<input type="submit">
</form>
I have a HTML File, that looks like this:
Input 1: <input type="text" required="false" /><br>
Input 2: <input type="text" required="true" /> *<br>
Input 3: <input type="text" required="false" /><br>
Input 4: <input type="text" required="false" /><br>
Input 5: <input type="text" required="true" /> *<br>
Input 6: <input type="text" required="false" /><br>
Input 7: <input type="text" required="true" /> *<br>
<input type="button" id="subButton" value="Run" />
This is my jQuery-script:
$(document).ready(function(){
$("#subButton").click(function(){
//Copy START
var setError = false;
$.each($(":input"), function(e){
if(($(this).attr("required") == "true") && (this.value == "")){
setError = true;
}
});
if(setError != false) alert("Not all required fields are filled");
//Copy END
});
});
If i change the attr to "type", it works if i not fill up every box. But i want to use this with the attribute required.
Any ideas, why it doesn't work?
Thanks for help
You are using required in a wrong way. If HTML, it should be this way:
<input type="text" required />
And if it is XHTML, it should be this way:
<input type="text" required="required" />
And you need to access it using jQuery using $.prop():
if($("input").prop("required")) { ... }
Else, you have the freedom to use data-* attributes this way:
data-reqd="yes"
And access it using:
if ($(this).data("reqd") == "yes") { ... }
use
data-required="true/false"
then
if ($(this).data("required")) ...
required is an official (not "own defined") attribute of <input>s, and it's boolean - "false" is an invalid value. Also, using jQuery's attr on this adds some additional quirks, so that you get back the string "required". Better use the required property, which really returns a boolean value.
Input 1: <input type="text" /><br>
Input 2: <input type="text" required /> *<br>
Input 3: <input type="text" /><br>
Input 4: <input type="text" /><br>
Input 5: <input type="text" required="" /> *<br>
Input 6: <input type="text" /><br>
Input 7: <input type="text" required="required" /> *<br>
<input type="button" id="subButton" value="Run" />
<script type="text/javascript">
$(document).ready(function(){
$("#subButton").click(function(){
var setError = false;
$(":input").each(function(e){
if ( this.required && this.value == "" )
setError = true;
}
});
if ( setError )
alert("Not all required fields are filled");
});
});
</script>
i have the below div class 'labouritems' which gets a new instance of it inserted into the dom each time the user clicks on a button.
I need to be able to calculate the '.rate' and '.hours' fields and set the answer to the '.total' field.
Now this is for only the instance of 'labouritems' that the user is working on, ie: should not update the field total on another instance' so basically just work within that row.
Below is the html that i'm working with and below that is the code i have which only works for the first instance of 'labouritems' but when i insert a new one it does not do anything.
<div class="labouritems">
<label for="quote_labouritems_attributes_0_description">Description</label>
<input class="input-medium" id="quote_labouritems_attributes_0_description" name="quote[labouritems_attributes][0][description]" size="30" type="text" value="concrete the house">
<label for="quote_labouritems_attributes_0_hours">Hours</label>
<input class="input-mini hours" id="quote_labouritems_attributes_0_hours" name="quote[labouritems_attributes][0][hours]" size="30" type="text" value="33">
<label for="quote_labouritems_attributes_0_total">Total</label>
<input class="input-mini total" id="quote_labouritems_attributes_0_total" name="quote[labouritems_attributes][0][total]" size="30" type="text" value="1089">
<label for="quote_labouritems_attributes_0_Mup/Hr">Mup/hr</label>
<input class="input-mini" id="quote_labouritems_attributes_0_muphourrate" name="quote[labouritems_attributes][0][muphourrate]" size="30" type="text" value="0">
<label for="quote_labouritems_attributes_0_Mup/Total">Mup/total</label>
<input class="input-mini" id="quote_labouritems_attributes_0_muptotal" name="quote[labouritems_attributes][0][muptotal]" size="30" type="text" value="0">
<label for="quote_labouritems_attributes_0_Mup/%">Mup/%</label>
<input class="input-mini" id="quote_labouritems_attributes_0_muppercent" name="quote[labouritems_attributes][0][muppercent]" size="30" type="text">
<label for="quote_labouritems_attributes_0_Contractor">Contractor</label>
<input class="input-small" data-autocomplete="/contractors/autocomplete_contractor_firstname" data-update-elements="{"id":"#quote_labouritems_attributes_0_contractor_id","hourly_rate":"#quote_labouritems_attributes_0_contractor_rate"}" id="quote_labouritems_attributes_0_contractor_name" name="quote[labouritems_attributes][0][contractor_name]" placeholder="Seach" size="30" type="text" value="bing lee">
<input id="quote_labouritems_attributes_0_contractor_id" name="quote[labouritems_attributes][0][contractor_id]" type="hidden" value="1">
<label for="quote_labouritems_attributes_0_Rate/hr">Rate/hr</label>
<input class="input-mini rate" id="quote_labouritems_attributes_0_contractor_rate" name="quote[labouritems_attributes][0][contractor_rate]" size="30" type="text" value="33">
<label for="quote_labouritems_attributes_0_Work %">Work %</label>
<input class="input-mini" id="quote_labouritems_attributes_0_progress_percent" name="quote[labouritems_attributes][0][progress_percent]" size="30" type="text" value="55">
<label for="quote_labouritems_attributes_0_Work $">Work $</label>
<input class="input-mini" id="quote_labouritems_attributes_0_progress_payment" name="quote[labouritems_attributes][0][progress_payment]" size="30" type="text">
<input id="quote_labouritems_attributes_0__destroy" name="quote[labouritems_attributes][0][_destroy]" type="hidden" value="false">Delete
</div>
var LabourItems = {
rate: null,
hours: null,
total: null,
init: function(object) {
this.rate = parseInt($(object).children('.rate').first().val(), 10);
// var rate = $(object).children('.rate').first();
this.hours =parseInt($(object).children('.hours').first().val(), 10);
this.total = this.rate * this.hours;
this.updateTotal(object);
},
updateTotal: function(object) {
$(object).children('.total').first().val(this.total || 0);
}
}
//reactTochange for those inputs that you want to observe
$('.hours').on("keyup", function() {
$('.labouritems').each( function(key,value){
LabourItems.init(this);
});
});
try
$(documents).on("keyup", '.hours', function() {
LabourItems.init(this.closest('.labouritems'));
});
this will
1. attach hours.keyup event on document, instead of every hours element
2. update total for only changed element