Removing empty Input Elements from a form - php

I have a simple form that goes on to create all the form and validation requirements for codeigniter. What I want to do is filter out any empty inputs prior to serialization so that I do not create form inputs and form validation set rules. I am at a loss as to how to go about this. Where I have the alert in the Jquery is where I want to remove any empty inputs(again prior to serialization). At this point what I am using does not detect empty form fields. Without the detection code the entire system works fine. Here is what I am using
<h1>Field Name</h1>
<form action="Form.php" onsubmit="return false;" id="form" method="post">
<input type="text" name="v1" id="v1" />
<input type="text" name="v2" id="v2" />
<input type="text" name="v3" id="v3" />
<input type="text" name="v4" id="v4" />
<input type="text" name="v5" id="v5" />
<input type="text" name="v6" id="v6" />
<input type="submit" name="send" id="send" value="Send" />
</form>
<hr />
<script>
$(function(){
$('#send').click(function(){
---------------------------------------
$(":input").each(function() {
if($(this).val() === "")
alert("Empty Fields!!"); //using alert just to see if empty fields are detected.
return false;
});
-----------------------------------------
var data = $('#form').serialize();
$.ajax({
type: "POST",
data: data,
url: "Form.php",
success: function(msg){
if(msg){
$('#display').html(msg).show();
}else{
$('#display').text("<p>nothing came back</p>");
}
}
});
return false;
});
});
I am simply trying to avoid printing out empty form fields
<p>
<label for=""></label> <br />
<input type="text" name="" id="" /> <br />
<label class="error" id=""> This field is required</label> <br />
<p/>
Thank you for your time

This will remove all the text fields which have a value of length 0:
$('#send').click(function(){
$(':input[type="text"]').filter(function(e){
if (this.value.length===0){
return true;
}
}).remove();
});
example: http://jsfiddle.net/niklasvh/ZBSyX/

You should use a regex expression using \s as the search query. So /^(\s)*$/ as the regex and just make sure input does not match this.
Sorry but I am not familiar with Jquery or I would write the code out exactly.

$('#send').click(function(){
//---------------------------------------
$(":input").each(function() {
if($(this).val() === "")
alert("Empty Fields!!"); //using alert just to see if empty fields are detected.
return false;
});
And you're not getting an error from this? The first lambda's scope isn't closed.
Use Firebug to highlight errors that you might be getting and post those.

To hide elements that have no value assigned:
$('input:text[value=""]').hide();
But, of course, if a value="x" attribute is provided in the html this will result in the element being shown.

Related

Adding search query to the address bar

I have seen this done before but not sure how.
I am trying to have a search form go to pagename.php?q=[searchquery] so i can then get the searchquery from the address.
here is the form
<form class="sidebar-search">
<div class="input-box">
<input type="text" placeholder="Quick Product Search..." />
<input type="button" class="submit" value="" />
</div>
</form>
Here is the JS
// handle the search query submit on enter press
$('.sidebar-search input').keypress(function (e) {
if (e.which == 13) {
window.location.href = "search_results.php";
return false; //<---- Add this line
}
});
// handle the search submit
$('.sidebar-search .submit').click(function () {
if ($('.page-container').hasClass("sidebar-closed")) {
if ($('.sidebar-search').hasClass('open') == false) {
$('.sidebar-search').addClass("open");
} else {
window.location.href = "search_results.php";
}
} else {
window.location.href = "search_results.php";
}
});
Can anyone help with this?
You wouldn't actually need to do it using javascript
<form class="sidebar-search" method="get" action="search_results.php">
<div class="input-box">
<input type="text" placeholder="Quick Product Search..." />
<input type="submit" class="submit" value="" />
</div>
</form>
The action attibute defines the location (an URL) where the form's collected data should be sent.
The method attribute defines which HTTP method to send the data with (it can be "get" or "post").
This would probably help understand in detail.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form?redirectlocale=en-US&redirectslug=HTML%2FForms%2FMy_first_HTML_form
But if you still need to use javascript here the answer
define an id for the search field as below
<input type="text" id="txtSearch" placeholder="Quick Product Search..." />
and then
var searchString = $('#txtSearch').val();
window.location.href = "search_results.php?q=" + searchString;
Do this:
window.location.href = "search_results.php?q=" + $(".sidebar-search input[type=text]").val();
Or you can give an id to the search and get the value of the element with that ID.
if you hit enter/submit you go to search.php?query=value
<form method="get" action="search.php" >
<input name="query" type="text" />
<input type="submit" value="search" />
</form>

All Three Forms Get Empty in Single Click

I have Three forms in a page with different submit button and all HTML are properly closed.
all forms have different value..now problem is when i press submit button of any form for store value in database..another form field is get empty..how can i prevent them for stopping them.i want when i press a submit button of any form only these form value submit in database..other form field does not get empty..how can i solve this ..i have done coding for single form like this
<form class="form" method="POST" name="pool">
<label for="name1">Ist Player Name</label>
<input type="text" name="fname" id="fname" />
<label for="name2">2nd Player Name</label></td><td><input type="text" name="sname" id="sname" />
<label for="stime">Start Time</label>
<input type="text" name="stime" id="stime"
<label for="stime">End Time</label>
input type="text" name="etime" id="etime" />
<input type="submit" value="Confirm" name="pool" id="pool" />
</form>
same as 2nd and 3rd form .name are change of all form..and php coding of form like this
<?php
$con = mysql_connect("localhost","root","");
mysql_select_db("snookar", $con);
if(isset($_POST['pool']))
{
/* all procees to save record */
}
then 2 nd form
if(isset($_POST['snooke']))
{
/* all procees to save record */
} and so on...
now how can i done this only specified form value submit and another form does not empty...
You can do the following,
<form class="form" method="POST" name="pool1">
<!-- Form input fields -->
<input type="submit" value="Confirm" name="poolbtn1" id="poolbtn1" />
</form>
<form class="form" method="POST" name="pool2">
<!-- Form input fields -->
<input type="submit" value="Confirm" name="poolbtn2" id="poolbtn2" />
</form>
Now use the jquery to submit the form,
$("#pool1").submit(function(e) {
//Do your task here
return false; //this will prevent your page from refreshing
}
$("#pool2").submit(function(e) {
//Do your task here
return false; //this will prevent your page from refreshing
}
The ajax script.
$('input#form1button').click( function() {
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: $('form#myForm1').serialize(),
success: function(data) {
$("#myForm1").resetForm();
return false
}
});
});
Here in the above code form1button is the id of the button that is in the form i-e form with id myForm1
so repeat the same function for the rest of the two form with different form and button ids
Html
<form method='POST' aciton='' id='myForm1'>
some inputs goes here
<input type=button id=form1button />
</form>

Only send form (get) data if field is fulfilled (not validation)

I have a form, that is this one
<form method="get" action="<?php bloginfo('url'); ?>">
<input name="date-beginning" type="text" class="datepicker" />
<input name="date-end" type="text" class="datepicker" />
<input name="s" type="text" />
<input type="submit" value="Ok" class="botao-pequeno botao-pequeno-input" />
</form>
Well, when the user sends all the fields, we get this response:
http://myblogurl.com/?s=example&date-beginning=05/05/05&date-end=07/07/07
If he doesn't fill, for example the date-beginning field we get http://myblogurl.com/?s=example&date-beginning=&date-end=07/07/07
What I want is that if he doesn't fill the field, for example date-beginning, the form still be sent, but variable don't to get sent, like this: http://myblogurl.com/?s=example&date-end=07/07/07
Is there a way to do it? How?
var form = document.forms[0];
form.addEventListener('submit', function(){
var a = document.getElementsByName('date-beginning')[0];
if(a.value === '')
a.disabled = true;
});
karaxuna's anwser works. I just adapted it to jQuery, if any one is interested, this is the code
$("#the-form").submit(function() {
if($('#the-field').val() === ''){
$('#the-field').attr('disabled',true);
}
if($('#the-other-field').val() === ''){
$('#the-other-field').attr('disabled',true);
}
});

Javascript and Php (MVC)

i'm creating my own MVC Framework.
I have a basic form in my view
<form action="?" method="post" >
<input type="hidden" name="envoie" value="envoie" />
<?php dico('INSCRIPTION_NOM'); ?><input id="name" type="text" name="name" /><br />
<?php dico('INSCRIPTION_EMAIL'); ?><input id="email" type="text" name="email" /><br />
<?php dico('INSCRIPTION_PWD'); ?><input id="pwd" type="password" name="pwd" /><br />
<input type="button" value="<?php dico('INSCRIPTION_SINSCRIRE'); ?>" onclick="verifForm(document.getElementById('email').value);"/>
</form>
when I clock on the button they have a javascript function like that :
function verifForm(email) {
var url ="?c=Inscription&a=VerifForm&email="+email;
$.get(url, function(data){
alert('resultat == '+data);
});
}
Inscription was my controllers and VerifForm an method of the controller. email was the value of a input.
The Php function was :
public function actionVerifForm() {
echo "OK";
}
When i click on the button i have all the code of the page on my alert but i only want the message "OK".
Thanks for helping me
what you are doing is AJAX, am i right? the data parameter IS your result. AJAX returns the echo-ed page as a string. if you mean to place it in the page, try jQuery .html() or .text() for a text only, escaped version.
function verifForm(email) {
var url ="?c=Inscription&a=VerifForm&email="+email;
$.get(url, function(data){
$('#container-id-here').html(data); //html insert
$('#container-id-here').text(data); //text insert
});
}
and in your PHP, since you are doing AJAX, you should only echo what you need returned, and not the whole HTML mark-up (which means no <html><head>...</head></html>

jQuery form validation with dynamically generated forms

I have a page with several forms which are dynamically generated using PHP. I am validating them using the jQuery Validation plugin. The forms are all the same, but relate to different items so I have given all of the forms the same class so they can be validated by one function (each form also has a unique ID). But I'm having some problems:
I would like the error messages to appear by the correct form items, but if I'm just using the form's class, the validator won't know which form the item is from.
I have a hyperlink to submit the form (and a regular submit button in <noscript> tags), and would usually use jQuery to submit the form, but again, how will jQuery know which submit link I've clicked, and which form to submit?
The easiest thing I can think of is to pass the form ID to the validate some how. Is that possible?
The forms look like this:
<?php while($row= pg_fetch_row($groups)) { ?>
<p class="error" id="error-<?php echo $row[0] ?>"></p>
<form action="../scripts/php/groups-process.php" method="post" id="editgroup-<?php echo $row[0] ?>" class="editgroup">
<label for ="edit-<?php echo $row[0] ?>" >Edit group name:</label>
<input type="text" class="text" size="20" maxlength="30" name="edit" id="edit-<?php echo $row[0] ?>" value="<?php echo $row[1] ?>" />
<noscript><input type="submit" name="editgroup" value="Submit" /></noscript>
<div id="submitcontainer-<?php echo $row[0] ?>"></div>
</form>
<?php } ?>
I would normally validate the form like this:
$(document).ready(function(){
$("#editgroup").validate({
rules: {edit: {required: true, maxlength: 30}},
messages: {edit: {required: 'Please enter a group name', maxlength: 'Please enter a shorter group name'},
errorContainer: "p#error",
});
$("#submitcontainer").html('<a class="button" href="javascript:void();" id="submitlink" name="submit">Submit</a>');
$("#submitlink").click(function() {
$("#editgroup").submit();
});
});
give the same class to all the form than try this,
<form id="1" class="common" method="post" action="page.php">
<input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="whatever" />
<input type="submit" name="submit" class="submit_this_form" value="submit" />
</form>
<form id="2" class="common" method="post" action="page.php">
<input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="another value" />
<input type="submit" name="submit" class="submit_this_form" value="submit" />
</form>
<script type="text/javascript">
$(".common").submit(function(){
var form_id = $(this).attr('id');
var input_val = $(this).children('.common_input_class').val();
if (input_val == '')
{
alert("input field is required");
return false;
}
});
</script>
I ended up iterating through my result twice, so I create a form validator for each form dynamically, and then dynamically create the forms. This was the best way I could think of to give me the control I wanted, although obviously it's slower and produces more code - not an ideal solution but it will do for this situation.

Categories