I have a form with multiple textboxes inside a table.
Also inside the table but outside the form there is a cell (said Cell A).
When you first access the form, texboxes in the form are filled with data from a DataBase using php/MySQL.
You can change the textbox values, and submit them to the database with POST. The Database is updated, and you are returned to the same (but now updated) form.
My issue: I want to appear in Cell A a colored text indicating if the data in the form was sent or not. On first arrival to the page or after update in should read "Actualized data" in green. But when you are changing the form without submitting it should change to "Unsent data" in red (or something like that).
I know how to format the text with php
style="color:<?php echo $ColorChange ?>"
but when the form changes (before submitting) I need OnChange and some JavaScript, for example
function ChangeColor()
{
var col=document.getElementById("UpdateSign");
col.style.color="#FF0000";
}
My problem is how to combine those two. Any ideas?
Keep Javascript event triggers outside of HTML elements, and use event listeners. jQuery makes binding event listeners to elements very easy.
For example,
$("#form_input_element").on("onchange", ChangeColor);
takes in the id of the form element and binds the ChangeColor function to the onchange event.
use the onchange event of the body, i suppose this should work. I dont know your complete code so this is more guessing than knowing.
<body onchange=ChangeColor()>
Related
I have a form with button A and button B. It's sent by a jQuery function called clicking on one of the buttons. At the end of this long function which is checking prerequisites, the form is sent using this line:
$('#wlform').submit();
I want to adjust this code to send something to be able to distinguish which button was pressed. Something in JavaScript similar to <input type="submit" name="submitbutton1"/>
Provide us with some code?
I think you're talking about two buttons that both should have their own ID's. You could try and catch the ID attributes after you click them;
$(this).attr('id');
Or change 'id' into 'name' if you want to get that value.
I suppose you use a javascrit click event to execute your javascript functions.
In javascript, you can add a hidden input to your form :
$(...).click(function() {
... // Your code
var clicked_button = $(this);
$('#wlform').append($('<input type="hidden" name="clicked-button"/>').val(clicked_button.attr('id'));
$('#wlform').submit();
});
With that, the id of the clicked_button will be sent with the form.
Just give to the hidden input the value of the button id attribute. You could do something similar to this (before the submit statement):
$('input[type=hidden]').val($(this).attr('id'));
Where $(this) is the button clicked.
None of the answers worked, so I've put something together from these on my own. I've added a hidden input field, clicked-button as you suggested. Then when calling my precheck_submit function, I pass another parameter (c) for storing which has been clicked. In the precheck_submit function I added $('#clicked-button').val(c);. It works. Anyways, thanks for your efforts.
I'm new to CRM 2011 so I apologize if the answer is obvious. The entity I made is a form where the user fills out information, some fields are hidden until the meets certain requirements to have them visible.
Example: Were you late? Yes/No
(hidden until yes is selected)Reason:
I used javascript to make them invisible at the start and then make them visible if the requirements are met. After the user presses the save button, the field "Reason" would go back to being invisible, is there a way to make it stay visible?
Thanks
You'll have to write javascript code in the onLoad event to see if the field's values are already in a state that would result in the fields being visible. After the entity is saved, it reloads itself, incase a plugin happened to edit an attribute.
If you already attached your function to the attribute onchange event you need to add the following to your onload event:
//Will fire all functions connected to the attribute change event
Xrm.Page.getAttribute("attribute_name").fireOnChage();
Or directory call the function that implements the code i.e.
//Will only call the specified function.
ShowHideField();
Also you might find it easier to attach to onchange handlers
directly from onload code instead of the form UI i.e.
Xrm.Page.getAttribute("attribute_name").addOnChange(ShowHideField);
And to summarize:
function OnCrmPageLoad() {
var attrObj = Xrm.Page.getAttribute("attribute_name");
attrObj.addOnChange(ShowHideField);
attrObj.fireOnChage(); // OR ShowHideField();
//… more code here
}
function ShowHideField() {
// hide fields depending on yes/no questions …
}
I have a page where a series of checkboxes are displayed next entries from a database, they each have an onClick event to do an Ajax write of their value to the database.
I want to have a button on the form that toggles all the checkboxes, so I used the following function/jQuery:
function toggle_chk_links(){
$(".chk_user_link").click();
};
It works fine visually, the only problem is that although it triggers the onClick event as required the checkbox is read with it's old value, so the database gets the opposite value to the one required! This is the line reading the checkbox in its' onClick event:
active=Number($("#chk_brandlink"+brand_ID).prop("checked"));
I need users to be able to manually click on each checkbox, as well as toggle them all, ideally using one onClick function call. Any suggestions?
The easiest solution is to handle the onchange event instead of the onclick event.
$(".chk_user_link").change(function() {
// your change handler
});
Example: http://jsfiddle.net/7zHRm/1/
I need to submit just one input field value to a cgi script via a web form.
I've added a couple of extra form controls (a check box and radio buttons) which manipulate the input value depending on the states selected.
When the form is submitted, the extra form field values are submitted as well which breaks the cgi script (which I don't have access to). I removed the 'name' attribute from the check boxes so they are not submitted but cannot do this for the radio buttons as it breaks their grouping.
How can I prevent radio button values from being submitted?
You can add a disabled attribute to them in the submit handler, this will prevent them from being serialized, either by jQuery or a normal <form> submission. For example:
$("#myForm").submit(function() {
$(this).find(":radio, :checkbox").attr("disabled", true);
});
Or you can .serialize() only the elements you want, for example:
$.post("myPage.cgi", $("#myForm input[type=text]").serialize());
Make them "unsuccessful". There are several ways to achieve this:
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
It is also possible to have two different forms: one that has visible form elements and one that has a hidden input that represents the end result to be submitted. You can either attach onchange handlers to your visible form elements so that they call some JavaScript to update the invisible field, or you can run a function as part of the onsubmit handler to set the invisible value directly before it is submitted.
Here's a jsFiddle demonstrating the second approach (the onsubmit handler): http://jsfiddle.net/gtU4J/
Our webapp has a form with fields and values that change depending on values entered. Each time there is a change event on one of the form elements, we use an expensive AJAX call to update other elements on the page.
This works great for selects, radio buttons and checkboxes. The issue comes in when a user adds content to a text field, and then clicks a link without taking the focus from the text field. The browser moves to a new page, and the contents of the text field are never saved. Is there an easy way to code around this? The AJAX call is too expensive to call with each key press.
Here's an example of my Prototype code at the moment:
$$('.productOption input.text').invoke('observe', 'change', saveChangeEvent);
Have you considered hooking into the window unload() event? Here is a c/p jQuery example using .unload().
$(window).unload(function() {
var input = $("#MyInput"); // Text field to check for
if(input.length > 0)
{
//Ajax call to save data, make sure async:false is set on ajax call.
}
});
This lets you work around making a call on each key press, by making one if they leave the page.
using prototype, you can have a PeriodicExecuter listen while you're typing and sending off an ajax query when nothing has happened for e.g. 2 seconds and value has changed since the last AJAX request. Start the executor using a focus event and shut it down using a blur event, that way you only need one executor at a time