This is my HTML
<form id="procurar-novo">
<input type="text" name="procurar" placeholder="Pesquisar no Site" value="">
<input id="procurar-submit" type="button" value="›">
</form>
And this is my jQuery
<script type="text/javascript">
$(document).ready(function(){
$('#procurar').submit(function(e) {
e.preventDefault();
//edited
window.open = ('http://www.psicotropicus.org/'+'/busca'+encodeURIComponent($('#procurar-submit').val()), '_blank');
return false;
});
});
</script>
The ideai is that by clicking on submit, the javascript/jquery will get the #procurar-submit value and add it on the URL and redirect the user.
The _blank still not works
Thanks in advance.
Use window.open with second parameter _blank
window.open('url', '_blank');
Try this also:
<script type="text/javascript">
$(document).ready(function(){
$('#procurar').submit(function(e) {
e.preventDefault();
//edited
window.open = ('http://www.psicotropicus.org/'+'/busca'+encodeURIComponent($('#procurar-submit').val()), '_blank');
return false;
});
});
</script>
Last edit:
<script>
$(document).ready(function(){
$('form#procurar-novo').submit(function(e) {
//e.preventDefault();
//edited
var url = 'http://www.psicotropicus.org'+'/busca'+ encodeURIComponent('&' + $('input[name=procurar]').val());
window.open(url, '_blank');
return false;
});
});
</script>
<form id="procurar-novo">
<input type="text" name="procurar" placeholder="Pesquisar no Site" value="">
<input id="submitsss" type="submit" value="›">
</form>
Please consider names and ids of the form elements :)
Looks like you don't have an action specified on your form tag. Why not just change the second input element from type=submit to type=button. Then you can bind a click event on that button and have full control of what happens next. You don't have to worry about preventing a default submit action. You could do the following:
$(document).ready(function(){
$(document).on('click', '#procurar-submit', function() {
window.location.href = 'http://www.psicotropicus.org/busca'+$('input[name="procurar"]').val();
});
});
To open a new window like on a '_blank' you could change the code to be:
$(document).ready(function(){
$(document).on('click', '#procurar-submit', function() {
window.open('http://www.psicotropicus.org/busca'+$(input[name="procurar"]).val(), '_blank');
});
});
But be careful with pop-up blockers
EDIT
I changed the selector that gets the value of the text field.
I would maybe add a class or id on that text field so it can be identified apart from others. See this fiddle
Related
I have a situation where I have a textbox which will be updated with some value and as soon as the textbox gets its value a javascript function will be called. I have tried something but this not working
if (validSubmission) {
User user = new User();
String StatusMessage=user.executeUserTask("_create_","",userBusinessEmailId,userPassword,cityOfBirth,userFirstName,userLastName,userCompanyName,userCompanyAddress,userPhone,"");
if(StatusMessage.equalsIgnoreCase("OK")) {
response.sendRedirect("login.jsp?retMessage="+"Account created sucessfully");
}
else {
//response.sendRedirect("login.jsp?retMessage="+StatusMessage);
responseMsg = "Invalid Domain Entry";
{%>
Redirect();
<%}
}
}
This is the text box where I am getting the value
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onchange="Redirect()">
This is the function which I am trying to call
<script type="text/javascript">
function Redirect() {
alert($("#keyToShowInvalidDomain").val());
}
</script>
Can anyone help, please?
For input type text onchange event will not work try to use onkeyup or onkeydown
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onkeyup="Redirect()">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function Redirect() {
alert($("#keyToShowInvalidDomain").val());
}
</script>
</head>
<body>
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onchange="Redirect()">
</body>
</html>
You are using selectors based on jQuery so you need to add jQuery library to your page. Please try this.
$(document).ready(function() {
$('#keyToShowInvalidDomain').change(function(){
// Call redirect function
});
}
Above code should work with JQuery.
I have a an HTML page with an input area and a submit button.
I am using jQuery to alert the user of what their input is. (Really I am trying to store that in a variable but that will be trivial once I get this working).
Can someone help me understand why it is not working, as well as a solution? Thanks.
The HTML form is as follows:
<html>
<head>
</head>
<body>
<form>
<input type="text" class="grid_size">
<button type="submit">Submit Me!</button>
</form>
<!-- Add jQuery -->
<script src="js/jquery.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
The custom jQuery I am using is this:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput )});
});
function grabUserInput() {
return $("form").find(".grid-size").val();
}
You named your class grid_size, and search for a class grid-size in javascript code.
This code should fix a typo:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput() );
});
});
function grabUserInput() {
return $("form").find(".grid_size").val();
}
Try this -- grabUserInput is a function, not a variable -- so you have to include () to invoke the function:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput() );
});
});
And your markup has to match your selector:
<input type="text" class="grid-size">
BONUS:
In case all you want is to alert the value, and you do not want to submit the form use the following:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault()
alert( grabUserInput() );
});
});
why not try to put some id
<input id="input_grid_size" type="text" class="grid_size">
<button id="button_submit" type="submit">Submit Me!</button>
and jq
$(document).ready(function() {
$("#button_submit").click(function() {
alert($('#input_grid_size').val()); }); });
it seem your code also forgot the ";" and "()" in the alert
I have 2 textfield with different ids. what I want to achieve is that when I write to textfield1 that content is immediately copied to the second one and if I edit the second one the first one remains unchanged, but also if I go back to first one and edit it, the content is just appended to the second one.
<input type="text" name="field1" id="f1" />
<input type="text" name="field2" id="f2" />
Code :
<script type="text/javascript">
$(document).ready(function(){
$("#f1").keyup(function(){
$('#f2').val($('#f1').val());
});
});
</script>
Try this,
$(document).ready(function () {
$("#f1").keypress(function (e) {
var val = $('#f2').val();
var code = e.which || e.keyCode;
$('#f2').val(val+(String.fromCharCode(code)));
});
});
Live Demo
you can write like this
<script type="text/javascript">
$(document).ready(function(){
$("#f1").keyup(function(){
var f2Text = $('#f2').val() + $(this).val();
$('#f2').val(f2Text );
});
});
</script>
you can also use the Angular JS which is more efficient and easy to use.
AngularJS
Angular JS will help you to develop SPA(Single Page Application).
I have looked on here and around the internet for over 5 hours and I cannot figure out what I am doing wrong. It is probably something really simple. Here is my code so far:
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
document.getElementsByClassName('submitformlisting')[0].onclick = function(){
window.btn_clicked = true;
};
window.onbeforeunload = function(){
if(!window.btn_clicked){
return 'If you leave now, your information will be lost.';
}
};
});//]]>
</script>
And my submit button looks like this:
<input type="submit" name="submit" id="submitformlisting" class="id="submitformlisting"" value="Add Listing" tabindex="4" onclick="return doSubmit();" />
You messed the class in your html. Change class="id="submitformlisting"" to class="submitformlisting".
But you'd better use the id instead of the class.
Change
document.getElementsByClassName('submitformlisting')[0].onclick = function(){
to
document.getElementById('submitformlisting').onclick = function(){
I have this page, the first button is working good.
I want when press the second button to give me the link that is in the href, i tried like this , but i got the whole page , not just the value of the link , why please?
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://localhost/test/asdfasdf.php";
$("#button").on("click", function() {
$('body').load( url );
});
$("#button2").on('click',function(){
$('body').load( url +"#link" );
});
});
</script>
</head>
<body>
<input type="button" id="button" value="load" />
<input type="button" id="button2" value="search for a tag" />
</body>
</html>
I think you want a space:
$('body').load(url + " #link");
http://api.jquery.com/load/#loading-page-fragments
All you seem to want is the href of the a#link element at that URL. So instead of loading it into the <body>, just make the AJAX request, and look through the result:
$.ajax({
type: "GET",
url: "http://localhost/test/asdfasdf.php",
dataType: "html"
}).done(function (data) {
var the_link = $(data).find("#link");
alert(the_link.attr("href"));
});
And to put the href in the <body>, add this line in the .done() method:
$("body").html(the_link.attr("href"));
// or
$("body").append(the_link.attr("href"));
But if you actually want to load the a#link element into <body>, do what you had before, but then look for the a#link element and get its attribute:
$('body').load(url + " #link", function () {
var the_link = $("#link");
alert(the_link.attr("href"));
});
EDIT
You're trying to capture the href of the <a> on a different page. A try:
$.get(url+' #link', function(data) {
var $link = $(data).find('a').attr('href');
alert($link);
});
That is my very best guess, but its a shot in the dark.
Currently your code evaluates to .load('http://localhost/test/asdfasdf.php#link'), where #link is a useless fragment. You need a space to engender jQuery's special behavior of automatic DOM parsing and element loading.
$("body").load(url + " #link");
EDIT: to get the actual link value:
$.get(url).done(function (html) {
console.log($(html).find('#link').attr('href'));
});
You can also append to body inside of the .done callback.