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'])) {
}
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 have a form with the action set to "/resutls". But i have a txt input and i want to check if that is not empty to redirect to another location than "/results". Is this possible?
Code example as below:
<form id="results" action="/results" method="get">
<select id="country" name="country">
....
</select>
<input type="text" name="id">
<input type="submit" class="form-submit" value="Apply Search" name="submit">
</form>
Any ideas? Can this be done with jquery?
Sure you can do that in the submit handler. Warning: I wouldn't give a form control a name of id. It does cause confusion: if this refers to the form, should this.id refer to the id of the form or the text field with name="id"?
if( !!this.somefield.value ) { //did not want to write this.id.value !!!!
this.action = '/other-url';
} else {
this.action = '/results';
}
$(function() {
$('#results').on('submit', function(e) {
e.preventDefault(); // just so we can see that form action changes
if( !!this.somefield.value ) {
this.action = '/other-url';
} else {
this.action = '/results';
}
alert( this.action );
//$(this)[0].submit(); //now submit the form
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="results" action="/results" method="get">
<select id="country" name="country">
</select>
<input type="text" name="somefield">
<input type="submit" class="form-submit" value="Apply Search" name="submit">
</form>
Yes it is possible. Just set the form element's action property using jQuery .prop().
As a simple example:
var valid = false;
// go though validation here
if (false === valid) {
$('#results').prop('action', '/some/url/to/redirect/to');
}
HTML5 provides the "required" attribute wich will prevent the form for being posted, use it like this
<input type="text" name="id" required="required">
or, if you prefer to redirect to other page instead, you can do this
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script>
$("#results").submit(function (e){
e.preventDefault();
if($("#results input[name='id']").length < 1){
window.location.href = "your detiny url";
}
else{
this.submit();
}
});
</script>
now i have a input text, radio, and a submit button ..
lets say my url = image-search.php
<form>
<input type="text" name="name"><br>
<input type="radio name="arrange" value="horizontal"><br />
<input type="radio name="arrange" value="vertical"><br>
<input type="submit" name="submit"><br>
when i click the button..
it redirect same page but url = image-search.php?name=ss&arrange=horizontal
and this page still have the button..
the question is .. after i click button at 1st page = image-search.php
i want the user input value remain in the input text of name..
and how to make the checkbox as checked based on user choose?
If the page is reloaded when you submit the form you could use php to set default values for your form fields
<form>
<input type="text" name="name" value="<?php echo isset($_GET["name"])?$_GET["name"]:""; ?>"><br>
<input type="radio" name="arrange" value="horizontal"<?php echo (isset($_GET["arrange"])?($_GET["arrange"]=="horizontal"?" checked='checked'":""):""); ?>><br />
<input type="radio" name="arrange" value="vertical"<?php echo (isset($_GET["arrange"])?($_GET["arrange"]=="vertical"?" checked='checked'":""):""); ?>><br>
<input type="submit" name="submit"><br>
</form>
Here is the answer to your question.. hope this will help everyone..
#Macke - your approach for setting values after submission is really good, but when we have lot of elements on form.. let's say 1000 - it become pain in AS*..
Add this script tag in your HEAD tag of the page -
<script language="javascript" type="text/javascript">
var obj = JSON.parse('<?= json_encode($_REQUEST) ?>');
console.log(obj);
function __setPostBackValue(element){
if(obj.length <= 0) return;
var type = element.type;
var fval;
console.log('Processing...'+ element.name);
try{
eval('fval = obj'+'.'+element.name);
}
catch(ex){
}
if(type == 'text'){
element.value = fval;
}
if(type == 'checkbox'){
if(fval != undefined)
element.setAttribute("checked","on");
}
if(type == 'radio'){
if(fval != undefined && element.value == fval)
element.setAttribute("checked","on");
}
}
</script>
and at the bottom of the page, yes at the bottom of the page (before body ends) add another script tag -
<script language="javascript" type="text/javascript">
var fields = document.getElementsByTagName('input');
for(var i=0;i<fields.length;i++){
__setPostBackValue(fields[i]);
}
</script>
What it does ?
When you submit your form, var obj = JSON.parse('<?= json_encode($_REQUEST) ?>'); this creates local JSON Object usable by Javascript - and the script we added at the end of the page.. loop through all elements and call __setPostBackValue function. Where we are setting the values of the elements by Javascript.
This is little bit tricky but it works..!!
PS: I had no radio button in my page, but if you have you can add it easily.
-Paresh Rathod
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