nokaoii nokaoii - 5 months ago 9
jQuery Question

Pop-up is working but changing the main page as well

Function: Enter a phone number (ex: 555-555-5555) into a text field. The text field prints the number out flat (hidden by CSS). Then Javascript picks up that number by ID and splits it apart by the hyphens and injects the array split up into a FoneFinder URL search string to display the results from that site in a pop-up window.

Problem: The pop-up is working fine, however when I click on the link to spawn the link it opens in the main page as well as the pop-up. The main page should not change.

The pop-up code works fine on other pages and doesnt overwrite the main page. It has to be how the javascript is injecting the html link into the page that is messing it up, but I cant figure out why.

Any help or insights would be appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style>

#target_num_result {
display: none;
}

#target_num_search {
font-size: small;
}

</style>


<!-- NewWindow POP UP CODE -->
<script LANGUAGE="JavaScript">

function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}

</script>


<!-- Script to read the target phone number and split it by hyphens and show a Search link to Fonefinder.net -->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#target_num').on('keyup', function() {
var my_value = $(this).val();
$('#target_num_result').html(my_value);
var arr = my_value.split('-');
$("#target_num_search").html("&nbsp;&nbsp;<a href=http://www.fonefinder.net/findome.php?npa=" + arr[0] + "&nxx=" + arr[1] + "&thoublock=" + arr[2] + "&usaquerytype=Search+by+Number&cityname= title=FoneFinder onclick=NewWindow(this.href,'FoneFinderLookup','740','680','yes');>!BETA!FoneFinder Search!BETA!</a>");
});

});//]]>

</script>


</head>

<body>

<form id="form1" name="form1" method="post" action="">

<table cellpadding="2" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 180px">Phone #:</td>
<td><label> <input class="text" type="text" name="target_num" id="target_num" /></label><span id="target_num_result"></span><span id="target_num_search"></span></td>
</tr>

</table>
<label>
<input class="button" type="submit" name="submit" id="submit" value="Create" />
</label>
</form>

</body>
</html>

Answer

what you need to add is the following:

$('#target_num_search').on('click', 'a', function (event) {
    event.preventDefault();

    var url = $(this).attr('href');

    NewWindow(url,'FoneFinderLookup','740','680','yes');
})

This way you can remove the onclick attribute and move the function call to js. See the working jsfiddle

Comments