After wasting like 2 days with this problem i finally decided to post this here and hope someone can help me. I work with "iCheck" (http://icheck.fronteed.com/) but also tried similar libraries that work roughly the same way. I try to achieve fancy checkboxes in form of a button - a pretty common thing i guess.
Now with iCheck and the other libraries i tested i always have one problem: I build my code to send an AjaxRequest to work with the data provided in a form and then reset the form. That works pretty neat, except for these chechboxes. If i change them to the other state they are not initialized with (like from FALSE to TRUE) and reset the form the button visually stays on that state until you click it once again. I works like it should with "normal" checkboxes.
I rebuild a small testpage and put it into jsfiddle. Is this a bug or am i totally overseeing something there? Can someone explain to me why that happens and how to engage with this?
HTML:
<form id="form">
<input type="checkbox" class="check_test" name="test" value="1"><label>Checkbox 1</label>
<input type="checkbox" name="test2" value="1"><label>Checkbox 1</label>
<br/>
<button type="reset" onClick="this.form.reset"> Reset </button>
</form>
Javascript:
$(document).ready(function(){
$('.check_test').each(function(){
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line-blue',
radioClass: 'iradio_line-blue',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
});
https://jsfiddle.net/p80dctkv
Thank you in advance.
You can add js like this to remove checked ichek
$(":radio").prop('checked', false).parent().removeClass('checked');
Related
I have a web application based on bootstrap (so, using jquery), and I'm trying to convert a classic html form-based search form to an ajax search form (to avoid page reload).
In the classic form-based, the button sends the html form as post, and the action page returns a table of results below the same form.
something like:
<form action="/search" method="post">
<input type="text" name="searchterms">
<button type="button" onclick="submit();">Search!</button>
</form>
In the ajax version, there is no form, but just a text field and the button calls a dosearch() function which makes an ajax request to a back end script which return search results, which are then used in a target DIV, showing a table of results, below the search input+button.
<input type="text" name="searchterms">
<button type="button" onclick="dosearch();">Search!</button>
Both work fine, but the second way avoid the browser to "collect" previously used search terms - I guess because there's no "submit".
My users like this "previous search terms" suggestion, and I would like to add it back, if possible, in the search "ajax" form.
I also tried to create an html form anyway, which encloses the input and the button, adding this event to its tag:
onSubmit='dosearch();return false;'
(if I don't return false, the form is submitted and action page loaded), like:
<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms">
<button type="button" onclick="dosearch();">Search!</button>
</form>
but even this seems not to work: new search terms are not "remembered" and suggested typing in the field...
I thought maybe my dosearch() function could add (most recent) search terms into a session/cookie but then I would need to read those stored values and create, each time, a sort of "dropdown" list for the input field, just as browsers usually do automatically... it should be not complicated but probably overkill...
Is there any way to make browsers "remember" inserted values even without submit? If not, what workaround is best/easiest?
edit: I've just found this
input remembered without using a form
but maybe after 5 years something changed?
I just tried to change the "button" type, to a "submit", and in this way it seems to work... page is not reloaded, ajax fills the results div and my new terms are remembered...
like:
<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms">
<button type="submit" >Search!</button>
</form>
it seems that if the "submit" is triggered through a "submit" button (even if it return false) the browsers stores input field values...
you need to do with ajax
<form onsubmit='dosearch();return false;'>
<input type="text" name="searchterms" id="searchTerm">
<button type="button" onclick="dosearch();">Search!</button>
<script type="text/javascript">
function dosearch(){
val = $("#searchTerm").val();
$.ajax({
url: "LoadProduct.php?val ="+val,
type: "GET",
processData: false,
contentType: false,
}).done(function(respond){
$("#LoadProductTd"+no).html(respond);
$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true});
});
}
</script>
so you can create LoadProduct.php file and in file you will get your search term n $_GET['val']
so you can use this for your query
I am trying to use jQuery validate for a form.
I have added
<script type="text/javascript" src="Scripts/jquery.validate.js"></script>
My form:
<form id="Main">
<asp:TextBox ID="Box" name="box" required runat="server"
</form>
At bottom of page
$('#Main').validate();
This works. Which is great. But if I remove the required attr and try say
$('#Main').validate({rules:{box:{required:true}}});
This does not work. For the life of me i cant figure out what I am doing wrong.
In the end I need that input to be required and numeric.
I tried adding 'number' as an attribute but that didn't work either.
some guidance would be great.
Thanks.
There are a number of validation plugins available, after some searching I think I found the plugin you're using based on the usage here.
I created a fiddle to demo how to make a field required and numeric ... click here for fiddle.
Based on the code you provided, it looks like you're only including the base validate.js library. You need to be sure to include the css file, and if you want to use some out of the box validations, such as number validations then you will also need to include the additional-methods.js file. All these files can be found HERE.
Here is the code from the fiddle above..
<form id="myform">
<input type="text" class="box" id="box" name="box">
<br/>
<input id="submit" type="submit" value="Validate!">
</form>
$(document).ready(function()
{
$("#myform" ).validate(
{
rules:
{
box:
{
required: true,
number: true
}
}
});
});
I am trying to implement something like this.
http://app.maqetta.org/mixloginstatic/LoginWindow.html
I want the login page to load but if you click the signup button then an ajax will replace the login form with the signup form.
I have got this to work using this code
dojo.xhrGet({
// The URL of the request
url: "'.$url.'",
// The success callback with result from server
load: function(newContent) {
dojo.byId("'.$contentNode.'").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});'
the only problem is the new form just loads up as a normal form, not a dojo form. I have tried to return some script with the phaser but it doesnt do anything.
<div id="loginBox"><div class="instructionBox">Please enter your details below and click <a><strong>signup</strong>
</a> to have an activation email sent to you.</div>
<form enctype="application/x-www-form-urlencoded" class="site-form login-form" action="/user/signup" method="post"><div>
<dt id="emailaddress-label"><label for="emailaddress" class="required">Email address</label></dt>
<dd>
<input 0="Errors" id="emailaddress" name="emailaddress" value="" type="text"></dd>
<dt id="password-label"><label for="password" class="required">Password</label></dt>
<dd>
<input 0="Errors" id="password" name="password" value="" type="password"></dd>
<dt id="captcha-input-label"><label for="captcha-input" class="required">Captcha Code</label></dt>
<dd id="captcha-element">
<img width="200" height="50" alt="" src="/captcha/d7849e6f0b95cad032db35e1a853c8f6.png">
<input type="hidden" name="captcha[id]" value="d7849e6f0b95cad032db35e1a853c8f6" id="captcha-id">
<input type="text" name="captcha[input]" id="captcha-input" value="">
<p class="description">Enter the characters shown into the field.</p></dd>
<dt id="submitButton-label"> </dt><dd id="submitButton-element">
<input id="submitButton" name="submitButton" value="Signup" type="submit"></dd>
<dt id="cancelButton-label"> </dt><dd id="cancelButton-element">
<button name="cancelButton" id="cancelButton" type="button">Cancel</button></dd>
</div></form>
<script type="text/javascript">
$(document).ready(function() {
var widget = dijit.byId("signup");
if (widget) {
widget.destroyRecursive(true);
}
dojo.parser.instantiate([dojo.byId("loginBox")]);
dojo.parser.parse(dojo.byId("loginBox"));
});
</script></div>
any advice on how i can get this to load as a dojo form. by the way i am using Zend_Dojo_Form, if i run the code directly then everything works find but through ajax it doesnt work. thanks.
update
I have discovered that if I load the form in my action and run the __toString() on it it works when i load the form from ajax. It must do preparation in __toString()
Firstly; You need to run the dojo parser on html, for it to accept the data-dojo-type (fka dojoType) attributes, like so:
dojo.parser.parse( dojo.byId("'.$contentNode.'") )
This will of course only instantiate dijits where the dojo type is set to something, for instance (for html5 1.7+ syntax) <form data-dojo-type="dijit.form.Form" action="index.php"> ... <button type="submit" data-dojo-type="dijit.form.Button">Send</button> ... </form>.
So you need to change the ajax contents which is set to innerHTML, so that the parser reckognizes the form of the type dijit.form.Form. That said, I urge people into using a complete set of dijit.form.* Elements as input fields.
In regards to:
$(document).ready(function() {});
This function will never get called. The document, youre adding innerHTML to, was ready perhaps a long time a go.
About Zend in this issue:
Youre most likely rendering the above output form from a Zend_ Dojo type form. If the renderer is set as programmatic, you will see above html a script containing a registry for ID=>dojoType mappings. The behavior when inserting <script> as an innerHTML attribute value, the script is not run under most circumstances (!).
You should try something similar to this pseudo for your form controller:
if request is ajax dojoHelper set layout declarative
else dojoHelper set layout programmatic
I have this problem :
I have a submit button defined as follows :
<input type="submit" name="actionName" value="search" />
<input type="submit" name="actionName" value="New" />
both submit buttons are included in an Ajax beginForm:
#using (Ajax.BeginForm("PFSearch", "Payer", ajaxOptions))
In the controller ... based on the actionName string provided .. i do different actions based on the value of button pressed within my Ajax befin form :
if (actionName="search")
{
//do something
}
And everything works like a charm .. until i want to add i want to add an image to the class of my submit button :
<input class="search" type="submit" name="actionName" value="search" />
<input class="search" type="submit" name="actionName" value="New" />
My search tab looks like this :
As you can clearly see my main impediment is that by adding value ... the text appears over my image.
How can i make those button act differently within my ajax begin form considering that giving value to the buttons doesn't work ? Any alternatives or workarounds are appreciated. Thanks !
Can you please give us a link to your project's demo? And try to use some margin, padding and background-position:center;
i'm learning it, but i cant find what's wrong in this!
i want the div2 to get data from the form in div1, called formulario.
i would like to know which item is selected and which button was clicked.
main html file:
<script src="utils/Scripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function sendf(formul, divi, php)
{
var params = Form.serialize($(formul));
new Ajax.Updater(divi, php, {method: 'post', parameters: params, asynchronous:true});
}
</script>
</head>
<body>
<div id="div1">
contenido div1
<form id="formulario" method="POST">
<select size="3" id="lista" onchange="sendf('formulario', 'div2', 'prodiv1.php');">
<option>elemento 1</option>
<option>elemento 2</option>
<option>elemento 3</option>
</select>
<input type="button" id="b1" value="bot1" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
<input type="button" id="b2" value="bot2" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
</form>
<div id="div2" style="background: blue;">
contenido div2
</div>
</div>
</body>
</html>
the php file, prodiv1.php:
<?
echo 'exec: prodiv1.php<br>';
print_r($_POST);
echo serialize($_POST);
if (isset($_POST))
{
foreach ($_POST as $key=>$value)
{
echo $key.'=>'.$value."<br>";
}
}
echo "select: ".$_POST['lista'];
if (isset($_POST['b1'])) {echo 'click: boton1';} else {echo 'click: boton2';}
?>
i've tried a lot of things, and seen that it could be done with event observers, httprequests and such, but what i need is quite easy, and probably there's an elegant way to solve it...
i thank in advance any help!
have a nice day.
guillem
if you dont need to actually process the form contents in some way then you have no need to use Ajax to pass to a PHP script. Depending on what exactly you wanted to display in div 2 you could do something as simple as this:
function sendf()
{
var listvar = $('lista').value;
$('div2').update('select menu value was ' + listvar);
}
This is obviously missing quite a lot of detail and can be massively improved but it should highlight the fact that AJAX is not required.
Edit Looking at the rest of the code you have posted, is AJAX really required for this? surely you are just updating the existing page with data already present on the page, the server has no real part to play in this?
Sorry to dive into jQuery again, but this should allow you to get the values into "div2" without an ajax request.
$(document).ready(function() {
$("input").click(function(e) {
$("#div2").html($(this).attr("id")+" clicked<br />");
updateList();
});
});
function updateList() {
$("#div2").append($("#lista").val() + " selected");
}
In plain English this code says "if an input element is clicked, update the value of div2 with the input variables id, and append the selected value from the list to the result". Hopefully that makes sense to you :)
If you need an easy, elegant way to solve this with AJAX, use the jQuery library's ajax and post methods. For more information take a look here, it will significantly cut down on the size and complexity of your code.