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>
Related
I've got kind of a situation here : I have the following form :
<form action="sample.php" id="searchform" method="post">
<input type="text" id="key_words" name="key_words" value="<?php echo isset($_POST['key_words']) ? $_POST['key_words'] : '' ?>"style="width:377px;">
<input type="text" name="minimum_price" value="<?php echo isset($_POST['minimum_price']) ? $_POST['minimum_price'] : '' ?>">
<input type="text" name="maximum_price" value="<?php echo isset($_POST['maximum_price']) ? $_POST['maximum_price'] : '' ?>">
I'm using the php script in value because i need to keep the value in text box persistent. So, now i need to clear the values in text box when i click a button:
<button type="reset" value="clear" onclick="clearform()">Clear</button>
I've tried a few things and failed. Help please? JavaScript can also be used for clearform() method.
You just need to get the elements by id and set the value attribute to empty string:
function clearform()
{
document.getElementById('key_words').value = '';
//same thing for other ids
}
For your minimum_price and maximum_price you need to add an id since you only have name right now.
Also in this case since you don't want to use HTML's standard reset functionality don't make the button type reset.
It`s will be work for you:
<form action="sample.php" id="searchform" method="post">
<input type="text" id="key_words" name="key_words" value="test1"style="width:377px;">
<input type="text" name="minimum_price" value="test2">
<input type="text" name="maximum_price" value="test3">
<button type="reset" value="clear" onclick="clearform()">Clear</button>
</form>
<script>
function clearform() {
var form = document.getElementById("searchform");
var textFields = form.getElementsByTagName('input');
for(var i = 0; i < textFields.length; i++) {
textFields[i].setAttribute('value', '');
}
}
</script>
I've a page with two formulas one. Each one has it's own form with inputs etc. They both call the same Javascript function on key up.
Only the first one works, I kind of understand why but I can't find a resolution, I'm too new to Javascript to know how to tackle the problem. I can't change the structure of the JS file a great deal as other equations on other pages depend on this set up.
Is there a workaround?
Shortened HTML:
<div id="formula">
<p>To find ρ<sub>b</sub>:</p>
<form id="formula" name="formula">
<input type="hidden" id="formulaName" name="formulaName" value="porosityRhob"/>
<div>
<label>$\rho_{fl}$:</label>
<input type ="text" name="input" id="input" onkeyup="calculatePEFormula()"/>
</div>
<div>
<label>Result:</label>
<input type="text" id="result" name="result">
</div>
</form>
</div>
<br/>
<div id="formula">
<p>To find Φ:</p>
<form id="formula" name="formula">
<input type="hidden" id="formulaName" name="formulaName" value="porosityPhi"/>
<div>
<label>$\rho_{ma}$:</label>
<input type ="text" name="input" id="input" onkeyup="calculatePEFormula()"/>
</div>
<div>
<label>Result:</label>
<input type="text" id="result" name="result">
</div>
</form>
</div>
THE JS:
function PEFormula(result, formulaName){
this.result = result;
this.formulaName = formulaName;
}
function calculatePEFormula(){
var PEObject = new PEFormula($("#result"), $("#formulaName"));
var formulaName = $("#formulaName").val();
switch(formulaName){
case "porosityRhob" : PEObject.porosityRhoB();
break;
case "porosityPhi" : PEObject.porosityPhi();
break;
}
PEFormula.prototype.porosityPhi = function(){
var input = parseFloat($("#input").val());
//logic
return r;
}
The HTML attribute id is supposed to be unique
<div id="formula">
<form id="formula" name="formula">
<input type="hidden" id="formulaName" name="formulaName" value="porosityRhob"/>
<input type ="text" name="input" id="input" onkeyup="calculatePEFormula()"/>
<input type="text" id="result" name="result">
Try changing these ids instead use classes
Here is the solution change all field ids to class and form id should be different and pass parameter id of form as parameter onkeyup="calculatePEFormula('form#formula1')" and onkeyup="calculatePEFormula('form#formula2')" Now in js
function PEFormula(result, formulaName){
this.result = result;
this.formulaName = formulaName;
}
function calculatePEFormula(form_id){
var PEObject = new PEFormula($(form_id+" .result"), $(form_id+" .formulaName"));
var formulaName = $(form_id+" .formulaName").val();
switch(formulaName){
case "porosityRhob" : PEObject.porosityRhoB();
break;
case "porosityPhi" : PEObject.porosityPhi();
break;
}
PEFormula.prototype.porosityPhi = function(){
var input = parseFloat($(form_id+" .input").val()); //provide the form id here
//logic
return r;
}
You're using ID's when you should be using classes.
You need to avoid assigning the same id attribute to multiple elements. An element's ID should be unique.
Never use the same id for multiple elements. That's a basic concept in HTML. An identification should be unique and identical. So there cannot be any duplicated IDs inside any HTML page. So please change the ids of 2nd form,
<div id="formula2">
<p>To find Φ:</p>
<form id="formula2" name="formula">
<input type="hidden" id="formulaName2" name="formulaName" value="porosityPhi"/>
<div>
<label>$\rho_{ma}$:</label>
<input type ="text" name="input" id="input2" onkeyup="calculatePEFormula()"/>
</div>
<div>
<label>Result:</label>
<input type="text" id="result2" name="result">
</div>
</form>
</div>
Change the IDs accordingly when calling the same js function.
I have renamed all the IDs by adding 2 at the end of each ID. Make every ID unique.
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);
}
});
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.
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.