i dont understand why the click function is not being called?Is there any mistake in jquery?
<div id="chatbox">
</div>
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
jQuery.ajax({method:'post',url:'{{=URL('post')}}',
data:{'text':clientmsg,'touser'=touser},
success:function(data){
$("#usermsg").attr("value", "");
return false;
}})};
</script>
$("form").submit(function (e) {
e.preventDefault();
})
Check that for details: Stop form from submitting , Using Jquery
First you need to change your button type to button so that the form is not submitted directly when clicked.
Then you need to stop the default function of the form by using event.preventDefault() method of jquery.I am only trying to resolve the problem of page refresh here.
<form name="message" id="myForm" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="button" id="submitmsg" value="Send" />
</form>
<script type="text/javascript">
//If user submits the form
$("#myForm").submit(function(e){
e.preventDefault();
jQuery.ajax({method:'post',url:'{{=URL('post')}}',
data:$('#myForm').serialize(),//its the jquery method to serialize form data directly.
success:function(data){
$("#usermsg").attr("value", "");
}})};
Related
I have already seen this answer, but I want to disable the submitting of the form when pressing enter only for 1 input.
<form>
<input type="text" name="enterNotDisabled">
<input type="text" name="enterDisabled">
<button type="submit">
</form>
For example, I want that when the focus is on the first input, you can submit the form by pressing enter, but this feature would be disabled for the second input.
Thank you for your help.
just catch the "Enter" key event on that field.
Simple example :
<form>
<input type="text" name="enterNotDisabled">
<input type="text" name="enterDisabled" id="input2">
<button type="submit">
</form>
JS
function catchSubmit(evt) {
if (evt.code === 'Enter') {
evt.preventDefault();
}
}
document.getElementById('input2').addEventListener('keypress', catchSubmit, false);
Javascript
<form id="form">
<input type="text" name="enterNotDisabled">
<input type="text" name="enterDisabled">
<button type="submit">
</form>
<script type="text/javascript">
document.querySelector("#form").addEventListener("submit", function(e){
console.log('event')
e.preventDefault();
});
</script>
jQuery
<form id="form">
<input type="text" name="enterNotDisabled">
<input type="text" name="enterDisabled">
<button type="submit">
</form>
<script type="text/javascript">
$('#form').submit(function(ev) {
console.log('event')
ev.preventDefault();
});
</script>
How can I know which form I clicked? Is it possible with a button class instead of buttons with id?
$(document).ready(function () {
$(".form-buttons").click(function () {
//I only want the form which corresponds to the button I clicked
var formDates = $(form).serialize()
alert ("You clicked "+formDates)
})
})
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
Yes use class instead of id for similar elements. Please try this.
Note: form-button is the class name in your HTML and not form-buttons
$(document).ready(function () {
$(".form-button").click(function () {
var formDates = $(this).closest('form').serialize();
alert ("You clicked "+formDates)
})
})
I think you be looking for
$('.form-button').on('click', function () {
alert($(this).parents('form').attr('id')); // Check the ID of the form clicked
});
something Maybe Like mentioned above.
You can get the name of the element by using the this keyword which refer, in a DOM event, to the cibled element :
$(document).ready(function () {
$(".form-buttons").click(function () {
alert('You clicked the form' + this.parentElement.getAttribute('id'));
})
})
You can do this in a few different ways. You can traverse up the DOM and see which form is used or -and this is my favorite- you can submit the form!
Solution 1: Traversing up the DOM
<script>
$(document).ready(function () {
$(".form-button").click(function () {
var clicked_form = $(this).parent();
var formDates = clicked_form.serialize();
alert ("You clicked "+formDates);
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
</body>
Solution 2: Submit the form
You already are using the form, so why not submit it? Change the buttons to input elements with type submit and intercept the submit event, like this. This is how I think it should be done. It is also better for user experience because the user can just submit the form by pressing enter.
<script>
$(document).ready(function () {
$("form").on('submit', function (e) {
e.preventDefault();
var formDates = $(this).serialize()
alert ("You clicked "+formDates)
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
</body>
Check this fiddle on how I would do it.
https://jsfiddle.net/xtfeugav/
Simple use
$("form").submit(function(e) {
to listen for every submit on all the forms you have. To get the ID of the form you use
var formid = $(this).attr('id');
I used e.preventDefault(); to prevent the form don't update the page.
Remember to use <input type="submit" value="Submit"> on your forms to make this work.
Its a simple code, hope it helps.
This is my Html code:
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
function logiin()
{
name_sent = document.getElementById('username').value;
pass_sent = document.getElementById('pass').value;
$.post(
'login.php',
{
name: name_sent
},
function show(data) {alert (data); }
);
}
</script>
</head>
<body>
<!--<form>-->
Username: <input type="username" name="username" id="username"> <br>
Pass: <input type="password" name ="pass" id="pass"> <br>
<input type="submit" onclick="logiin();">
<!--</form>-->
</body>
It works with ajax and JQuery and works very well, too! :) But if i add form tag it doesn't work! why.?
It's not working because, when contained in a form, the submit button will try to submit the form.
The easiest way to prevent that from happening is to add return false; to the onclick handler:
<input type="submit" onclick="logiin(); return false;" />
The better way, though, would be to add the handler to the form itself (in case the user submits the form another way):
<form onsubmit="logiin(); return false;">
<!-- Form elements here -->
</form>
Just disable submit. If there is no button with type as submit, the form won't be submitted, unless you do it in your JavaScript code explicitly.
<body>
<form>
Username: <input type="username" name="username" id="username"> <br>
Pass: <input type="password" name ="pass" id="pass"> <br>
<input type="button" onclick="logiin();">
</form>
</body>
Probably because you are using an input button of type submit. Try using input of type button.
<input type="button" onclick="logiin();">
A button of type submit will automatically try to submit the form using post. See w3c Schools for more information.
whenever i click on submit button it fires alert("empty username") but goes a head and directs me to checklogin.php...how can i avoid that and let it remain on the page unless the field is not empty?
</body>
</html>
<script type="text/javascript"></script>
function RequiredFields(){
var username=document.forms["login"]["username"].value;
if (username==""||username==null){
alert("empty username")
document.login.username.focus();
if(document.all||document.getElementById){
return false;
}
}
}
</script>
<form action="checklogin.php" method="POST" onSubmit="RequiredFields()">
Username<input type="text" name="username"/>
Password<input type="password" name="password"/>
<input type="submit" value="Login" />
</form>
</body>
</html>
in the submit input you can add the event handler of onsubmit like this:
<input type="submit" value="submit form" onsubmit="return RequiredFields();"/>
the RequiredFields will return false if not all the required fields are full and the submit process will stop.
When you change your submit to this it won't submit if RequiredFields returns false.
<input type="submit" value="Login" onsubmit="return RequiredFields();"/>
Use this code
<input type="submit" value="Login" onclick="return RequiredFields()" />
I think this might work.
function xyz(event)
{
event.preventDefault(); // while the function returns false
}
also you may use HTML5 attribute required to avoid javascript overburden.
<*input type="" required>*
I want to create a form like this:
Type in your ID number into the form's input and submit.
The form's action becomes something like /account/{id}/.
I was told JavaScript was the only way to achieve this (see here), but how?
Using jQuery it might look something like this:
$('#inputAccount').change(function () {
$('#myForm').attr('action', 'http://www.example.com/account/' + $('#inputAccount').val());
});
This should change the action of the form any time the text in the input element changes. You could also use .blur() instead of .change() to perform the action whenever focus leaves the input element, so it doesn't keep changing all the time, etc. Then, when the form is submitted, it should submit to whatever was last placed in its action attribute.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(frm.txt).keyup(function(){
$(frm).get(0).setAttribute('action', '/account/'+$(frm.txt).val());
});
});
</script>
</head>
<body>
<form id="frm" action="foo">
<input type="text" id="txt" />
<input type="submit" id="sub" value="do eet" />
</form>
You can do something like this in JavaScript. Depending on the checked radio button (in this case,but it could be another form element) it will be chosen an action or the other:
<script type="text/javascript">
function OnSubmitForm()
{
if(document.myform.operation[0].checked == true)
{
document.myform.action ="insert.html";
}
else
if(document.myform.operation[1].checked == true)
{
document.myform.action ="update.html";
}
return true;
}
</script>
<form name="myform" onsubmit="return OnSubmitForm();">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
<input type="radio" name="operation" value="1" checked>insert
<input type="radio" name="operation" value="2">update
<p>
<input type="submit" name="submit" value="save">
</p>
</form>