In a particular form I have a div with 5 checkboxes and I like to preselected all 5 on first load (or when the form has not been submitted).
I thought this was ok, but when I uncheck 2 boxes and I submit the form which reload the same page, all 5 boxes are checked again. And not just the selected ones.
I am using a simple PHP ternary to check which div-view box is selected and this works if I remove the following .js
$(document).ready(function () {
//Preselect All Div Views
$("#div-views input:checkbox").prop("checked", true);
...
});
I need to trigger the .js just once, I guess. I am using jquery for most of the javascript handling.
Just remove your javascript code if your form hasn't been submitted yet.
Php
<?php
// If the button is in the $_POST var (or $_GET), the form has already been sent.
if (!isset($_POST['MyButtonName'])) {
?>
$(document).ready(function () {
//Preselect All Div Views
$("#div-views input:checkbox").prop("checked", true);
<?php } ?>
Related
I got this select tag in my form, which contains the name of a room
<select class = 'form-control' id = 'room_select' name = 'room'>".$rooms."</select>
I got 4 rooms so this select contains 4 options
$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
e.preventDefault();
$("#room_select_form").submit();
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
});
Then I got this doc ready function first one .msDropDown(); is to be able to get images in the options. Then I got the change function which I googled around and put in a preventdDefault to not refresh page, (still refresh) I thought that I could use an ajax funciton to do this but I dont really know how to write it down or even if it works.
So currently the problem is that my function changes the room value as seen last in the code, but it refreshes the select tag and I see room nr 1 again,
Your page is getting refreshed, because you are submitting the form in onchange listener. You need to put e.preventDefault(); in your form submit listener to prevent default form submit and then you can call ajax in you submit listener.
$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
$("#room_select_form").submit();
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
$("#room_select_form").submit(function(e){
e.preventDefault(); // to prevent page refresh
// your Ajax call goes here....
});
});
I have five small forms on one page. When the page is loaded via the top menu all fields are blank or default. When the page is loaded via the browser back button the fields retain their previous selection or entry data.
What I want to do is have the forms clear down when the page is loaded via the browser back button so no matter how the page is loaded the fields are always blank or default.
This is the page - http://www.heat-sink.co.uk/index.php?page=extruded.
Thanks
In your document ready event reset form like below
$(function(){
$("form").reset();
});
I decided to test the above and it didn't work because JQuery has no reset() method but javaScript does. So to use the above, convert the jQuery element to a JavaScript object like
$("form")[0].reset();
But the code below works so you can use it.
$(function(){
$('form').trigger("reset");
});
To reset all forms:
$( document ).ready(function() {
$('form').each(function() { this.reset() });
});
Please provide ID to your forms and in document ready event put below code:
document.getElementById("kk").reset();
Note: here "kk" is id of form. If you have 5 forms as you mentioned, you have to assign them with different ids and each form you have to reset separately using above code.
For example, if we have two forms. With the help of the following two functions written in JavaScript, we can reset and submit for those two forms.
(Form 1 and Form 2 are two form IDs.)
<script>
submitForms = function(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
resetForms = function(){
document.getElementById("form1").reset();
document.getElementById("form2").reset();
}
</script>
<input type="submit" value="send " onclick="submitForms()" >
<input type="reset" value="cancel " onclick="resetForms() ">
In my page there is a list of buttons. Depending on the clicked button the same .php file is loaded with a different content for the <textarea>. Then TinyMCE is initialised and after that the content of TinyMCE is set.
However, this only works on the first click. When a user clicks a different button, the <textarea> is loaded, but TinyMCE is not initialised. I don't know why it's doing that, because it's the same script that is executed.
$("ul").on("click", "a.click-menu", function() {
var id = $(this).attr("id");
$(".inject").load("Including/modules/Pages/index.php?page="+id, function () {
tinymce.init({selector:"textarea"});
});
});
And this is index.php in a nutshell:
<?php
echo '<textarea>'.$_GET['page'].'</textarea>';
?>
You should remove old TinyMCE and add new one to new controls...
Heres how it should be made
I am pretty new to ajax,jquery and javascript. So need help. I have a form. When submit button is clicked the div below the form displays the result from the php file. What i want is that it should display the php file into that div as soon as the main page loads and the div refreshes when submit button is pressed.
<script>
$(document).ready(function() {
$('#form1').ajaxForm(function() {
$('#blogup').val(''); // alert("Thank you for posting!");
$("#display").load("showartposts.php")
});
});
</script>
Here, display is the div to be displayed on page load and when the form is submitted it should refresh this div to display new posts from showartposts.php. It is just like a facebook wall post thing. j
you need to try this :
<script>
$(document).ready(function() {
$("#display").load("showartposts.php"); // call as soon as page load
$('#form1').ajaxForm(function() {
$('#blogup').val(''); // alert("Thank you for posting!");
$("#display").load("showartposts.php")
});
});
</script>
You will need to submit the form using AJAX and then take the AJAX response (assuming its HTML) and replace the contents of the #display DIV.
Should be pretty trivial using jQuery.
having some real problems with jquery at the moment. Basically what I have so far is. The form is submitted once the form is submitted a grey box pop's up with the relevant infomation.
What I need to do though is refresh the whole page then allow the grey box to appear.
I have the following code
$("#ex1Act").submit(function() {
//$('#example1').load('index.php', function()
$("#example1").gbxShow();
return true;
});
the line which is commented out load's the page again after the form is submitted the other code makes the grey box pop-up.
Is their a way to say once the:
$('#example1').load('index.php', function()
has been exucted do this:
$("#example1").gbxShow();
hope this makes sense.
This is not possible.
Once the form is submitted, the Javascript running on the page that submitted the form is completely gone; it cannot affect the page that the form returns.
Instead, you should put server-side code in the form that writes $("#example1").gbxShow(); in a separate <script> block if the form has been submitted.
Why not just submit the form normally (i.e., not using JavaScript) and add a variable to the resulting page signalling the need to display the grey box? Like so:
<?php if(isset($_POST['submit'])): ?>
<script type="text/javascript">
var showGreyBox = true;
</script>
<?php endif; ?>
...
<script type="text/javascript">
$(function(){
if(showGreyBox !== undefined){
// execute code to show the grey box
}
});
</script>
Something like that, maybe?
The problem you have is that the web page is "stateless". This means that you can't do a bit of JavaScript, refresh the page and continue on with your JavaScript. When you refresh the page, you lose your current state and the page starts from scratch.
You will need to re-engineer your design to bear in mind the page lifecycle (i.e. all JavaScript stops permanently on navigation).
One solution may be to use the jQuery AJAX forms plugin, which will submit the form to the server and give you back the result of the submission, which would avoid breaking the page lifecycle. You could then display the box as you wish.
The standard way to do this is to have the server return the gray box contents in the response to the form post.
You could probably do this in jquery by putting the page and the grey box into separate iFrames so that it would be safe from the page refresh