please help me with my snippet.. I have this code and I don't know what is wrong.. This is my code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button id="prev">Previous</button>
</form>
<script>
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function() {
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function() {
$("#radha").hide();
$("#krishna").show();
});
});
</script>
When I click next It seems does not go to the next form.. thank you all.
This may be due to some missing attibutes of your form
HTML
<form id="krishna">
<input type="text" readonly value="krishna" />
<br />
<button type='button' id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" />
<br />
<button type='button' id="prev">Previous</button>
</form>
Script
$(document).ready(function () {
$("#radha").hide();
$("#next").click(function () {
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function () {
$("#radha").hide();
$("#krishna").show();
});
});
check here
You need to prevent the default action, which is the form submit. When you prevent the default action from happening, you will see the desired result
Check this fiddle
$(document).ready(function () {
$("#radha").hide();
$("#next").click(function (e) {
e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function (e) {
e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});
});
P.S I am not sure why you are still using jquery 1.3.x.
Also, check the fiddle for the updated HTML
Because it is trying to submit the form. So you need to make that button type to button. It is "submit" by default in a form.
JSFidle Demo
<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button type="button" id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button type="button" id="prev">Previous</button>
</form>
Your code is fine but What is happening here that your submit button required post request. So you can prevent this behavior by e.preventDefault() function of jquery. I have updated the jquery code as below.
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function(e){
e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function(e){
e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});
});
visit the following link to get demo on jsfiddle :
http://jsfiddle.net/4N95Q/
This is how I did it.
http://jsfiddle.net/GnzWZ/2/
$('form button').click(function(e){
$("#radha, #krishna").toggle();
return false;
});
Notes:
return false is the jquery solutions for preventdefault.
You can simplify your selectors and optimize your code a little more.
Avoid making style changes that should be originally made in CSS.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="krishna">
<input type="text" readonly value="krishna" ><br>
<button id="next">Next</button>
</div>
<div id="radha">
<input type="text" readonly value="radha" ><br>
<button id="prev">Previous</button>
</div>
<script>
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function() {
$("#radha").show();
$("#krishna").hide();
console.log("next click");
});
$("#prev").click(function() {
$("#radha").hide();
$("#krishna").show();
});
});
</script>
Working fine if you change
form
in the
div
Related
I'd like to create html-objects with jQuery and then delete them again via jQuery/javascript but I run in issues because these objects didn't exist when the page was loaded.
Do you have any ideas on how I may solve this issue?
Thanks in advance.
(This is my first post on stackoverflow - I hope I did everything right ^^)
https://jsbin.com/yudamofoho/edit
<body>
<div id='ipt-list'>
</div>
<input type="submit" id="btn-add" value="Add">
</body>
function rmInput(){
$(this).parent().remove();
return false;
}
$(function(){
$('#btn-add').on('click', function(){
ipt = '<div><input type="text" value=""><input type="submit" onclick="rmInput();" class="btn-rm" value="Remove"></div>';
$('#ipt-list').append(ipt);
return false;
});
});
this refers to the Window object not the element you are thinking.
You have to pass this to the function so that you can refer that inside the function:
onclick="rmInput(this);"
function rmInput(el){
//console.log(this.constructor.name); // Window
$(el).parent().remove();
return false;
}
$(function(){
$('#btn-add').on('click', function(){
ipt = '<div><input type="text" value=""><input type="submit" onclick="rmInput(this);" class="btn-rm" value="Remove"></div>';
$('#ipt-list').append(ipt);
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='ipt-list'>
</div>
<input type="submit" id="btn-add" value="Add">
The issue is because you're using the outdated onclick attribute. Within the function it invokes this will refer to the window, not the element which raised the event.
To fix this, and improve your logic, remove the inline event handler and use a delegated one instead:
jQuery(function($) {
$('#btn-add').on('click', function() {
let ipt = '<div><input type="text" value=""><input type="button" class="btn-rm" value="Remove"></div>';
$('#ipt-list').append(ipt);
});
$('#ipt-list').on('click', '.btn-rm', function() {
$(this).parent().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ipt-list"></div>
<input type="button" id="btn-add" value="Add">
Also note that I changed both buttons to type="button". If you're going to cancel the event in both cases, the submit type becomes redundant.
Since you are using jQuery you don't need to put inline onclick event.
$(function(){
$('#btn-add').on('click', function(){
ipt = '<div><input type="text" value=""><input type="submit" class="btn-rm" value="Remove"></div>';
$('#ipt-list').append(ipt);
return false;
});
$('#ipt-list').on('click', '.btn-rm', function(){
$(this).parent().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id='ipt-list'>
</div>
<input type="submit" id="btn-add" value="Add">
</body>
I have a problem. I want when I click an h1 tag, then h1 tag id add in input value and Submitted automatically. But auto submits is not working.
If I click submit button then its submitted data.
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
Jquery:
$(document).on('click', 'h1', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
The problem is here:
$(document).on('click', 'path', function () {
what is path here?
you have to use either id, class, name of the attribute as a selector, but in your case there is nothing with path in html. So change path to:
$(document).on('click', '#my-id', function () {
and try again.
You can use a simpler approach as your button type is submit. Allot an id to it and on document click programmatically click on it.
<button type="submit" name="submit" class="btn" id="submitBTN">Submit</button>
THE JS:
$(document).click(function(){
$("#submitBTN").click();
});
Whatever be the event if you want to submit the form, you can always follow the above mentioned approach.
Just update #my-id instead of path:
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
In Your JQuery You mention You mention path but what is that
just simply change that into id of h1 tag So changes are as follows
$(document).on('click', '#my-id', function () {
Running Example
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
I am using multiple submit button in a single form.
I will get the button I clicked, in normal post. But when I am using javascript this.form.submit(), I am not getting the button that I have clicked.
Is there any solution to identify the button without using hidden fields.
<script type="text/javascript" >
$("input#add").click(function(e) {
e.preventDefault();
$("<div>Do you want to continue ? </div>").dialog({
modal: true,
buttons: {
"Ok": function() {
$(this).dialog("close");
this.form.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
$("input#subtract").click(function(e) {
e.preventDefault();
$("<div>Do you want to continue ? </div>").dialog({
modal: true,
buttons: {
"Ok": function() {
$(this).dialog("close");
this.form.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>
<form name="my_form" action="processor.php" method="post">
<br> <br>
Enter a number: <input type="text" name="number" size="5">
<br> <br>
<input type="submit" name="add" id="add"value="Add 10">
<input type="submit" name="subtract" id="subtract" value="Subtract 10">
</form>
The server code that I need to check as follows.
if($this->input->post("add"))
{
$save_status = 1;
}
if($this->input->post("subtract"))
{
$save_status = 2;
}
you have a small mistake, You have not closed the <script>
<script type="text/javascript" >
$("input#add").click(function(e) {
this.form.submit();
$("input#add").attr('disabled', 'disabled');
});
$("input#subtract").click(function(e) {
this.form.submit();
$("input#subtract").attr('disabled', 'disabled');
});
<script>// this line it shud be </script>
This should help you.
IN processor.php,
print_r($_POST);// you should be able to get expected result.
see demo here
Main php code here
After form submit code here
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$(document).on('click','#add',function() {
this.form.submit();
$("#add").attr('disabled', 'disabled');
});
$(document).on('click','#subtract',function() {
this.form.submit();
$("#subtract").attr('disabled', 'disabled');
});
});
</script>
<form name="my_form" action="#" method="post">
<br> <br>
Enter a number: <input type="text" name="number" size="5">
<br> <br>
<input type="button" name="add" id="add"value="Add 10">
<input type="button" name="subtract" id="subtract" value="Subtract 10">
</form>
Yes, as per #Niranjan, the </script> should be there in your script. Apart from this, in your script, you can have a hidden input field. Say "clicked_button".
<input type="hidden" name="clicked_button" id="clicked_button">
And in your Javascript:
$("input#add").click(function(e) {
$("#clicked_button").val("add_button");
this.form.submit();
$("input#add").attr('disabled', 'disabled');
});
$("input#subtract").click(function(e) {
$("#clicked_button").val("substract_button");
this.form.submit();
$("input#subtract").attr('disabled', 'disabled');
});
And now in your PHP script, in form submission code - if you print following POST variables; you should be able to get the button which you clicked:
print_r($_POST);
Then you can put either switch case or if-else condition to perform your desired action.
Try type as button.
As you already have two separate click event bind in jquery
You can do the same in simple way by using ONCLICK with input type 'button'
<script type="text/javascript" >
function submitForm(id){
alert(id);
$('#my_form').submit();
$("input#"+id).attr('disabled', 'disabled');
}
</script>
<form name="my_form" id="my_form" action="processor.php" method="post">
<br> <br>
Enter a number: <input type="text" name="number" size="5">
<br> <br>
<input type="button" name="add" id="add"value="Add 10" onClick="submitForm(this.id)">
<input type="button" name="subtract" id="subtract" value="Subtract 10" onClick="submitForm(this.id)">
</form>
I use this code to show a form after a link is clicked:
$(function () {
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
});
});
Reply
<form class="msgarea">
<input />
<input type="submit" />
</form>
.msgarea{ display:none; }
Now I need the link "msg" to disappear, what would the code look like? I'm totally new in js
UPDATE:
<script language="javascript" type="text/javascript">
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
$(this).hide();
});
</script>
Reply
<form class="msgarea">
<input />
<input type="submit" />
</form>
.msgarea{ display:none; }
What is the problem in saying hide like after show the form like bellow
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
$(this).hide();
});
DEMO
I have input button , what I want is if a user clicks on the button then textbox should appear.
Below is the code which is not working :
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
$("#driver").click(function() {
$('#text').show();
}
});
Also the textbox should not be visible initially
You can use toggle instead;
$('#text').toggle();
With no parameters, the .toggle() method simply toggles the visibility of elements
try this:
$(document).ready(function(){
$("#driver").click(function(){
$("#text").slideToggle("slow");
});
});
Here's an example using toggle:
http://jsfiddle.net/x5qYz/
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />
$("#driver").click(function() {
$('#text').css('display', 'block');
});
$(function()
{
// Initially hide the text box
$("#text").hide();
$("#driver").click(function()
{
$("#text").toggle();
return false; // We don't want to submit anything here!
});
});
Try this:
<script type="text/javascript">
jQuery(function ($) {
$('#driver').click(function (event) {
event.preventDefault(); // prevent the form from submitting
$('#text').show();
});
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
Make the textbox hidden when the page loads initially like this
Code:
$(document).ready(function () {
$('#text').hidden();
});
Then your should work the way you want.