JavaScript - Seperate Concatenated Form Values

So Im trying to make it so my button writes in one box when I click it one time, another when I click it a second, etc, but when I click it once, it writes in all boxes. Why is this?

Code:

content += "<br><input type='text' value='' id='d1' name='d1'><br>"
content += "<input type='button' value='random card' id='r1' name='r1' onclick='randomCard()'>"
content += "<div id='c1' name='c1'></div><div id='c2' name='c2'></div><div id='c3' name='c3'></div><div id='c4' name='c4'></div><div id='c5' name='c5'></div><div id='c6' name='c6'></div><div id='c7' name='c7'></div><div id='c8' name='c8'></div><div id='c9' name='c9'></div><div id='c10' name='c10'></div><div id='c11' name='c11'></div>"


function checkValue(){
if (c1.innerHTML == ""){
c1.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML == ""){
c2.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML == ""){
c3.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML == ""){
c4.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML == ""){
c5.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML == ""){
c6.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML == ""){
c7.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML != "" && c8.innerHTML == ""){
c8.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML != "" && c8.innerHTML != "" && c9.innerHTML == ""){
c9.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML != "" && c8.innerHTML != "" && c9.innerHTML != "" && c10.innerHTML == ""){
c10.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML != "" && c8.innerHTML != "" && c9.innerHTML != "" && c10.innerHTML != "" && c11.innerHTML == ""){
c11.innerHTML = "<img src='"+cUrl+randCard[0]+cExt+"' alt='"+randCard[1]+"'>"
} else{
if (c1.innerHTML != "" && c2.innerHTML != "" && c3.innerHTML != "" && c4.innerHTML != "" && c5.innerHTML != "" && c6.innerHTML != "" && c7.innerHTML != "" && c8.innerHTML != "" && c9.innerHTML != "" && c10.innerHTML != "" && c11.innerHTML != ""){
alert('How in the **** did you get more than eleven cards?')
} else{
}
}
}
}
}
}
}
}
}
}
}
}
}


function randomCard(){
for (c=0;c<DCard.length;c++){
randCard = DCard[Math.floor(Math.random()*DCard.length)]
document.getElementById('c1').value = randCard

c1 = document.getElementById('c1')
c2 = document.getElementById('c2')
c3 = document.getElementById('c3')
c4 = document.getElementById('c4')
c5 = document.getElementById('c5')
c6 = document.getElementById('c6')
c7 = document.getElementById('c7')
c8 = document.getElementById('c8')
c9 = document.getElementById('c9')
c10 = document.getElementById('c10')
c11 = document.getElementById('c11')

checkValue()
}
}

Not my whole code, but the necessary parts.

Hi, someone helped me and wrote this code for me:

Code:

<script>
     var totalWidth = 0;
$("#gallery img").each(function(){
totalWidth += $(this).width();
});

alert(totalWidth);

</script>

it alerts the width of all my images, great!

But now, I need to add onto that 20px between each image and 104px or so onto the end

Then I need to be able to write it out to the style of the #content div?

here's the site: http://www.jbiddulph.com/chrisbradshaw
Please help?!

Greetings


I have a textarea on my page and I wonder if its possible for a visitor to type in something in the textarea and then it will store in XML is it possible?


Best Regards

Obsivus

Hi,

The following code is supposed to display and hide fields when clicking on radio buttons which is does correctly, it also gives the fields that are hidden a value so that it passes validation. T

The problem is that when the user moves from one field to the next, it deletes the value that they have just entered. :S Any ideas why this might occur? Thanks!

Code:

<script language="javascript" type="text/javascript">
		
    		 function showHideDivs(){
                var category = '';

                for(i=0; i < oRadBtns.length; i++){
                    if(oRadBtns[i].checked){
                        category = oRadBtns[i].value;
                    }
                }
                switch (category){

                        case 'empresa':
						document.getElementById("empresa_nombre").value = "";
      					document.getElementById("contacto").value = "";
                        document.getElementById("nombre").style.display = "none";
                        document.getElementById("apellido").style.display = "none";
                        document.getElementById("company").style.display = "block";
                       	document.getElementById("contact").style.display = "block";
						document.getElementById("firstname").value = "nombre";
      					document.getElementById("lastname").value = "apellido";
                        break;

                    	case 'particular':
                        document.getElementById("firstname").value = "";
      					document.getElementById("lastname").value = "";
      					document.getElementById("nombre").style.display = "block";
                        document.getElementById("apellido").style.display = "block";      
                        document.getElementById("company").style.display = "none";
                        document.getElementById("contact").style.display = "none";
      					document.getElementById("empresa_nombre").value = "empresa";
      					document.getElementById("contacto").value = "contacto";
     					 break;
                }

            }
			
			 window.onload=function(){
                oRadBtns = document.getElementById('dmsfrm').getElementsByTagName('input');
                for(i=0; i < oRadBtns.length; i++){

                    oRadBtns[i].onclick = showHideDivs;
                }
				
                showHideDivs();
            }
			 
		</script>

Code:

      <div class="radio_element">
					<input type="radio" value="empresa" class="radio" id="empresa" name="categoria" <?php echo ($leadsEngine->getElementValue('categoria')!='particular')?'checked="checked"':'' ?>  />
                    <span class="<?PHP if($leadsEngine->hasError('categoria')){echo 'error';} ?> ">Empresa</span>
             </div>
            <div class="radio_element">
					<input type="radio" value="particular" class="radio" id="particular" name="categoria" <?php echo ($leadsEngine->getElementValue('categoria')=='particular')?'checked="checked"':'' ?> />
                    <span class="<?PHP if($leadsEngine->hasError('categoria')){echo 'error';} ?>  ">Particular</span>
            </div>
	</div>

Hi,

I have a form where dob is generated using 3 select boxes, 1 for day, month and year. My output needs to be in the form dob=dd-mm-yyyy rather than day=dd, month=mm and year=yyyy.

It has been suggested that i do the following:

"On submit button click, use JS to create a hidden input (Q5) in the form and assign its value, then disable the day, month, and year fields so they are not submitted."

Does anyone know how to do this?

Code:

function move_user_img(str) {
				var step = 25;
				// change this to different step value
				switch(str) {
				case "down":
					var x = document.getElementById('imageUser').offsetTop;
					x = x + step;
					document.getElementById('imageUser').style.top = x + "px";
					break;

				case "up":
					var x = document.getElementById('imageUser').offsetTop;
					x = x - step;
					document.getElementById('imageUser').style.top = x + "px";
					break;

				case "left":
					var y = document.getElementById('imageUser').offsetLeft;
					y = y - step;
					document.getElementById('imageUser').style.left = y + "px";
					break;

				case "right":
					var y = document.getElementById('imageUser').offsetLeft;
					y = y + step;
					document.getElementById('imageUser').style.left = y + "px";
					break;
				}
			}
			function move_report_img(str) {
				var step = 25;
				// change this to different step value
				switch(str) {
				case "down":
					var x = document.getElementById('imageReport').offsetTop;
					x = x + step;
					document.getElementById('imageReport').style.top = x + "px";
					break;

				case "up":
					var x = document.getElementById('imageReport').offsetTop;
					x = x - step;
					document.getElementById('imageReport').style.top = x + "px";
					break;

				case "left":
					var y = document.getElementById('imageReport').offsetLeft;
					y = y - step;
					document.getElementById('imageReport').style.left = y + "px";
					break;

				case "right":
					var y = document.getElementById('imageReport').offsetLeft;
					y = y + step;
					document.getElementById('imageReport').style.left = y + "px";
					break;
				}
			}

Code:

<div id ="display" style="width:640px; height:480px; overflow:hidden;">

			<div>
				<img src ="
				<?php
				echo UPLOADPATH . $userImage;
				?>
				" style = "position:absolute;" id="imageUser"/>
			</div>
			<div id ="imageReport">
				<img src = "
				<?php
				echo $reportImage;
				?>
				" style = "opacity:0.25;height:700px; width:450px;" />
			</div>
		</div>
		<div style="position:absolute; top:550px; left:100px;">
			<p>Control User Image</p>
			<input type=button onClick=move_user_img('up') value='Up'>
			<input type=button onClick=move_user_img('left') value='Left'>
			<input type=button onClick=move_user_img('right') value='right'>
			<input type=button onClick=move_user_img('down') value='down'>
		</div>
		<div style="position:absolute; top:650px; left:100px;">
			<p>Control Report Image</p>
			<input type=button onClick=move_report_img('up') value='Up'>
			<input type=button onClick=move_report_img('left') value='Left'>
			<input type=button onClick=move_report_img('right') value='right'>
			<input type=button onClick=move_report_img('down') value='down'>
		</div>

Hi there,

I'm absolute newbie in javascript, so the question may look not worth asking for you. Sorry for that.

My situation is like that: I want to make a preview of form data using javascript. After the button "preview" is clicked I start showing div dialog which should contain data entered by users. The problem is that because my div dialog is coded in the same page as form I can get only default values. It means - after making some changes, they are not visible.

To get and print the value of input I use this code:

Code:

<script type="text/javascript">
mytext = document.getElementById('name').value;
document.write(mytext);
</script>

How it would be possible to update the values on "on click" event.

Thank you very much for considering this question.

Hey all,

Okay, Here is what i would like to do.
I have a calculator he
http://www.nico-online.co.uk/calculator/calc1.html


which after some help from Dormilich - got working!

Now, I would like to set up some conditions, so if the use selected 'Mountainbike' then, the script will perform a different calculation to if they select the 'Rennrad' option.

Okay, so I was thinking an If..else..if..else statement would probably be best after reading up

This is what I have come up with:

Code:

 <script language="JavaScript">
function Framesize()
{
var a = parseFloat(BikeSizer.Insleg.value);
if(BikeSizer.Biketype.value = "Mountainbike")
{
b = (a * 0.572);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 0.226);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}


else if (BikeSizer.Biketype.value = "Trekking-, Reise- oder Cityrad")
{
b = (a * 5);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 5);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
	}
	
else{
	
	b = (a * 10);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 10);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
	}

}
</script> 

So, I'm not too sure if I can set the Menu values as recongnisable values!

Here are the values I have:

<select name="Biketype" style="font-size:11px;">
<option>Mountainbike</option>
<option>Trekking-, Reise- oder Cityrad</option>
<option>Rennrad</option>
</select>

Anyone out there offer any insight? Am I going horribly wrong somewhere?

Apologies for the stupidness , I am quite new to JS!

Thanks in advance

Hi, I'm having a bit of trouble with this here...

Before I submit the form with JS I update an input field with js like this:
Code:
Code:

document.getElementById('IC_Checksum').value = data;
imaginaryform.submit();

The problem is that the updated value is not sent along with the post data. Instead the old value is sent along.

When i submit the form with a button afterwards though (not auto submit after the value is set), then the value is sent along fine.

But that's not how I want it to work...

Can anyone tell me how I can send the value that I'm setting with JS along with the post data like this?

I have a JQuery autosuggest working properly on my form.php page... Now I want to get my form to actual POST the input values. So currently if I just run search.php, I get the following (using echo json_encode):

{"label":"Henry Gale","value":"henrygale@gmail.com"},{"label":"Amy Gerges","value":"amy@yahoo.com"}, and the list goes on.

So since the search is working properly. Now, I want to POST only the values that I place in the form's input field. I currently have:

Code:

<script>
	$(document).ready(function() {
		$( "#autocomp" ).autoSuggest("search.php", {
			minChars: 2, 
			selectedItemProp: "label", 
			searchObjProps: "label", 
                        selectedValuesProp: "value",
			selectionLimit: 8, 
			formatList: function(data, elem){
				var my_image = data.image ;
				var my_label = data.label;
				var new_elem = elem.html(my_image + my_label);
				return new_elem;
			}
		});
	});
</script>

<input name="contacts" type="text" id="autocomp" maxlength="35" />

But if I do an echo of the $_POST['contacts'] I just get the word: Array

I am doing something wrong, just not sure what... Since my input gets a list of comma separated values, how can I:

1) make sure the input values get the "value" attribute which corresponds to the emails.
2) post the emails so I can do things with the emails (run them through format checks, insert them into a mysql db, etc).

Hello,

I have a form that works out some basic math questions e.g. area etc.

I run a function when a form field is updated to do the calculations, however I'd like to run a different calculation depending on which form element was updated.

Is there a way to say something like:

if (area1 was updated) {
work out this calculation
}
if(area2 was updated) {
work out this calculation
}

and so on?

Thanks,

Nicola

Hi people, I'm a novice in javascript and have no clue how to get get the following logic through in a form. Any help will be greatly appreciated. I have searched the forums and looked at a few similar script but can't make out head and tail of it Sorry if this is a oft repeated question.

Here is the form I need, the post method is email :

Name (txtfield)

DOB (Date)

Address (txtarea)

Programme (Select list) : Options : Programme1, Programme2, Programme3

Date (Select list) : options : 10/10/2009 to 12/09/2009
15/10/2009 to 16/10/2009

Venue : Mainland
Harvey
Waterloo

Time : 9am - 12 noon
1 pm - 3 pm
3 pm - 5 pm

Here is the Logic :

Date : Conditions

If Programme1 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable.

If Programme2 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable.

If Programme3 is selected then date option 15/10/2009 to 16/10/2009 should auto selected and greyed out so that user don't have to select this.

Venue : Conditions

If Programme = Programme1 then all the venues should be selectable.

If Programme = Programme2 and date = 10/10/2009 to 12/09/2009 then all the venues should be selectable.

If Programme = Programme2 and date = 15/10/2009 to 16/10/2009 then only venues Harvey and Waterloo should be selectable.

If Programme = Programme3 and date = 15/10/2009 to 16/10/2009 then only venue Waterloo should be selectable.... in fact venue Waterloo should be auto selected and greyed out so that user cannot change it.

Time :Conditions : Always should be default selection and greyed out

If Programme = Programme1 and venue is any one of Mainland, Harvey, Waterloo then the time should default to 9 am - 12 noon.

If Programme = Programme2, Date = 10/10/2009 to 12/09/2009 and venue is any one of three then, the time should default to 1 pm - 3 pm.

If Programme = Programme2, Date = 15/10/2009 to 16/10/2009 and venue is one of Harvey or Waterloo then the time should default to 1 pm - 3 pm

If Programme = Programme3, Date = 15/10/2009 to 16/10/2009 and venue = Waterloo then the default time should be 3 pm to 5 pm

Sorry for the long post and so many conditions. I'm trying to get a hang of how to go about doing this. This looks a pretty complicated logic but if you can point me in the right direction I'm sure I will get my head around this.

Thanks for having a look and thanks in advance for any help.

Cheers

I want to loop through a form containing various fields and replace them with values I have in a JS object.

E.g.

(1)

<form id="theform">
<input type="text" name="field_1" value="" />
<input type="checkbox" name="field_2" value="" />
</form

(2)

object.field_1 = "Dave";
object.field_2 = ""; // empty as not checked, else holds value of checked one

--

The problem is: what about checkboxes and <select> drop downs, and radios??

Is there a script like this around as I'm guessing this could be useful for Ajax to populate input boxes in some situations (depending on the content etc.) so I'm guessing I'm not the only one who needs this?

I'm trying to add the ui autocomplete function to some form fields using a facebook style, but I'm not sure how to get more than one value to actually pass to the form field. As my script is now it only takes the last selected value into the hidden form field. Here's my current script:
Code:

				<div id="editcbprofileinterests">
		<div id="formWrap">
<div id="interests" class="ui-helper-clearfix">
<input id="cb_intereststerm" type="text">
<input id="cb_interests" name="cb_interests" type="hidden">
					</div>
				
			
		</div></div>
		<script type="text/javascript" src="autocomplete/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="autocomplete/js/jquery-ui-1.8.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				//attach autocomplete
				$("#cb_intereststerm").autocomplete({
					
					//define callback to format results
					source: function(req, add){
					
						//pass request to server
						$.getJSON("autocomplete/autocominterests.php?callback=?", req, function(data) {
							
							//create array for response objects
							var suggestions = [];
							
							//process response
							$.each(data, function(i, val){								
								suggestions.push(val.cb_intereststerm);
							});
							
							//pass array to callback
							add(suggestions);
						});
					},
					
					//define select handler
					select: function(event, ui) {
						
						//create formatted interest
						var interest = ui.item.value,
							span = $("<span>").text(interest),
							a = $("<a>").addClass("remove").attr({
								href: "javascript:",
								title: "Remove " + interest
							}).text("x").appendTo(span);
						
			//add interest to interests div		          
                        span.insertBefore("#cb_intereststerm");	
                                
                  //add interest to hidden form field
                  $('input[name=cb_interests]').val(interest);
					},
					
					//define select handler
					change: function() {
						
						//prevent 'to' field being updated and correct position
						$("#cb_intereststerm").val("").css("top", 2);
					}
				});
				
				//add click handler to activities div
				$("#interests").click(function(){
					
					//focus 'to' field
					$("#cb_intereststerm").focus();
				});
				
				//add live handler for clicks on remove links
				$(".remove", document.getElementById("interest")).live("click", function(){
				
					//remove current activity
					$(this).parent().remove();
					
					//correct 'to' field position
					if($("#interests span").length === 0) {
						$("#cb_intereststerm").css("top", 0);
					}				
				});				
			});
		</script>