I have a simple focus / blur. 'Name of Venue' is shown by default since it's the value of the input type. on 'focus' it hides and on 'blur' is shows again if there's no text.
Here's the input field
<input type="text" name="name" id="search_name" value="Name of Venue" maxlength="100" />
Here's the jQuery
$('#search_name').focus(function() {
if($(this).val() == 'Name of Venue') {
$(this).val('');
}
});
$('#search_name').blur(function() {
if($(this).val() == '') {
$(this).val('Name of Venue');
}
});
On submit I don't want 'Name of Venue' to be stored as the get variable for $_GET['name']. So, I'm doing <br /><br /> PHP
if($_GET['name'] === 'Name of Venue') {
$_GET['name'] = '';
}
But, this doesn't work. How can I make it so the get variable will be empty on submit if it's the default value?
Consider using the HTML5 placeholder attribute if possible. The value will be blank if nothing was entered.
<input type="text" name="search_name" id="search_name" placeholder="Name of Venue" maxlength="100" />
It will appear/disappear automatically, so you won't need the focus/blur code. Also, "name" is a bad name for name, I'd use something more unique (usually the id will do).
As an alternative, you could do this:
<form id="myform" method="get" action="">
<input type="text" name="search_name" id="search_name" value="Name of Venue" maxlength="100" />
<input type="submit" id="submit_button" value="Submit" />
</form>
<script src="jquery-1.7.1.min.js"></script>
<script>
// ready() not need if <script> follows content, but best to put this in a .js file and link in <head>
$(document).ready(function() {
// Define once and you're good
var search_name = $('#search_name');
var submit_button = $('#submit_button');
var search_default = 'Name of Venue';
search_name.focus(function() {
if($(this).val() == search_default) {
$(this).val('');
}
});
search_name.blur(function() {
if($(this).val() == '') {
$(this).val(search_default);
}
});
$("#myform").submit(function(event) {
if (search_name.val() == '' || search_name.val() == search_default) {
event.preventDefault();
} else {
return true;
}
});
});
</script>
<?php
var_dump($_GET);
$name = '';
if (isset($_GET['search_name'])) {
// Without the check, we might run query when none exists
$name = $_GET['search_name'];
$name = $name != 'Name of Venue' ? $name : '';
}
var_dump($name);
?>
This will prevent a submit with a blank or default name. It's probably handy to put any repeated logic in a function and call those when handling the GET in PHP with any extra search variables.
You can control the value on client side and if it's a required field don't let the form to be submitted. If it's not required, just set the value to "" if it is "Name of Venue".
I think you have to make the field value blank before submitting the form if value is Name of Venue.
$('#frName').submit(function() { if($('#search_name').val() == 'Name of Venue' ){ $('#search_name').val('') } return false;});
You can remove return false if you want to submit the value. Hope its helps you
Related
How do I type in a HTML textbox and if the first 3 characters dont match a set variable - then display an error? I need to lose the error and display text next to the input after the 3rd character
I'm thinking jQuery, AJAX, PHP - not sure. I just don't want to use an alert box.
And this needs to be before a user enters the submit button...
<form>
<input type="text" id="test"/><br>
<input type="button" id="txt" value="Submit" />
</form>
$(document).ready(function(){
$("#txt").click(function(){
var text = $("#test").val();
var comparingText = "yes";
if (text != comparingText){
alert( $("#test").val());
}
});
});
It will show this alert after write yes.
you can use it as you want.
$( "#test" ).keyup(function() {
var test = $( "#test" ).val();
if(test == 'yes'){
alert( "your Error msg" );
}
});
You can use a <span> element, next to the <input> element to display an error message and, as you said, avoid using the alert box.
JS
HTML
<form>
<input type="text" id="test" oninput="submitData(this.value)"/>
<span id="textError"></span><br/>
<input type="button" id="txt" value="Submit" />
</form>
JS
function submitData(input) {
if (input != "yes") {
document.getElementById("textError").innerHTML = "Your Error MSG";
} else {
document.getElementById("textError").innerHTML = "";
}
}
JS + jQuery
In this case I'm taking Mamunur Rashid's answer to complement the code.
HTML
<form>
<input type="text" id="test"/> <span id="textError"></span><br/>
<input type="button" id="txt" value="Submit" />
</form>
jQuery
$(document).ready(function(){
$("#test").keyup(function(){
var test = $("#test").val();
if (test != "yes") {
$("#textError").html("Your Error MSG");
} else {
$("#textError").html("");
}
});
});
I have a PHP form. Is it possible to not send/hide tag name="Field2" of an input text field, if its "value" is empty?
Code:
<form action="searchresult.php" method="get">
<input type="text" name="Field1">
<input type="text" name="Field2">
<button type="submit">Submit</button>
</form>
The result should be:
If the field name="Field2" is empty: searchresult.php?Field1=value
If the field name="Field2" is not empty: searchresult.php?Field1=value&Field2=value
It can be achieved with jQuery.
You must catch the submit and check if there are any empty fields, and remove them. This will redirect you to given url without any empty fields in URL
$(document).ready(function () {
$('#form').submit(function () {
var newurl = $(this).find(":input").filter(function () {
return $.trim(this.value).length > 0
}).serialize();
window.location($('#form').attr('action') + '?' + newurl );
return false;
});
});
$(".btnSubmit").on("click", function(){
var content = $.trim($("#input").val());
if(content == '' || content == null){
$("#input").removeAttr( "name" );
}
});
I am using a form with the method of GET to add to the query string.
I am running into an issue. When the form is submitted every field is sent and added to the query including with no values.
Example:
http://web.com/?filter-types=news&filter-document-type=&filter-topics=we-have-a-topic&filter-featured=&filter-rating=
Can I not add these to the query string if they are not set? !isset() or is there another way to do this?
You could alternatively manipulate the form inputs thru javascript, just a Mike said in the comments, on submit check the fields, if empty, disable them so that they wont be included on submission.
This is just the basic idea (with jQuery):
<form method="GET" id="form_inputs">
<input type="text" name="field1" value="field_with_value" /><br/>
<input type="text" name="field2" value="" /><br/><!-- empty field -->
<input type="text" name="field3" value="field_with_value" /><br/>
<input type="submit" name="submit_form" id="submit_form" value="Submit" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('input[name="submit_form"]').on('click', function(e){
e.preventDefault();
$('form').children().each(function(i, e){
if($(e).is('input') && $(this).val() == '') {
$(this).prop('disabled', true);
// or $(this).attr('name', '');
}
});
$('form').submit();
});
</script>
Or if you do not want to use jquery at all:
document.getElementById('submit_form').addEventListener('click', function(e){
e.preventDefault();
var children = document.getElementById('form_inputs').childNodes;
for(i = 0; i < children.length; i++) {
if(children[i].type == 'text' && children[i].value == '') {
children[i].disabled = true;
}
}
document.getElementById('form_inputs').submit();
});
The reason all those keys show up in query string is because they exist as inputs in the form. If you don't want them sent, remove them from the form, or at least give them some meaningful defaults.
I guess you are looking a condition
if (!empty($_POST['var'])) {
}
OR
if (!isset($_POST['var']) && !empty($_POST['var'])) {
}
If two input elements in a form - for example - text fields, lets say username and password, get text input with length > 0, how would you create an event to change a submit button color the moment the user has typed in both fields?
document.getElementById('submit').onclick = function() {
var inputs = document.getElementsByTagName('input'),
empty = 0;
for (var i = 0, len = inputs.length - 1; i < len; i++) {
empty += !inputs[i].value;
}
if (empty == 0) {
//write code for changing the button color
}
};
I like the answer above, and here is a jquery answer if you like the looks better!
$(document).ready(function() {
$("#username").change(checkFunction());
$("#password").change(checkFunction());
}
function checkFunction() {
var user = $("#username").val();
var pass = $("#password").val();
if (user && pass) {
$("#buttonid").css("background-color:#HEXCODE");
}
}
Make a javascript function that checks if both inputs have a value greater than zero and if they do it changes the color of the submit button when called.
Use the onChange attribute in the input tag and place the name of the javascript function in the attribute.
You can also set the attribute by doing
Object.onChange = functionToCall();
onChange fires the function it's set to whenever the input value changes.
If you have Jquery in your project, you can try something like this:
Assuming your inputs have ids:
<input id="username" name="username"/>
<input id="password" name="password"/>
<input type="submit" value="Submit" id="submit" />
You can bind to the keyup event on either input element to change the color of the button:
$('#username, #password').keyup(function(){
if ($.trim($('#username').val()) != '' && $.trim($('#password').val()) != '') {
$('#submit').css('background-color', 'red');
}
});
Here is the running fiddle:
http://jsfiddle.net/NS5z6/
HTML:
<input type=text id=username />
<input type=password id=password />
<input type=submit id=submit />
CSS:
#submit{ background-color: red; }
JS:
$('input[id="username"], input[id="password"]').change(function(){
if ($(this).val()!="")
{
$("input[id='submit']").css("background-color","green");
}else{
$("input[id='submit']").css("background-color","red");
}
});
You can use following logic
<input type = "text" name = "username" class = "text">
<input type = "password" name = "password" class = "text">
<input type = "button" class = "button">
<script>
$(".text").live("keyup", function(){
var filled = true;
$(".text").each(function(i, v){
if($(this).val() == ''){
filled = false
}
});
if(filled){
$(".button").css("background-color:#black");
}
});
</script>
I'm re-posting this in an attempt to be more specific in my question. I'm trying to combine the calculators found here: http://www.nhpta.com/over-tax-calculator.html.
I'd like the calculate button to be smart enough to know whether or not one of two input fields has a value entered and then perform one of two JS functions, Calculate or Calculate2. If both fields have values entered, I'd like it to throw an error in place of the button instead. This is my concept code below, I don't know how to define the php variables nor do I know how to tell it to look at each input field and determine if there has been a value entered. Also not sure if the print is the right?
<?php
$input_B = "form field named input_B";
$input_C = "form field named input_C";
if($input_B == 'has a value' && $input_C == 'has no value')
{
print ' <P><INPUT TYPE="button" VALUE="Calculate" name="AddButton" onClick="Calculate(this.form.input_A.value, this.form.input_B.value, this.form.input_C.value, this.form)"></P>';
}
elseif($input_C == 'has a value' && input_B == 'has no value' )
{
print ' <P><INPUT TYPE="button" VALUE="Calculate" name="AddButton" onClick="Calculate2(this.form.input_D.value, this.form.input_E.value, this.form.input_F.value, this.form)"></P>';
}
elseif ($input_C == 'has a value' && input_B == 'has a value')
{
print ' Please choose only one field to fill in';
}
else
{
print ' <P><INPUT TYPE="button" VALUE="Calculate" name="AddButton" onClick="Calculate(this.form.input_A.value, this.form.input_B.value, this.form.input_C.value, this.form)"></P>';
} // End if/else if
?>
The first if statment should be rewritten like this :
if(($input_B != "") && ($input_C == ""))
Then the logic is the same for the others
As long as the two input fields have (unique!) ids, you can do something like this:
var field0 = document.getElementById("field0id").value;
var field1 = document.getElementById("field1id").value;
if(field0 === ""){
if(field1 !== ""){
calculate();
}else{
//error
}
}elseif(field1 === ""){
calculate2();
}else{
//error
}
First of all, you shouldn't need to do anything server-side for this (that's where PHP runs). Instead use javascript. It should look something like this: (Bear in mind that this is using jQuery, which is a javascript library. You can learn about jQuery here.)
<label for="input1">Input 1</label>
<input type="text" name="input1" id="input1" /><br />
<label for="input2">Input 2</label>
<input type="text" name="input2" id="input2" /><br />
<input type="submit" value="Submit" id="submit" onclick="calculate();" <!-- you only need the onclick attribute if you're not using jQuery --> />
Edit: functions modified to perform the logic as defined in the question
<!-- pseudo-code with jQuery -->
<script language="javascript" type="text/javascript">
$("#submit").on('click', function() {
var input1Val = $("#input1").val();
var input2Val = $("#input2").val();
if (input1Val != "" && input2Val != "") {
alert("You may only enter a value in one input field.");
} else if (input1Val != "") {
calcFunc1(input1Val);
} else if (input2Val != "") {
calcFunc2(input2Val);
} else {
alert("You must enter a value in one of the input fields.");
}
});
</script>
<!-- pseudo-code with straight javascript -->
<script language="javascript" type="text/javascript">
function calculate() {
var input1Val = document.getElementById("input1").value;
var input2Val = document.getElementById("input1").value;
if (input1Val != "" && input2Val != "") {
alert("You may only enter a value in one input field.");
} else if (input1Val != "") {
calcFunc1(input1Val);
} else if (input2Val != "") {
calcFunc2(input2Val);
} else {
alert("You must enter a value in one of the input fields.");
}
}
</script>