0 
<script type="text/javascript"  src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>

function open(url) {
    $('#blockdiv').fadeIn();
    $('#iframe').attr('src', url);
    $('#containerdiv').fadeIn();   
}

function close() {  
    $('#blockdiv').fadeOut();
    $('#containerdiv').fadeOut();  
}

$(document).ready(function() {
  $('ul').css({width: $('#containerdiv').width(),height:$('#containerdiv').height()})
     $('#close').click( function() { close() })
     $('#nj_apply').click( function() { open('http://www.yahoo.com/') })

});

</script>

<td>
<input id= "nj_apply" type=button value="Apply" >
</td>

In the above code, url (http://www.yahoo.com/) is hardcoded in the script tag. But I want to pass the url to the above jquery function from the input tag itself. Whenever I click on apply button it should pass the url to the above jQuery function.

Is it possible to do it?

Improve this question
1
  • I answered, but didn't notice you only had a button, and not a text input. Does that mean they don't actually enter the url? Its hardcoded into the button? If so, I will revise my answer Commented Jul 28, 2013 at 0:55

2 Answers 2

Reset to default
1

use data-... attribute and jQuery data method:

function open(url) {
    $('#blockdiv').fadeIn();
    $('#iframe').attr('src', url);
    $('#containerdiv').fadeIn();   
}

function close() {  
    $('#blockdiv').fadeOut();
    $('#containerdiv').fadeOut();  
}

$(document).ready(function() {
  $('ul').css({width: $('#containerdiv').width(),height:$('#containerdiv').height()})
     $('#close').click( function() { close() })
     $('#nj_apply').click( function() { open($(this).data('url')); })

});

</script>

<td>
<input id= "nj_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I think he wants the field to be entered by the user, so he wants the 'value' of the input, not another hardcoded url as a data attribute
1

Yes it is possible....

This uses onblur, and will read the value entered by a user, as soon as he clicks off the box....then pass that vlue to the function...

Or you could do onkeyup, or change, to have it execute as the user types.

 $(document).ready(function() {
  $('ul').css({width: $('#containerdiv').width(),height:$('#containerdiv').height()})
 $('#close').click( function() { close() })

 $('#nj_apply').onblur( function() { 
   var url =  $(this).val();
   open(url); })

 });

 </script>

<td>
<input id= "nj_apply" type="text" />
</td>

The above way you don't even have to click any button, it will automatically execute, onblur....but if you wanna have to click a button, do it like this....

In your javascript...

$('#applytheurl').click( function(e) {
   e.preventDefault(); 
 var url =  $("#nj_apply").val();
  open(url); })
 });

Your HTML...

 <td>
<input id= "nj_apply" type="text" />
<button id="applytheurl">GET PAGE</button>
</td>

EDIT

I may have misunderstood what you wanted.....

This answer below, is if you plan to have multiple buttons, each going to a different page.....

Your HTML...

<td>
<input class="geturl" type="button" value="Apply" data-url="www.test.com" />
<input class="geturl" type="button" value="Apply" data-url="www.test2.com" />
<input class="geturl" type="button" value="Apply" data-url="www.test3.com" />
<input class="geturl" type="button" value="Apply" data-url="www.test4.com" />
</td>

Your javascript...

$('.geturl').click( function(e) {
 e.preventDefault(); 
 var url =  $(this).data('url');
 open(url); })
 });
Improve this answer

3 Comments

onkeyup or onkeypress on button? :)
Oh shit...I didn't notice he only has a button, I thought he had a text input field....now Im confused...
maybe he have couple of buttons and don't want to duplicate code

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.