How can i change behaviour of button if form submit was successful?
<form method="post" enctype="multipart/form-data" style="margin: 0;" id="frmGenerate">
<div class="clearfix">
<div class="input-group">
<input type="text" placeholder="Customer Name:" name="CustomerName">
<input type="text" placeholder="Generated Url:" name="CustomerUrl" readonly="readonly" />
</div>
</div>
<div class="clearfix">
<div class="input-group">
<button type="submit" class="btn">Generate</button>
</div>
</div>
</form>
And here is my JS code:
$('#frmGenerate').submit(function(e) {
var clientName = $(this).find('input[name="CustomerName"]').val();
$.ajax(
{
url: '#Url.Action("GenerateToken","Admin")',
type: 'GET',
data: { customerName: clientName },
success: function(response) {
if (response.result) {
$('#frmGenerate').find('input[name="CustomerUrl"]').val(response.message).select();
$('#frmGenerate').find('button.btn').text('Close');
} else {
alert(response.message);
}
}
});
e.preventDefault();
});
This is modal windows, which i open to generate token. When it's generated successful then i set generated token in modal input and change text of button to close, but i don't know how to change button's behaviour.
Better approach would be not to change existing button, but hide it and show another.
HTML:
<div class="clearfix">
<div class="input-group">
<button type="submit" class="btn">Generate</button>
<button type="button" class="btn btn-close hide">Close</button>
</div>
</div>
JS:
$('#frmGenerate').find('.btn').hide();
$('#frmGenerate').find('.btn-close').show();
Depends on what type of button you are using. Button must be used like: <button></button> Not like <button/>
And then use:
$(".btn").html('Close');
you can change attribute of button
$('#frmGenerate').find('button.btn').attr('type', 'button');
and then:
$('#frmGenerate').find('button.btn').on('click', function(){ /*close function */});
I see you have changed the text of your button to 'Close' after the form has been submitted. So the remaining part is the jQuery that handles a click event on the button.
....
$('.btn').click(function(){
var buttonText = $(this).val();
if(buttonText === 'Close'){
//code when close button is clicked
}else if(buttonText === 'Generate'){
//code when Generate button is clicked...
}
});//end button.click function
And I would use input type='button' or button than input type='submit'. Why dont you submit form using ajax as well? much better.
Hope this helps...
Related
Why my page reloads even I used ajax to it and it also disappears my input text after clicking the submit button. I already used show to solve it but it doesn't work.
<form method="POST" action="<?php $_SERVER['PHP_SELF'];?>">
<input type="text" name="name" id="name">
<span id="namenotif" style="color:red;"> <span>
<br>
<input type="text" name="price" id="price">
<span id="pricenotif" style="color:red;"> <span>
<br>
<input type="submit" name="submit" id="save"><br>
</form>
<script>
$(document).ready(function() {
$(document).on("click","#save",function(){
var name = $("#name").val();
var price = $("#price").val();
if(name==""){
$("#namenotif").html("Enter a name");
$("#name").show("fast");
$("#save").show("fast");
}
else if(price==""){
$("#pricenotif").html("Enter a price");
$("#price").show("fast");
$("#save").show("fast");
}else{
$.ajax({
url:"addproduct.php",
type:"POST",
data:{name:name,price:price},
success:function(data){
alert("Successful");
}
});
}
});
});
</script>
add return false to end of function, that handle click event
Two solutions:
Change the button type='submit' to type='button'
or ( and preferably )
Change the event listener to listen for the form's onSumbit event then call event.preventDefault or in jQuery, I think you just do return false in the callback.
The form is being submitted I think, because it is the default behavior of submit button to submit the form, no matter if you used ajax or not. so you can prevent the default behavior by simple adding a code in jquery. Modify the code like this:
$(document).on("click","#save",function(e){
e.preventDefault();
...............
Rest of the codes can remain same. so only prevent the default action, it should work.
Its because of type="submit"
Use
<input type="button" name="submit" id="save"><br>
Or
<a href="javascript:void(0) id="save">
or
jquery's preventDefault();
Below is my HTML and js code, i want when write_post_text (id) get focus then write_post_upload (id) div should show and when write_post_container (id ) div lose the foucus then it should get hide, actually its working fine but the problem is. when user click the upload_post_img (id) button then it lose focus and the write_post_upload got hide with slideUp function but when. I want to keep the focus even when this button is clicked.
<div class="upload_post" id="write_post_container" tabindex='-1'>
<form method="post">
<div class="upload_div">
<textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea>
</div>
<div class="upload" id="write_post_upload">
<input type="hidden" name="post_img">
<ul>
<li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li>
</ul>
<input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" />
<div class="post">
<button>Post</button>
</div>
</div>
</form>
Here is my JS code :
<script type="text/javascript">
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
$("#write_post_upload").slideUp();
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
</script>
you can create a variable and change it whenever Choose file is clicked
like this
don't forget to reset it
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
var blur = false;
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
if(!blur){
$("#write_post_upload").slideUp();
}
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
$("#bTimelineFile").click(function () {
blur = true;
});
I created custom form for fast reply (.append), now I want to use ajax for submit reply without reloading, I tried .on('submit', function(e)... which doesn't work (tried event delegation also). Now I tried .on('click', function(e)... and this works - don't know why.
$("#newpost").on('click', '.send', function(event) {
event.preventDefault();
});
This doesn't work:
$("#newpost").on('submit', '.send', function(event) {
event.preventDefault();
});
Appended form:
<form id="newpost" method="post" action="/forum/addpost/"+ id +"/"+ rek +" name="newpost">
<div class="editor" align="left">
<textarea name="post" cols="50" rows="5"></textarea>
<div class="submit" align="right">
<input class="send" value="." title="Send" type="submit">
</div>
</div>
</form>
So why .on('submit'..) doesn't work even if I use event delegation?
Thank you
This is not working because you have conflicting name to textarea(name="post") with the form properties.
As from jquery documentation:
jquery submit
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.
If you append the whole form dynamically then you'll have to attach the submit listener to something that already exists when the page loads. Something like this:
$('body').on('submit', '#newpost', function(event) {
event.preventDefault();
});
EDIT:
I might have misread the question. The part you said doesn't work cant work because you don't submit a ".click" button, but the form that your ".click" button is in.
The right form is
$( "#newpost" ).submit(function( event ) {
event.preventDefault();
});
Later edit:
I understood now what you want.Try a new approach.Presuming that id is 23 and rek is value "add" you have the following:
HTML
<div class="editor" align="left">
<textarea name="post" cols="50" rows="5" id="post"></textarea>
<div class="submit" align="right">
<input class="send" value="." title="Send" type="button" id="23" data-rek="add">
</div>
</div>
JS ( can be used in external file also):
//get the answer based on id-s and classes
$("body").on("click", ".send", function() {
//get what is at attribute id of the clicked link
var ID=$(this).attr("id");
//get the text from the form with id "fasttext"
var thetext = $("#post").val();
//take the value of rek ( don't know what means :) )
var therek = $(this).attr("data-rek");
//create the string that will be posted
var theString = 'post=' + thetext;
//post the form using ajax and without reloading the page
$.ajax(
{
type: "POST",
url: "/forum/addpost/"+ id +"/"+ therek,
data: theString,
cache: false,
success: function(html)
{
//do what you want to do as success - html is the returning response
//you can also make this div disappear or display a success message
}
});
});
});
May be problem is here
<div class="submit" align="right">
<input class="send" value="." title="Send" type="submit">
try to remove class="submit" from div tag
<div align="right">
<input class="send" value="." title="Send" type="submit">
I have a lot of buttons, each opens its form . How do I get the input value of form opened at the moment, and post it on my server, like post("/addOrders", valueOfinputs)?
https://jsfiddle.net/ave6uvez/21/
<div class="rows">
<div class="row">
<button class="open">Buy</button>
<form id="myform" action="/index" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="namee" name ="name" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone</label>
<input type="phone" name = "phone" >
</div>
<button class="ave" >Close</button>
<INPUT type="submit" id = "submit" class = "close" value="Submit">
<!---- <button id="submit" class="close"></button>-->
</form>
</div>
</div>
try this,
$("#submit").click(function(e){
$.post("/addOrders",$("#myForm").serialize());
return null;
})
.serialize() will put all form elements data into the request
Also you need to give different id for different Forms submit button and you have to do the above code for each submit button
Hope this works for you.
This is a simple reference:
// this is the id of the forms, set the form ids accordingly.
$("#idForm").submit(function(e) {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
I want to Hide a div On a button click. Here I am having 2 divs (Login and container). When the page loads, container will be hidden. And On click on a #submit button, I want to show the container div and hide the Login div.
The problem is Now login page is showing when the page loads, but After clicking the button I cannot make the div hide or show
Javascript:
<script>
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
</script>
HTML:
<div id="login" >
<div id="loginformcontainer">
<form>
<label> Username:
<input type="text" name="uname">
</label>
<label> Password:
<input type="password" name="pwd">
</label>
<div class="buttons1">
<button type="button" id="submit" value="Login" class="btn">
Submit
</button>
<button type="reset" id="reset" value="Reset" class="btn">
Clear All
</button>
</div>
<div>
<div id="container" style="display: none;">
<p> Index Page</p>
</div>
Write your code in document.ready function so it work,
$(document).ready(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
});
or, its shorthand,
$(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
});
for changing its visibility every time you can use toggle() function like,
$(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container, #login').toggle();
});
});
See if this is the issue, you have not a closing </div> tag here:
</div>
<div> //<----------------here you can see an opening tag instead
<div id="container" style="display: none;">
put a closing </div> above.
and try putting your script in doc ready:
$(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
});
As it is a submit button handling the forms, submit event might be more useful. In this way you can validate and prevent from submitting.
Please check the jQuery docs for submit.
Look on the demo
$('#container').hide();
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
})
I believe that you not declare the <div id="container" ></div>
Write your script in document.ready inside the <script> function so it work...
Or you can't declare the library of Jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Your html
<div id="signIn" >Sign In</div>
<div id="login" >
<div id="loginformcontainer">
<form>
<label> Username:
<input type="text" name="uname">
</label>
<label> Password:
<input type="password" name="pwd">
</label>
<div class="buttons1">
<button type="button" id="submit" value="Login" class="btn">
Submit
</button>
<button type="reset" id="reset" value="Reset" class="btn">
Clear All
</button>
</div>
<div>
Your Jquery
$('#login').hide();
$('#signIn').click(function() {
alert("try");
});
$("#submit").click(function() {
$('#login').fadeOut();
//do your code
});
Upon page loads, the login div will hide and if you click the sign in then login div will just fade in. If the user clicks the submit button, before you hide the login div, make sure you will validate the user action. Refer to jquery documentation for further explanation.
Isn't submit button causing postback and thus you're loosing css style set by javascript.