HTML Hidden Input value change with javascript and clicking text - javascript

Ok, so this seems like it should be very straight forward, but I have been stuck on this for hours.
Objective: I want to store a variable on my page based on if I last clicked on the "Delivery" or "Pickup" div section of the page.
I have Jquery that uses the following code to switch what is shown on the page (first segment in section). Everything works except .value and .innerHTML:
$(document).ready(function(){
$("#pickup_click_link").click(function(){
$('#delivery_stuff').fadeOut('fast', function(){
$('#pickup_stuff').fadeIn('fast');
});
$('#delivery_stuff2').fadeOut('fast', function(){
$('#pickup_stuff2').fadeIn('fast');
});
$("#pickup_button").css("background-color","silver");
$("#delivery_button").css("background-color","white");
window.onload = function(){
document.getElementById('pu_del_nav_var').value='Pickup';
document.getElementById('pu_del_nav_varTEST').innerHTML='Pickup';
}
});
});
$(document).ready(function(){
$("#delivery_click_link").click(function(){
$('#pickup_stuff').fadeOut('fast', function(){
$('#delivery_stuff').fadeIn('fast');
});
$('#pickup_stuff2').fadeOut('fast', function(){
$('#delivery_stuff2').fadeIn('fast');
});
$("#pickup_button").css("background-color","white");
$("#delivery_button").css("background-color","silver");
delivery_click();
});
});
I tried to put the code that is giving me the error (.value ="Pickup/Delivery" and .innerHTML="Pickup/Delivery") onload, in a seperate function, after the Div and Input, but I always get the error Uncaught TypeEror: Cannot set property 'value' of null
function delivery_click() {
document.getElementById('#pu_del_nav_var').value='Delivery';
document.getElementById('#pu_del_nav_varTEST').innerHTML='Delivery';
alert("Delivery!");
}
How can I get this javascript to work so it changes this input and the information where "temp here" is?
<input type="hidden" id="pu_del_nav_var" name="pu_del_nav_var" value="Pickup">
<div name='pu_del_nav_varTEST' id='pu_del_nav_varTEST'>temp here</div>

$('#pu_del_nav_var').val('Delivery');
$('#pu_del_nav_varTEST').html('Delivery');
Besides, why would you want to mix jquery & javascript with selectors.

Related

Hide and Show a div when a tab is active ( selected )

I have this tabs built.
When I click on Round Trip, I want to make disappear that Flight 2 form.
But since that is needed on multi-city, I want it to show back on
multi-city.
I used this
jQuery('#rdbOneWay').attr("class","onewaybuttonchecked");
jQuery('#rdbRoundTrip').attr("class","roundwaybuttonchecked");
jQuery('#rdbMultiCity').attr("class","multiwaybuttonchecked");
jQuery('.ret_date_block').attr("id","noreturndate");
$("#noreturndate").hide();
$(".onewaybuttonchecked").on("click", function(){
$("#noreturndate").hide();
});
$(".roundwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
$(".multiwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
});
I used this to hide something on the One Way tab.
If:
$(".roundwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
If I use here the correct id of Flights 2 to hide it on the Round-Trip, it does its job but when I switch between One-Way and Round-Trip it shows nothing.
This line get's in action when I go from Multi City to Round-Trip.
Any ideas?
You definitely need a conditional in here.
In your JQuery function, try something like this:
function radioButton() {
if (document.getElementById('htmlElement1').checked) {
document.getElementById('htmlElement2').style.visibility = 'visible';
} else {
document.getElementById('htmlElement').style.visibility = 'hidden';
}
Please note that since I cannot view your HTML - I am not sure what elements you are using so where i say htmlElement 1 (or 2) please fill that in with the appropriate elements.
Let me know you results!
Never mind.
I used same code as above
jQuery('#rdbOneWay').attr("class","onewaybuttonchecked");
jQuery('#rdbRoundTrip').attr("class","roundwaybuttonchecked");
jQuery('#rdbMultiCity').attr("class","multiwaybuttonchecked");
jQuery('.pnlFlight2').attr("id","pnlFlight2");
$("#pnlFlight2").hide();
$(".onewaybuttonchecked").on("click", function(){
$("#pnlFlight2").hide();
});
$(".roundwaybuttonchecked").on("click", function(){
$("#pnlFlight2").hide();
});
$(".multiwaybuttonchecked").on("click", function(){
$("#pnlFlight2").show();
});
and it did the trick, I don't know why it didn't work earlier but glad it did now.

Javascript replace content innerhtml on click with integrated PHP tag

I am trying to replace the content of a DIV once the button inside that DIV is clicked, (basically replacing the button, which retreives a PHP variable:
<div id="buttonholder">
Publish
</div>
I am trying to replace it with an unpublish button after a post is published (when the button above is clicked):
function publish(status){
document.getElementById("buttonholder").innerHTML = 'Unpublish';
}
It does not work however ... What am I doing wrong ?
Your code syntax is wrong. Use like below.
function publish(status){
document.getElementById("buttonholder").innerHTML = 'Unpublish';
}
Add a button id and then do:
$(function() {
$("#buttonId").click(function() {
$("#buttonHolder").html(" html to replace with ");
});
});
Also you can use the $("#buttonHolder").html(" html to replace with "); instruction in your onClick function as well.

Removing Yet not Deleting an Element/Variable from an HTML Document

I am testing out with a different way of menus. My code is the following:
JavaScript
var hubOpen = 0;
var test = "test";
$(document).ready(function(){
$('#hub').click(function(){
if(hubOpen == 0){
$('#hub').append(test);
hubOpen = 1;
} else {
//code for taking "test" out here
hubOpen = 0;
};
});
});
HTML
<body>
<p id="hub">Hub</p>
</body>
If you'd like, here's a jsFiddle here. The code is to make sure that when the id "hub" is clicked, "test" appears. When hub is clicked again, "test" disappears. The code, when run, opens test, doesn't let you click it again, but it doesn't delete "test" (as there is no code for it).
My question: How would I delete the variable "test" from the document but not to delete the variable forever, as I would need to use it later? Would the jQuery method
.replace();
work?
Thanks in advance!
To remove all the contents of an element, jQuery offers .empty():
$('#hub').empty();
The variable is completely separate from the element, so no problems there. If you wanted to restore the original text, just use .text():
$('#hub').text('Hub');
Updated fiddle
You can do something like this:
$(document).ready(function(){
$('#hub').click(function(){
$(this).text() == 'Hub' ? $(this).html('text') : $(this).html('Hub');
});
});
On click if the text is 'Hub' change it to 'text' else change it again to 'Hub'.

How to disable all the links and input buttons on a page using jquery

I am working in django and have created a class which has a field closed. When the user sets this value for a particular object, then I want to disable all buttons and links on the object_view page.
I am using the following jquery snippet, but it is not working. Can anybody help me find the mistake
<script type="text/javascript">
$("a").css('cursor','arrow').click(function(){
return false;
});
$("input").attr('disabled','disabled');
</script>
Update: Not working means that all the links and input buttons are still working, i.e. being directed to the correct page. I have included this code snippet in my <head> section.
Try:
<script type="text/javascript">
$(document).ready(function(){
$("a").css("cursor","arrow").click(false);
// for jquery older than 1.4.3, use the below line
// $("a").css("cursor","arrow").click(function(){
// return false;
// });
$(":input").prop("disabled",true);
// for jquery older than 1.6, use the below line
// $(":input").attr("disabled","disabled");
});
</script>
You need the $(document).ready(...) so that the code doesn't run until the elements exist on the page.
I guess you could turn off all links (that is anchor tags) with something like this:
$("a").click(function (e) {
e.preventDefault();
});
This should work for buttons and other inputs
$(":input").attr('disabled','disabled');
You need to wrap the whole thing in:
$(function() {
});
OR
$(document).ready(function () {
});
To limit the input to buttons:
$('input[type="button"]').attr("disabled","disabled");
Otherwise you disable all input elements.

Move cursor to next field with Javascript

Basically the function below is a listener for a change in selection of one dropdown. I want the cursor to move to the next field on the page as well the below function is executed. How do I do this in Javascript? The next field on the page is an ExtJs textbox.
function changeVehicleCondition() {
var ValuationSource = getCurrentValuationSource();
var vehicleConditionId = vehiclePnl.VehicleConditions.getValue();
if (ValuationSource == 0) {
vehiclePnl.VehicleConditionId.setValue(0);
} else {
vehiclePnl.VehicleConditionId.setValue(vehicleConditionId);
}
}
Edit: focus() doesn't work for me, because I tried this already:
vehiclePnl.Mileage.focus();
with no luck..
For ExtJs you apparentley have to do this:
focus( true, false );
true tells it to select the text in the next field and false tells it whether or not to delay. it actually didn't work for me but i think thats because my controls don't match up, but that's the code to do it.
This is with no knowledge of extjs
<select id="listen">...</select>
<input id="focus" />
<script type="text/javascript">
document.getElementById('listen').onchange = function () {
changeVehicleCondition()
document.getElementById('focus').focus()
}
</script>
The script tag can be anywhere after the select. You can also do it this way:
<select id="listen" onchange="changeVehicleCondition(); document.getElementById('focus').focus()">...</select>
<input id="focus" />
Lets say your form panel is defined as variable "vehiclePnl" and the next field your wanted to focused is have name attribute "Mileage".
Instead using your previous code
vehiclePnl.Mileage.focus();
Then you should use this code bellow
vehiclePnl.getForm().findField("Mileage").focus();

Categories

Resources