I have the following code working with a simple datepicker;
when I click on the button the picker displayed.
I need this to be work with a multidatespicker:
Simple datepicker JS script.
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker();
$('#btnRepercute').click(function() {
$('#date').datepicker('show');
});
});
</script>
HTML input fields.
<input type="button" value="Répercuter" class="button" id="btnRepercute"/>
<input type="text" id="date" class="hidden" />
Attempts so far with multidatespicker
$('#date').multiDatesPicker();
$('#btnRepercute').click(function() {
$('#date').multiDatesPicker();
});
Nothing happens, no errors in the console.
Thanks in advance for your help!
First you need to unregister the datepicker event and then attach the multiDatesPicker event , after that focus the element
$('#btnRepercute').click(function() {
$("#date").datepicker( "destroy" );
$('#date').multiDatesPicker();
$('#date').focus();
});
Hope it works fine
Related
I am trying to send my form values to php page in order to perform SQL requests to my server according to my form values. This is original php with form and ajax script:
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<form enctype="multipart/form-data" method="post">
<input type="datetime-local" name="start" id="start">
<input type="datetime-local" name="finish" id="finish">
<input type="checkbox" name="consta" id="consta" value="tru"> Remove const
<input type="submit" name="apply" id="apply">
</form>
<script>
$('#apply').click(function(){
var data= $('form').serialize();
$.post('gensetapply.php', data);
});
</script>
And in gensetapply.php I am trying to get variables through $_POST:
<?php
$con=$_POST['consta'];
$str=$_POST['start'];
$fin=$_POST['finish'];
echo $con.", ".$str.", ".$fin;
?>
So, I am sure my ajax request is not working.
I am new to this things and have wrote code above looking to similar examples, so please feel welcome to point out my mistakes. There might be a typo cause I am handtyping it again here, not copy-paste from source.
EDIT:
It was working, I just couldn't see it when i refresh the page, but through devtools in Chrome (Network>Response) I. Hope it'd help some other fools like me ;)
1st : Your using post method to post the data to server so you need to prevent the default submit
<script>
$('#apply').submit(function(e){
e.preventDefault();
var data= $('form').serialize();
$.post('gensetapply.php', data);
});
</script>
2nd : or Simple change the type="submit" to type="button".
Here 'Apply 'button type is submit. Therefore your form submits immediately. As you are handling form submission through ajax so the solution is you need to stop submitting form. You can fix it returning false in click event like following
<script>
$('#apply').click(function(){
var data= $('form').serialize();
$.post('gensetapply.php', data);
return false;
});
</script>
I am trying to create a button that is unclickable at first. But when the user types in anything in a textfield, the button should be clickable. How do I do that? I know this will involve AJAX and I really don't know how to use AJAX. Any ideas how? Thank you in advance!
EDIT: I forgot to add that my textfield and button are inside separate fields in a CGridView. I'm sorry.
$('#some_text_box').on('input', function() {
$("button").prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="some_text_box" type="text"/>
<button id="button" type="button" disabled>Click Me!</button>
with jquery
jQuery('#some_text_box').on('input', function() {
$("#button").prop('disabled', true);
});
Use jquery keyup function DEMO
<input type='text' id='t1'/><button disabled id='button'>submit</button>
jquery:
$('#t1').on('keyup', function(){
if($(this).val() != "") {
$('#button').prop('disabled',false);
}
else {
$('#button').prop('disabled',true);
}
});
can anyone please help. i have this login form:
<form id="myform" form action="login.php" method="post" class="loginform">
Email
<input type="text" name="email" maxlength="30" />
Password
<input type="password" name="password" maxlength="30" />
<input type="image" src="../PTB1/assets/img/icons/loginarrow1.png" name="submit" class="loginbutton" value="Login" />
</form>
i also have this script which brings up the form action page "login.php" in a popup window when my form is submitted.
at the moment it brings up a basic pop up window but i want to know if i can tweak the jquery code to implement a jquery lightbox window which opens up instead.
heres the jquery code that launches the pop up window when my login form is submitted.
<script>
$(document).ready(function() {
$('#myform').submit(function() {
window.open('', 'formpopup', 'width=400,height=400');
this.target = 'formpopup';
});
});
</script>
but now i want to have this pop up window open using my jquery lightbox window which is called "shadowbox" (available to download on the net) which you would normally open your links with like so.
<a href="link" rel="shadowbox;height=300;width=500" >link</a>
so just to be clear, i am asking if there is a way to launch my jquery lightbox "shadowbox" in place of the normal pop up window which is being launched when the user clicks the submit button on the login form.
Please can someone show me a way of doing this. thank you.
I would add e.preventDefault() to the previous statement
$(function() {
$('#myform').submit(function(e) {
e.preventDefault();
this.target = 'formpopup';
Shadowbox.open({
content: 'link',
height: 300,
width: 500
});
});
});
$(function() {
$('#myform').submit(function() {
this.target = 'formpopup';
Shadowbox.open({
content: 'link',
height: 300,
width: 500
});
});
});
I am using the following code to effect an iframe that allows an ajax file upload on submit of the form without refresh.
This works as expected
window.onload=init;
function init() {
document.getElementById('form').onsubmit=function() {
document.getElementById('form').target = 'iframe';
}
}
What i would like to do is the same thing but 'onchange' of the file field input, i.e. when the user has chosen a file, to autmatically trigger the init() function and thus upload the file. I have tried with this code:
document.getElementById('file').onchange=function(){...
This doesn't work, and i'm completely stuck. Any ideas?
Many thanks
This should work for you
<script type="text/javascript">
window.onload = function() {
// add old fashioned but reliable event handler
document.getElementById('file_input').onchange = function() {
// submit the form that contains the target element
this.form.submit();
}
}
</script>
<iframe name="my_iframe"></iframe>
<form target="my_iframe"
action="your/file.ext"
method="post"
enctype="multipart/formdata">
<input type="file" name="my_file" id="file_input">
<!-- for no js users -->
<noscript>
<br/>
<input type="submit">
</noscript>
</form>
i think something like .live() will solve your issue hopefully, comment if you want more info on how to use it...
Give the file input element an id and:
$(document).ready(function(){
$(element).change(function(e){
fileInfo = e.currentTarget.files[0];
init();
});
});
There are similar questions at SO, but none that seem to address this.
Below is a very simplified variant of my situation. Drupal/PHP site -- I have a form w/ submit button that I am using jquery.form plugin to ajax-ly submit. It works fine if I use the submit (#submit) button.
Now, I want to programmatically fire that button using another button (#submit2) outside of the form. I can do that using jquery click() function, but the content coming back isn't going to the ajax target as I would expect.
I do not have much freedom to re-organize this code, else i would.
(Note I tried to make this code easy for you to run by src-ing jquery and the form plugin from my website.)
Ideas? Thanks!
<?php
if ($_REQUEST['submit'] == 'Submit') {
print 'ajax returns ... ' . $_REQUEST['text'];
exit;
}
?>
<html>
<head>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$('#form').ajaxForm( { target: $('#span') } );
$('#submit2').click( function() { $('#submit').click(); } );
});
</script>
</head>
<body>
<span id='span'>target span</span>
<form method='post' id='form'>
<input type='text' name='text' size='50' />
<input type='submit' id='submit' name='submit' value='Submit'/>
</form>
<input type='submit' id='submit2' name='submit2' value='Submit Too?' />
</body>
</html>
I managed to solve a similar situation to yours. If the only objective of simulating a click on submit1 is to submit the form, you might try:
$('#submit2').click(function() {
$('#form').trigger('submit');
});
You may also need to return false immediately after triggering the form submit button from the non-form submit button click event code. For example:
<script type="text/javascript">
$(function() {
$('#form').ajaxForm({ target: $('#span') });
$('#submit2').click(function() { $('#submit').click(); return false; });
});
</script>
It works for me. Is that what you are looking for?
Have you tried giving a name to the form, and instead of
$('#submit2').click( function() { $('#submit').click(); } );
doing
$('#submit2').click( function() { document.myForm.submit(); } );
That should do the same thing as having the submit button clicked if the form has been ajaxified.