Jquery addClass does not work [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am starting with Jquery and i had this problem. I want click in the button send and have the input's border in red.
HTML CODE
<input type="text" placeholder="Put your name" id="name"/>
<input type="submit" value="send" id="send"/>
Javascript code
var name = document.getElementById('name');
$("#send").click(onClick);
function onClick() {
$("#name").addClass("error");
}
CSS STYLE
.error{
border-color:red;
}
If I put the .addClass out of the function click works and I don't know where is the problem?

$("#send").click(onClick); looks for an item with id=send; your button has value send, which is different. Add id="send" to your <input type="submit" value="send" onclick="send"/>
The full HTML code should look like this:
<input type="text" placeholder="Put your name" id="name"/>
<input type="submit" value="send" id="send"/>

Try using :
<input type="submit" value="send" id="send"/>
You were using onclick attribute to call a send fnction which do not exists.
And you where querying a #send id which do not exist either. I think you missed a modification when you wrote you JS code.

I actualy didn't get your need, but all i understand according to that, use this method
jQuery
$(function(){
$("#myform").on('submit',function(){onClick();return false;});
});
function onClick() {
$("#name").addClass("error");
}
HTML
<form id="myform">
<input type="text" placeholder="Put your name" id="name"/>
<input type="submit" value="send" id="send"/>
</form>
you need to use form tag to make submit button works and to control its working, and also you need to use function on "submit" event so the code can sense that it should have to control form working.

<input type="submit" value="send" id="send"/>
js:
$(document).ready(function() {
$('#send').click(function(e) {
e.preventDefault();
$('#name').addClass('error');
});
});
when you click the submit button, you send the form, thats why you should use e.preventDefault() .
You should also put your jquery code inside the document.ready function

The following code should do what you are trying to achieve. Here is a working js fiddle.
$("#send").on('click', function(e){
$("#name").addClass("error");
e.preventDefault();
});
Tips: why are you using native javascript function when using jQuery.
Instead of:
var name = document.getElementById('name');
you can simply do:
var name = $('#name');
Hope that helps.

Related

How to trigger click event in jquery? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a js file with the following code to fire a click event. But the event is not working. The console given just above for jQuery.fn gives the result.
In my HTML I have a form with input values and a submit button with class submit.
Can anyone help?
(function(jQuery) {
"use strict";
console.log(jQuery.fn)
jQuery(".submit").on('click',function(e){
console.log('test')
e.preventDefault();
});
})(window.jQuery);
<form name="login-form">
<input id="email" type="email">
<input id="password" type="password">
<input type="submit" class="submit" value="submit">
</form>
.submit is a css-selector.Make sure you have a class submit on you submit button.
Here is working snippet:
(function(jQuery) {
"use strict";
//console.log(jQuery.fn)
jQuery(".submit").on('click',function(e){
console.log('test')
e.preventDefault();
});
})(window.jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" class="submit" value="Send Request">
Take a look at this http://api.jquery.com/trigger/
$('body').click(function() {
$('#submit').trigger('click');
});
Hope so this will help you.
(function (jQuery) {
jQuery('body').on('click', '.submit', function (e) {
console.log('test')
e.preventDefault();
});
})(window.jQuery);

Trying to pass my search result from my search website to another search website [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am trying to pass my search term from my site into the string of another site's URL link. This will allow the search to find books on my site and if it can't be found there the user would click a button that would take the string from the search field and pass it to the URL of MnLink.org. I know my sites code is as follows.
Search For:
I can't figure out what I am missing because I am new to HTML and a novice in JavaScript. I thought I could put the value or id in as a var in a script but I could not get that to work. below is what I have started but got stuck on, any help would be great.
https://mnlink.on.worldcat.org/search?='"style="padding-left:10px;background:#ffffff; border: solid black;">Continue Search
You could simply use a form with method="get" and action="https://mnlink.on.worldcat.org/search".
EXAMPLE:
<form method="get" action="https://mnlink.on.worldcat.org/search">
<div>
<input type="text" name="queryString" value="" />
<button type="submit">
Submit
</button>
</div>
</form>
Working DEMO
EDIT
If you have to use an onClick event i suggest you to use Jquery: on click() you have to redirect your page with window.location.href = 'https://mnlink.on.worldcat.org/search?queryString=' but you must add the value at the end of that String with $("#INPUT_ID").val(). See the demo.
HTML:
<input title="Search For:" autofocus="false" accesskey="s" maxlength="256" tabindex="9" autocomplete="off" size="100" value="cats" id="q" name="q" type="text">
<button id="submit">
Search
</button>
JS:
$(document).ready(function(){
$("#submit").click(function() {
window.location.href = 'https://mnlink.on.worldcat.org/search?queryString=' + $("#q").val();
});
});
Working DEMO.

How to pass textbox value directly through Query String in php [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to pass textbox value directly through query string the first variable is passed but the second value will be textbox value on the same page. Please help. Thanks
<input type="text" name="txtswap" id="txtswap" size="5" />
Swap
This can't be done with PHP alone, you need some JavaScript for it:
<input type="text" name="txtswap" id="txtswap" size="5" />
Swap
JavaScript:
function doSwap(self, event)
{
var swapValue = document.getElementById('txtswap').value;
event.preventDefault();
location.href = self.href + '&value=' + encodeURIComponent(swapValue);
}
<input type="text" name="txtswap" id="txtswap" size="5" />
<a onclick="swap()" >Swap</a>
<script>
function swap() {
var swapvalue = $('#txtswap').val();
window.location.href = 'UserForm.php?operation=swap&id='+swapvalue ;
}
</script>
Try this
Not tested...
Try this .
Swap
Write JavaScript function
function redirect(){
txtswap = document.getElementById("txtswap").value;
window.location.href = "UserForm.php?operation=swap&id="+txtswap;
}
Since the text box in the same page, you can't use PHP for this. PHP won't see the data (because it won't exist at the time the PHP runs).
Stop using a link and use a form instead, converting user input into a URLs is what they are for.
<form action="UserForm.php">
<input type="hidden" name="operation" value="swap">
<input type="hidden" name="id" value="<?php echo htmlspecialchars($row['id']; ?>">
<input name="txtswap" id="txtswap" size="5">
<input type="submit" value="Swap">
</form>

Form resetting is not working

I'm using the following code to reset the form fields.
document.getElementById("form1").reset();//form1 is the form id.
It is not working. I also tried with JQuery. Even JQuery also not working.
$("#reset").click(function(){
$('form1')[0].reset();
});
My html code is
<form name="form1" id="form1" method="post">
<h3>Personal Information</h3>
<h4>Name</h4>
<input type="text" id="fname" name="fname" maxlength=50 size=11/>
<input type="text" id="mname" name="mname" maxlength=15 size=8/>
<input type="text" id="lname" name="lname" maxlength=50 size=11/>
<input type="button" id="reset" value="Reset" onclick="Reset()"/>
</form>
I'm following W3Schools. Here is my Fiddle. Can you please explain the mistake?
The problem here is that you've set the id of your button to "reset". This automatically overwrites the built-in reset method of the form element.
The solution is to use a different id attribute for your button.
So instead of:
<input type="button" id="reset" value="Reset" />
Use something like:
<input type="button" id="reset-button" value="Reset" />
See this fiddle.
Have you simply try this : Reset
<input type="reset" value="Reset"/>
I finally solved my issue. the problem is "id=reset". Because it overrides the reset method . I changed it to id="reset1". Now it is working
If your objective is only to reset the form, you could try this:
<input type="reset" id="reset" value="Reset" onclick="this.form.reset();"/>
Looks like your seleting $('form1') as in an element with a tag name of form1, while i think you actually want to select it by the id:
$('#form1')[0].reset();
With jQuery, the correct selector is :
$('#form1') // Select with ID
OR
$('form[name=form1]') // Select with name
I've updated your fiddle.
Why vanilla js isn't working:
You don't have...
document.getElementById("form1").reset();//form1 is the form id.
...within a reset function. You could do this:
function Reset() {
document.getElementById("form1").reset();//form1 is the form id.
}
Why jQuery isn't working:
You don't need to do all that you're doing. It's much more simple than that. Also, look at your 'form1' selector. You should likely add '#form1' instead. jQuery selects are different than the getElementByID function. As you can probably assume by the name, the getElementByID function is already getting the element by the ID; however with jQuery you have to specify those things. Also, don't really need the onClick attribute with jquery.
Ok, see my new jsfiddle:
http://jsfiddle.net/ty9rU/17/
So i renamed the button to reset_btn
Basicly you had an element called reset inside the form, and that caused the issue.

Function calls messing with each other

I have following code in my popup jsp:
<input type="submit" value="Mod" onclick="remind()" ></input>
<input type="hidden" value="Mod" name="db_remind" id ="remindbutton"></input>
<%--
<input type="submit" value="Delete" onclick="confirmDelete()" > </input>
<input type="hidden" value="Delete" name="db_delete" id="deletebutton" > </input>
Hidden button calls for a Spring controller method. Script is needed to close the popupwindow right after the method is committed.
Each script is like:
function save() {
$('#savebutton').click();
window.close();
}
My problem is that my solution works only, if only one of the jsp function calls is present, in each case. You might say that my solution to achieve what i want is a bit silly, but im a newbie with this and i wonder why all the function calls cannot work together?
Please edit the question to make your issue more clearer. From what I can see you are trying to call different java script functions on click of different buttons.
Do not use input type = "submit" for the buttons. Use input type = "button"
<input type="button" value="remindId" onclick="remind()" ></input>
<input type="button" value="saveId" onclick="save()"></input>
And in javascipt tag:
<script>
function remind()
{ /* Do form submit here */}
function save()
{ /* Do form submit here */}
</script>

Categories