In the following code, I would like to change the value of data-filter to a user-submitted field, and then, incorporate that input into the link.
<a href="#" id="gallery_filter" class="sidebar-search"
data-filter="(get user input here)">
So far I've tried ajax objects, jquery mobile filters and regular HTML. I've tried about 20 different approaches, the most recent with jQuery mobile filters.
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search tags..." data-inset="true">
<!-- foreach $tags as $tag [get all tags loop] -->
<li>$tag[0]</li>
</ul>
If I understand the question, you want to modify the DOM (in your case, a link), based on user input. If that's the case, you don't have to submit the form and you should basically take a straightforward approach, using simple jQuery:
$(function() {
var input_el = $("#user_input");
var link_el = $("#link");
input_el.keyup(function() {
var value = input_el.val();
link_el.attr('data-filter', value);
});
});
You can see this in action here, in this example: http://jsfiddle.net/4bBSF/
However, if you really have to submit a form, you can also add a function to be executed onsubmit:
<form onsubmit="updateLink()"> ... </form>
onsubmit functions are executed before the form is sent. Then the updateLink function would do something similar to the example above, adding the value of the input to the link.
Now, if you really want to go further and try something fancy, read about data-binding. There are a bunch of libraries and frameworks supporting data binding, including AngularJS, Ember and Meteor.
Related
I have a php page holding a data grid generated by jQuery lets say dataGrid.php
and 2 divs on the home page some thing like this
dataGrid.php
<script>
generate the grid
</script>
<body>
<lightbox><div> close me </div>
<div > holding the dataGrid </div>
</lightbox>
</body>
NOTE: I mean a popup box when I say this is not a real valid HTML tag I am using
and here is the home page
<body>
<div> click here to see the grid </div>
<div> <?php include dataGrid.php ?></div>
</body>
I have a close button on dataGrid.php. I am closing the include using jQuery remove() but remove() refreshes the home page which is what I don't want. I am also not sure id remove() command is really cross browser?
My question: Is there any way or method to close dataGrid.php and the light-box without refreshing the home page?
I have checked 3 other questions posted on stack-overflow with the same question title but different in the question body.
If your close button is interactive (i.e. a hyperlink) you'll need to call preventDefault() on the event to prevent the browser from treating it as interactive.
Before I begin it's worth reiterating what I said in my comment on this question: <lightbox> isn't a valid HTML element and will fail validation tests. For this answer, however, I'm going to use this as this is given the code you've provided.
Assuming your code is something like this:
<lightbox>
Close Me
...
</lightbox>
You'd prevent the hyperlink from functioning by passing in the event and calling event.preventDefault():
$('lightbox').on('click', 'a.close', function(event) {
event.preventDefault();
$('lightbox').remove();
});
Alternatively you can simply change your close button to something which isn't interactive, like a span for example:
<lightbox>
<span class="close">Close Me</span>
...
</lightbox>
$('lightbox').on('click', 'span.close', function() {
$('lightbox').remove();
});
For those who have it with an onclick, and doesn't know if the event is reachable within the function:
<button class="remove-form" onclick="remove_form(this);">Remove this form</button>
function remove_form(button){
jQuery(button).parent().remove();
event.preventDefault();
}
I am working on a tag system:
1.you can select some tags from a list and display them in a tag container (the tag can be selected only once and the sum is limited to 10), and different tag has different colors.
2.you can delete some selected tags in the tag container
3.pass the information to the php and store in the database.
4. display the tags in another page and you can update the selected tag list in this page.
For now the first two steps has finished by javascript but I am quite confused how I can pass the selected information to the php and the database （the content and colors) so they can be displayed and updated in another page.Anyone can give me some suggestions? Thanks.
The link to the jsfiddle is http://jsfiddle.net/V9Euk/1015/
Here is the html:
<ul>
<li data-val="300"><span class="label label-morning">Morning</span></li>
<li data-val="301"><span class="label label-afternoon">Afternoon</span></li>
<li data-val="302"><span class="label label-evening">Evening</span></li>
</ul>
<div class="tagHandler">
<ul class="tagHandlerContainer" id="tag_handler">
</ul>
</div>
here is the javascript:
$(function(){
var tags = [];
function add_tag(that){
var tag = $(that).text();
if($.inArray(tag, tags)>=0|| tags.length >= 10) return;
tags.push(tag);
var singleValues = $(that).find('span').clone();
singleValues[0].innerHTML += "×";
$("#tag_handler").append(singleValues);/*display the selected tags in the tag_handler with × style*/
}
$("li").click(function(){
add_tag(this);
});/*add tags to the tag_container when click the li*/
$('#tag_handler').on('click', 'span', function(){
var tag = $(this).text();
var index = $.inArray(tag, tags);
tags.splice(index,1);
$(this).remove();
});/*remove the tag when click this tag in the tag_container*/
});
First of all the jsfiddle link doesn't work for me.
Now, the only way is to use http methods like POST/GET to pass the data from client to server. The implementation depends of what you like the most or better a friendly and easy to use interface, so my suggestions are:
You can create (dynamically or not) a form (with hidden fields for example) and update their values with JS and pass the data through a submit button which is an easy implementation.
An another implementation is to use Ajax if you take care of user selection and create the data structure dynamically.
In both cases, you should validate the correctness of the submitted data with php. Never trust the user or the "supposed" JavaScript restrictions.
I would like to be able to check the text in a text-box after it has changed, and report what is wrong.
It is for a registration form.
This is a part of register.php where
<form action"" method="post">
<ul class="ul-reg">
<li>
<p>Username: </p><input name="username-field" type="text" onblur="someFunction()" /><span id="UsernamehelpText"> </span>
</li>
</ul>
</form>
Then I would have a registerfunctions.php where i would store all the functions for checking lenght,char,maybe regex etc.. Its not really that important what functions i call. I just don't know how to call them.
Form what i have seen the span is where u post the errors, but if there is any other option im open for it, all i want is to be able to post the erorr text in the same line as the text-box
I have checked JavaScript and AJAX, but I am pretty new in this and don't really understand how it works.
After discussion in comments I understand what you want.
First, an explanation. There are two places where validation occurs: In your frontend (your web page) and in your backend (in the PHP script that saves the posted values). Anything that you really don't want to save - for example unescaped SQL strings, too-long fields, and so on - has to be validated in PHP, because it is trivial to get around Javascript validation. For example, nothing is stopping someone from sending a POST to your server containing illegal values without even bothering to visit your webpage.
Even though you need to perform validation in the back-end, it's still user friendly to do the same validation in the front end, so the user doesn't have to wait as long to see an error. This also reduces traffic to your server. Something you probably want to do in a big project is to have some kind of system for writing validation rules centrally, and then using those rules to dynamically generate both PHP and Javascript validation. The advantage of doing that is that you don't duplicate your business rules in two places, but in a smaller project it's probably not worth the hassle.
Validation in the frontend looks about like this: You bind an event handler to an appropriate event or events (you can add onkeydown="validateUserName()" for example, so that the validation reacts a bit quicker), and update your warning text appropriately.
<form action="" method="post">
<ul class="ul-reg">
<li>
<p>Username: </p>
<input id="username" name="username-field" type="text" onblur="validateUserName()" />
<span id="UsernamehelpText"></span>
</li>
</ul>
</form>
<script type="text/javascript">
function validateUserName() {
var userNameElement = document.getElementById('username');
//Do your work: Get the value of the user name field, check
// the values against your validation rules...
var helpText = document.getElementById('UsernamehelpText');
if(isValid)
helpText.innerHTML = "";
else
helpText.innerHTML = "Invalid!";
}
</script>
In the backend, when you process the form, you then have to check the same rules in PHP to prevent illegal values from being posted either maliciously or due to an error in your Javascript. If an error is found, you don't save, instead you can just re-render the form with the submitted values in the input fields and a message indicating what was invalid - this allows the user to change their inputs without losing the values they submitted.
With jQuery it would look something like this:
function someFunction() {
$.ajax({
url: "checkStuff.php",
data: $("input[name='username-field']").serialize,
success: function(data) {
if (data == "correct") {
$("#UsernamehelpText").html("Valid");
} else {
$("#UsernamehelpText").html("Invalid");
}
}
});
}
Your PHP could be something very simple that just checks the validity of the input and then echos "correct" if it is.
I am trying to create a list of links that would make up the elements of a form (will be used as a search feature).
Basically, each link in the list represents a search category, so as users click on a link, their search results will be filtered.
I would need a category value to be able to be passed whenever someone clicks on one of those category links, and also have each link act as the form submit as well. Is that possible?
(There may be easier ways to accomplish this, however with the CMS and search module I'm using, this will have to do.)
Are you trying to pass values via both POST and GET? I am not sure that that would work. Why not just used hidden form fields? In your form, add a number of <input type="hidden" name="foo" value="bar"> and each one of them will be passed back to the server along with all the regular form fields.
Note: Hidden form fields can be read and edited by a sufficiently tech savy user (it is not too hard), but this would be the case with any variables that you are passing between the server and client, even cookies.
If you give the links an internal data-category attribute like this:
Foo
then you can do with jQuery:
$('a[data-category]').click(function() {
filterResults($(this).data('category')); // call the function that filters
// results according to chosen
// category
$('#theform').submit();
}
You can do something along the lines of...
Puma
and use the a script like...
$('a.category').click(function(e) {
$('#someForm input[name=category]').val( $(this).text() );
$('#someForm').submit();
});`
I'm not 100% sure what you intend to do with the data from the link, or even which part of it you need, but I hope this helps.
<form name="myForm">
link
</form>
<script>
function submitMyForm(link){
var mylinkText = link.text;
var myLinkHref = link.href;
document.myForm.submit();
}
</script>
If you need the link clicked to come across as part of your form data, perhaps you could put it in a hidden field on the form... something like:
document.myForm.myHiddenLinkField.value = mylinkText;
Since the jQuery tag has been removed, here's an example of doing this form submit with pure javascript:
http://www.neubreed.com.au/blog/2010/07/submit_form_anchor_tag_using_javascript_and_supply_action
You can create an extra hidden input like in the example to set your category:
function submitForm(id, category){
var myform = document.getElementById(id);
if (document.createElement) {
input = document.createElement('input');
input.type = 'hidden';
input.name = 'category';
input.value = category;
myform.appendChild(input);
}
myform.submit();
return false;
}
Then, in your form:
click
You could work with a hidden field.
<form id="cuteform" action="thedestiny.php">
<input type="hidden" id="filter"/>
</form>
<a onclick="javascript:linkaction(this);" id="linkA">blablabla</a>
<a onclick="javascript:linkaction(this);" id="linkB">blablabla</a>
<script>
function linkaction(link) {
// get the field
var f = document.getElementById("filter");
// then you could use some of the link element's property like id or innerHTML
f.value = link.id;
// or you could use a switch structure
switch (link.id) {
case "linkA": f.value = "the huge filter string"; break;
case "linkB": f.value = "another stuff"; break;
}
// submit the form
document.getElementById("cuteform").submit();
}
</script>
I'd be inclined to style an actual form button as a link using CSS.
So essentially for each "link":
<form method="get">
<input type="submit" class="form-link">
</form>
For the CSS (off the top of my head) something like this should do it:
.form-link {
background-color: transparent;
border: none;
text-decoration: underline;
color: #00f;
}
That way it isn't dependent on JavaScript to work and users without it will still be able to make use of your site. Additionally, inline event handlers (onclick) etc shouldn't be used as they mix semantics with behaviour. If the functionality isn't core to the experience and (perhaps therefore doesn't require a base non-JavaScript version) then write the links into the page with JavaScript from an external JavaScript include. You won't then have a bunch of dead links in the page for users that visit your site with JavaScript disabled or from a non-JavaScript capable device.
i have a list of names with "delete" button, every row is a form and clicking on delete the list should be updated in real time but don't works because in this plugin i can set only one id (infact it runs when in the list there's only one name)
this is the javascript function:
$(document).ready(function() {
var options = {
target: '#risposta',
resetForm: true,
success: function(showResponse) {
$("#lista_categorie").load("categorie.php").show('fast');
$('#risposta').fadeIn(2000),setTimeout(function({$('#risposta').fadeOut(1000);},5000);}};
$('#elimina_categoria').ajaxForm(options);
});
the html form is build with php:
<form action="categorie_elimina.php?id=$row['id']" method="post" id="elimina_categoria">
<p>$row['nome']
<input type="submit" id="submit_pro" value="elimina" class="elimina"></p>
</form>
i should create a different id for every form (using the id of the row for example) but i should tell to js function that every form must follow that function in this line:
$('#elimina_categoria').ajaxForm(options);
i also used this code:
$('[id|=elimina_categoria]').ajaxForm(options);
but this only works at first click, clicking the second time it opens the php script..
hope you can help me, sorry for bad english
First of all:
Instead of creating several forms with the same id, you should create several forms with the same class. The same value for the ID-attribute should only be used once. Example
<form id="elimina_categoria_1" class="elimina_categoria"> ... </form>
<form id="elimina_categoria_2" class="elimina_categoria"> ... </form>
Please use a more descriptive naming than _1, _2 ... though, if possible.
When each form has the same class, you can call ajaxForm(options) using
$('form.elimina_categoria').ajaxForm(options)
Second:
The script you're probably looking for is something like this
function eliminaCategoria() {
var eliminaForm = $(this).parent().parent(); // Select the form of the button
$.post(eliminaForm.val('action')); // Call the action defined by the form
eliminaForm.remove(); // Remove the form-element from the page.
return false; // don't let the submit-button submit the form.
}
$(document).ready( function() {
$('.elimina').bind('click', eliminaCategoria);
});
The script might not work as-is in your current situation, but I hope this helps you forward. You probably want add the fadeIn, fadeOut effects you used and you might want to check the results of the HTTP POST request before deleting the form from the page.