JavaScript - Validating Submitted Data/onchange Issue

I want to type urls in a text field, submit such urls and extract pictures of these web pages. Does anyone know how I can do this using javascript?

Thanks,

Marcelo
Brazil

Wasnt sure if I should post this in the JS or HTML forum.

I am relatively new to web programming (1.5 years) and this question just occurred to me.

I use jquery form validation to validate forms on my site. If my browser has javascript disabled, what is stopping someone from submitting crap through my form?

I tried disabling javascript and submitting a form on my site and it posted.

Is there a way to make it so if the user does not have javascript enabled the form cannot post?

Hey guys

I've got a really simple form:

Code:

<form name="nextform" method="post" action="page2.php">
<input type="checkbox" name="accepted" />I have read and accept the <a href="tsandcs.php" target="_blank">terms and conditions</a><br /><br />
<input type="image" name="next" alt="Next" src="'.$imagefolder.'next.jpg" />
</form>

What I need to do is have it so that the form won't submit unless the tick box has been ticked. If they haven't ticked the box, then a little alert prompting them to do so would be great.

I want to use JavaScript to do this, but if someone doesn't have JS enabled, I would like the form to submit anyway.

I don't really want to grey the button out a tad.

Any ideas guys?

Cheers

hello there
im unsure if this is the correct place to post this so if its not im sorry

what im trying to do is make a javascript pop-up message in real time alerting members who are online at that time to a game submitted
i help run a fifa10 online league site and we are venturing into the 2v2 part of the site.

now when a player goes to the 2v2 page they are presented with a submit button to submit a 2v2 game to the system. then this already shows up on the pagebut what we are after is a little pop up box which after the game button is pressed to submit the game the pop-up shows to the whole site that a 2v2 game has been submitted for playing.

we want this so you dont have to sit on the 2v2 page to wait for a submitted game.

does anybody have any ideas on how we would go about this??
thanks for your time and i hope some1 can help - even if its just in the slightest

I'm using submodal-1.6 for popup.

When the popup closes I wanted parent page to refresh.I've tried the following
window.opener.location.load();
window.opener.location.load(true);
location.load();
window.parent.location.reload();

All works for IE, but when coming to mozilla ,firefox the refresh is a step delayed, i.e when I open my popup to add an itme to my cart on parent page ,for the first time it does not show anything , but when I try to add another item , the first one shows.

Any advice would be really great.

Hi,
I have a requirement. I have to submit a form [which will open a new window once it is submitted], and immediatly I have to close the orginal page.

Currently I am using window.close() statement after formName.submit(). But it closes the window before submit completes. So I tried with window.setInterval("window.close()",1000); It worked for some time, but when the form submition takes long ... same old repeats

Please let me know how to handle this? Below is the code snipet
//lanuch_frm has the form and it submits to hidden frame 'lanuch_hidden'
[CODE]
<frameset rows='0%,*' frameborder="0" marginheight="0" border="0">
<frame name="launch_hidden" />
<frame name="launch_frm" src="<%=url%>" noresize="true" marginheight=0 scrolling="auto" leftmargin=0 topmargin="0" rightmargin="0" frameborder='2' />
</frameset>
[CODE]

Thanks,
Mamidi

Hi folks.

I'm working on a calculator and need to use the 'onchange' function.

Basically, the user selects the year (id=taxYear) and once the year is select (default is 2008) this year will appear in 2 different lines of the page under 2 seperate ID's(ageYear & totalYear).

I've looked at a few example of the function but I'm still not sure how to approach it.

At the moment the year changes once I hit the 'calculate' button but the onChange would obviously offer a better alternative with the date changing once 'taxYear' is changed.

here is the script;

Code:

 	//check the year 
	var taxYear =       document.getElementById('taxYear').options[document.getElementById('taxYear').selectedIndex].value;
	document.getElementById('ageYear').innerHTML = taxYear;	
	document.getElementById('totalYear').innerHTML = taxYear;	

Here is the jsp;
Code:

    <tr>
      <td align="left" width="203" colspan=""><p> Your Tax Year: </p></td>
      <td align="left" 	>      	
        	<s:select name="taxYear" id="taxYear" list="#{'2008':'2008', '2009':'2009'}" theme="simple" />*        
      </td>
    </tr>

    <tr>
      <td align="left" width="203"><p> Age at December 31st <span id="ageYear"></span></p></td>
      <td align="left" colspan="1">
        	<s:textfield name="age" id="age" theme="simple" cssClass="text" value="30" /> *
        	<div id="errorage" class="warningmessage" style="display:none">
        		Please enter your Age to proceed.
        	</div>
      </td>
    </tr>
        
    <tr>
    	<td colspan="2" class="basicboldtext">
    		<br/>
    		The total pension contribution you can make for year <span id="totalYear"></span>&nbsp;is &euro;<span id="totalTax2"></span>
    		<br/>
    	</td>
    </tr>

Appreciate any help on this!

Code:

<input type = "text" style ='display:none;' onchange="display_data_from_server(this.value)"/>

Value inside that input is cahanged from js.

Is there any reason that onchange would not happen ?
i mean, it does not.

I have a onChange value Code:

   
var people = [
        ["Timothy Conner", "1999-Present", "Age: 12", "Male", ""],
        ["Andrew Conner", "1992-Present", "Age: 19", "Male", ""]
    ];

var how = "Brothers";

function find()
{
   if(document.getElementById("name").value == people [0] [0])
   {
      document.getElementById("desc").value = people [0] [1] + "   " + people [0] [2] + "   " +  people [0] [3];
   }
   if(document.getElementById("name").value == people [1] [0])
   {
     document.getElementById("desc").value = people [1] [1] + "   " + people [1] [2] + "   " +  people [1] [3];
   }
    document.getElementById("relateb").value = document.getElementById("name").value;
}

Code:

Name: <input type="text" id="name" value="" onChange="find()"/>

So for it to proses a name you must click out of a box is ther a way to make it instead of when you click out of it, it would immidiatly change?

HI, i know very little about javascript, just enough to get me into trouble actually lol.

Here is what im working with. I have a custom Instant messenger for members.

It uses embed object macromedia as well as javascript to diplay the window and send messages.

What i want to do is simply add an onchange that when one person is typing it shows they are typing (ie xxxxx is typing....)

My experience is in php and html and i looked thru the script and the javascript functions but im not sure what im looking for exactly. Do i need to have access to the swf or fla file and be able to edit them to do this? I dont see any form inputs or i would know exactly where to put the onchange lol. Im guessing the input is in the swf or fla file not sure how that works.

what im guessing is that in the embed or the object tags (ill play with it) i can put something like

Code:

document.write('test on change\n');

i think i need to wrap that in doc write script type=javascript in quotes so it parses.
If i can get that text to show up inside the IM where i want it then i can try to figure out how to set focus on box and recongize onchange and do some testing.
I think i might even be able to doc write the onchange command but not sure.

Thanks

I am trying to create an onChange action that will validate that confirmation checkbox has been checked, and if not, popup an alert message and put the focus on the checkbox input and change the class of the container DIV to "highlight".

Here is the form, with the 'onchange' trigger:

Code:

<form id="checkout" name="my_form" method="post" action="!---SCRIPT_NAME---" onsubmit="return validForm(this);">	
<div id="verification" class="aligncenter required">
  <input type="checkbox" id="verified" name="verified" value="" /> <label for="verified">YES</label>, the items and quantities shown above are correct.</div>
<div class="required"><label for="name">Name:</label><input id="name" name="contactname" type="text" class="L" onchange="" /></div>
<div class="required"><label for="company">Company Name:</label><input id="company" name="company" type="text" class="L" /></div>
<div class="buttonRow"><input type="submit" name="VERIFY" class="btn red" value="Continue" /></div>
</form>

And here is my javascript code:

Code:

function verifyOrder() {
  if (document.my_form.verified.checked != "true") {
    alert("Please verify the contents of your order");
    document.my_form.verified.focus();
    getElementById('document.my_form.verification').className='highlight'
    return false;
  }
}

But this is not working and generates errors in firebug.

What am I doing wrong? Thanks!!

I need the code to run a few functions on change, the box is a "date picker" and I unsure how to add my onchange function without breaking the date picker, can anyone help ?

Code:

p>end date:</p>
			<input id='secondDate' type="text" size="25"><a href="javascript:NewCal('secondDate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date" onchange="dateDiff() ;calculate() ;deposit() ;milecharge() ;agecheck()"></a>

This code works great for splitting value to textbox..

However; It quits working in example 2 when I move the select outside the form tags

Code:

<!-- EXAMPLE 1 WORKS-->
<script type="text/javascript"> 
function Split(sel,first) 
{
  if (sel.selectedIndex == 0 ) return;
  var temp = sel.value.split(",");
  sel.form["F"+first].value = temp[0];
  sel.form["F"+(first+1)].value = temp[1];
  sel.form["F"+(first+2)].value = temp[2];
}
</script>

<form method='post'>
<input type="text" name="F1" value="" > 
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >

<select onChange="Split(this,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
</form>

Help with the onChange to work outside the form tags.

Code:

<!-- EXAMPLE 2 NEED HELP-->
<script type="text/javascript"> 
function Split(sel,first) 
{
  if (sel.selectedIndex == 0 ) return;
  var temp = sel.value.split(",");
  sel.form1["F"+first].value = temp[0];
  sel.form1["F"+(first+1)].value = temp[1];
  sel.form1["F"+(first+2)].value = temp[2];
}
</script>

<form method='post' name="form1">
<input type="text" name="F1" value="" > 
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
</form>


<!-- NEED TO MODIFY THE ONCHANGE TO WORK IN THIS POSITON?? -->
<select onChange="Split(this.form1.value,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>

i keep getting the following error: -
there is no attribute "onChange"

Code:

<select name="type" id="type" onChange="gettype('type');">
<option selected="selected">--Car type--</option>
<option value="1">Bmw</option>
<option value="2">Merc Blinds</option>
<option value="3">Ford</option>
<option value="4">Saab</option>
</select>

Hi everyone. i hope you could help me for my problem. I want to place a value in the option when i change the contenent.

ie when i select North America
It shoulde be <option value='1'>Canada</option><option value='2'>United States</option> and so on and so fort...

Please help.


Code:

<script type="text/javascript">
 //<![CDATA[ 
 // array of possible countries in the same order as they appear in the country selection list 
 var countryLists = new Array(4) 
 ccountryLists["empty"] = ["Select a Country"]; 
 countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
 countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
 countryLists["Asia"] = ["Russia", "China", "Japan"]; 
 countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
 /* CountryChange() is called from the onchange event of a select element. 
 * param selectObj - the select object which fired the on change event. 
 */ 
 function countryChange(selectObj) { 
 // get the index of the selected option 
 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 
 // use the selected option value to retrieve the list of items from the countryLists array 
 cList = countryLists[which]; 
 // get the country select element via its known id 
 var cSelect = document.getElementById("country"); 
 // remove the current options from the country select 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // create new options 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // assumes option string and value are the same 
 newOption.text=cList[i]; 
 // add the new option 
 try { 
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 
//]]>
</script>

Code:

<noscript>This page requires JavaScript be available and enabled to function properly</noscript>
  <h1>Dynamic Select Statements</h1>
  <label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="1">North America</option>
    <option value="2">South America</option>
    <option value="3">Asia</option>
    <option value="4">Europe</option>
  </select>
  <br/>
  <label for="country">Select a country</label>
  <select id="country">
    <option value="0">Select a country</option>
  </select>