There is the piece of code containing 2 forms:
<form class="emp-delete">
<label for="emp-id">Id:</label>
<input type="text" id="emp-id" />
<input type="submit" id="submit" value="delete" />
<span id="status" />
</form>
<script type="text/javascript">
$("#submit").click(function(){
$.ajax({
type: "DELETE",
url: "/corporate/employees/" + $("#emp-id").val(),
complete: function(r){
$("#status").text(r.responseText);
}
})
return false;
})
</script>
<p><spring:message code="createEmployee.title"/>
<form class="emp-create">
<label for="name" />
<input type="text" id="name" value="create"/>
<input type="submit" id="add-emp" />
</form>
<script type="text/javascript">
$("#add-emp").click(function(){
var employeeObject= { name: $("#name").val() }
$.ajax({
type: "POST",
data: JSON.stringify(employeeObject),
contentType: "application/json",
url: "/corporate/employees"
})
return false;
})
</script>
The issue is after clicking the delete button the second form dissapears.
Before:
After:
How can I do that the second form doesn't dissapear when clicking the delete button.
UPDATE
DEMO
The problem is right here:
<span id="status"/>
Change this to:
<span id="status"></span>
The browser thinks, that the span is openend and your second form is a child of it, which got replaced with your text.
Related
When I submitted my external HIT on Mturk, the Submit button is not working. I would appreciate if someone could help me with this. The data gets stored in my server though. Here is my code:
<div id="instruction3" class="instructions" style="display:none">
survey questions here
Submit
</div>
function SaveData() {
(some code here)
d = {
"trialStruct": trialStruct,
"critStruct": critStruct
};
console.log(d)
SendToServer(curID, d);
}
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>
function SendToServer(id, curData) {
$.ajax({
type : "POST",
url : "https://xxxxxxxxxxxx/turk/save.php",
data : { json : JSON.stringify(curData) },
success : function(data) {
document.forms[0].submit();
}
});
}
Edited: the flow should be participants click on the submit button and the data gets stored and sent to the externalSubmit page. These are parts of the code from Mturk that I need to implement in my code and perhaps I am not doing it right.
<!-- HTML to handle creating the HIT form -->
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<!-- HTML to handle submitting the HIT -->
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>
You should call the SaveData() function inside the form tag
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form" onSubmit="SaveData()">
So I think you should try to move the SaveData function to the onSubmit value of the form. So you would be submitting the form and the data would get saved to the server. You have extra html code above but I think that is superfluous for what you are trying to do.
function SaveData() {
(some code here)
d = {
"trialStruct": trialStruct,
"critStruct": critStruct
};
console.log(d)
SendToServer(curID, d);
}
function SendToServer(id, curData) {
$.ajax({
type : "POST",
url : "https://xxxxxxxxxxxx/turk/save.php",
data : { json : JSON.stringify(curData) },
success : function(data) {
document.forms[0].submit();
}
});
}
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="mturk_form" method="post" name="mturk_form" onSubmit="SaveData()">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<p><input onclick="window.location.href = https://workersandbox.mturk.com/mturk/externalSubmit';"id="submitButton" type="submit" value="Submit" /></p>
</form>
Here is the working one, I have used https://postman-echo.com/post just to make sure it works.
function SaveData() {
var d = {
"trialStruct": trialStruct,
"critStruct": critStruct
};
console.log(d);
SendToServer(curID, d);
}
function SendToServer(id, curData) {
$.ajax({
type: "POST",
url: "https://postman-echo.com/post",
data: {
json: JSON.stringify(curData)
},
success: function(data) {
$("#mturk_form").submit();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="instruction3" class="instructions" style="display:none">
Submit
</div>
<form action="https://postman-echo.com/post" id="mturk_form" method="post" name="mturk_form">
<input id="assignmentId" name="assignmentId" type="hidden" value="" />
<p><input id="submitButton" type="submit" value="Submit" /></p>
</form>
what am i missing here?
<script>
function validateLogIn(login)
{
console.log(login);
var username = $("#username").val();
var password = $("#password").val();
console.log(username, password, login);
$.ajax({
url: 'login.php', //checking the login in
data: {username:username,password:password},
type: "POST", //Method by which data being transmitted
dataType: 'json',
success: function(data)
{
console.log(data);
login.submit();
}
//else do an alert("please lgo in again");
});
return false;
}
</script>
</head>
<body>
<form action="crud.html" method="post" name="form-login" onsubmit="return validateLogIn(this);">
<input required placeholder="Username" type="text" name="username" id="username"/>
<input required placeholder="Password" type="password" name="password" id="password"/>
<label for="remember">Remember Me:</label>
<input type="checkbox" name="remember" value="yes">
<br />
<br />
<input type="submit" name="login" value="login" />
</form>
</body>
have i got a spelling mistake? my console.logs doesnt show either
In your validateLogIn() function, you aren't returning false, therefore the function will be called, but the browser will still proceed to submit the form to crud.html and change page.
function validateLogIn(login)
{
...
...
...
return false;
}
If you want to submit to crud.html only after the success function fires, then you still need the above return false, and in your success function add:
success: function(data)
{
login.submit();
}
This code is working perfectly on my machine, please make sure you are including the jquery library correctly. and obviously return false
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function validateLogIn()
{
var username = $("#username").val();
var password = $("#password").val();
console.log(username, password, this);
alert("Hello");
$.ajax({
url: 'login.php', //checking the login in
data: {username:username,password:password},
type: "POST", //Method by which data being transmitted
dataType: 'json',
success: function(data)
{
console.log(data);
}
//else do an alert("please lgo in again");
});
return false;
}
</script>
</head>
<body>
<form action="crud.html" method="post" name="form-login" onsubmit="return validateLogIn();">
<input required placeholder="Username" type="text" name="username" id="username"/>
<input required placeholder="Password" type="password" name="password" id="password"/>
<label for="remember">Remember Me:</label>
<input type="checkbox" name="remember" value="yes">
<br />
<br />
<input type="submit" name="login" value="login" />
</form>
</body>
</html>
change your log statement to this as below, the log() method takes one argument, so if you want to print three variables append it to one string
console.log("username:"+username+" password:"+password+" id:"+login.id);
I'm using Ajax to submit the login form without refreshing the page. I've added a function to see whether the data returns 'error' (which comes up when the user enters an incorrect email/password). If it does not return 'error', the user has been logged in and will be transferred to the page within 2 seconds.
The problem is that my button acts like a double-click button and I cannot see why. This is my JS file:
$(function() {
$("#goLogin").click(function() {
$.ajax({
type: "POST",
url: "db-requests/db-login.php",
data: $("#loginForm").serialize(),
success: function(data,textStatus,jqXHR){ finishLogin(data,textStatus,jqXHR); }
});
});
});
function finishLogin( data , textStatus ,jqXHR ) {
if ( data == "error" ) {
$('.errorMsg').fadeIn(500).hide();
$('.succesMsg').fadeOut(300).hide();
} else {
$('.succesMsg').fadeIn(500).show();
$('.errorMsg').fadeOut(300).hide();
setTimeout("location.href = 'protected.php';",2000);
}
}
I've tried placing it between the document_ready tags, but that isn't working either.
Part of the HTML code:
<div class="login form">
<div class="login-header">Please Login</div>
<form method="post" id="loginForm" name="form">
<label for="email" class="short">Email*</label>
<input type="text" name="email" id="email" class="required" placeholder="" />
<label for="password" class="short">Password *</label>
<input type="password" name="password" id="password" class="required" placeholder="" maxlength="15" />
</form>
<div id="login-functions">
<div class="loginbtn-container">
<input type="submit" id="goLogin" name="goLogin" class="button green" value="Login" />
</div>
<div class="login form actions">
<p class="register account">Register an account</p>
<p class="request password">Lost your password?</p>
</div>
</div>
</div>
<div class="errorMsg">Incorrect. Please recheck your details</div>
<div class="succesMsg"><b>You've been logged in!</b> Please wait while we transfer you</div>
$('.errorMsg').fadeIn(500).hide();
$('.succesMsg').fadeOut(300).hide();
did you mean tto hide both? I see the click is working fine, though you should ideally do submit
Take your submit inside the form, and prevent normal form submit using preventDefault()
$("#goLogin").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "db-requests/db-login.php",
data: $("#loginForm").serialize(),
success: function(data,textStatus,jqXHR){ finishLogin(data,textStatus,jqXHR); }
});
});
Please move your submit button inside the form closing tag first
<input type="submit" id="goLogin" name="goLogin" class="button green" value="Inloggen" />
The above button is placed after the </form> tag.
Because you click on input type submit and progress Ajax on it; it cause submit 2 times.
To avoid it, you can use as Zach Leighton said above ; or use as below
$("#goLogin").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "db-requests/db-login.php",
data: $("#loginForm").serialize(),
success: function(data,textStatus,jqXHR){ finishLogin(data,textStatus,jqXHR); }
});
});
It may take a long time to complete the call.php and get the return value, how can I change the submit button's value to "Processing … " while the call.php is being executed?
Submit button with id "submit_btn", there is no change to the script
$('#submit_btn').val('Processing …')
AJAX code
$(document).ready(function(){
$('#form1').submit(function(e) {
e.preventDefault();
$('#submit_btn').val('Processing ...');
$.ajax({
cache: false,
type: "POST",
dataType: "json",
data: $('#form1').serialize(),
url: $('#form1').attr('action'),
complete: function (HttpRequest, textStatus) {
$('#submit_btn').val('Create');
}});
return false;
});
});
HTML
<form action="call.php" method="POST" id="form1" name="form1">
<input type="text" name="campname" id="campname">
<textarea id="longdesc" name="longdesc"></textarea>
<input type="text" name="vercode" id="vercode" />
<input type="submit" value="Create" id="submit_btn" />
</form>
I'm not very sure, but why don't try to change the value with jQuery on click?
Something like:
$('#submit_btn').click(function(){
$(this).val("your value")
})
... or just change in your code the submit with click :)
--------------EDIT(based on the author code)----------------
The value of the button don't change because the jquery you use style the basic submit input by applying a span over it. So on click You will have to change the text in this span.
Here is a DEMO
For simple form from single HTML file, $('#submit_btn').val('Processing …').button('refresh'); is work but NOT in multiple jQuery page.
HTML
<form action="test.php" method="POST" id="form1" name="form1">
<fieldset>
<input type="text" name="field1" id="field1" />
<input type="button" value="Button" name="btn01" id="btn01" />
<input type="submit" value="Submit" id="submit_btn" />
</fieldset>
</form>
AJAX
$(document).ready(function () {
$('#form1').submit(function (e) {
e.preventDefault();
$('#submit_btn').val('Processing …').button('refresh');
$.ajax({
type: "POST",
dataType: "json",
data: $('#form1').serialize(),
url: $('#form1').attr('action'),
complete: function (HttpRequest, textStatus) {
$('#submit_btn').val('Submit').button('refresh');
}
});
return false;
});
});
Demo page: http://jsfiddle.net/yckelvin/C6kzr/
For multiple jQuery page, $('#submit_btn').prev().text("Processing …") must be used instead.
HTML
<!-- HOME Page -->
<div data-role="page" id="page1">
<div data-theme="b" data-role="header" data-position="fixed"> Menu
</div>
<!-- Panel Page ---->
<div data-role="panel" id="menu" data-display="overlay">
<ul data-role="listview">
<li>Goto Form Page
</li>
</ul>
<p><a data-role="button" data-rel="close">Close</a>
</p>
</div>
</div>
<!-- Form Page -->
<div data-role="page" id="formpage" data-add-back-btn="true">
<div data-role="content">
<form action="test.php" method="POST" id="form1" name="form1">
<fieldset>
<input type="text" name="field1" id="field1" />
<input type="button" value="Button" name="btn01" id="btn01" />
<input type="submit" value="Submit" id="submit_btn" />
</fieldset>
</form>
</div>
</div>
AJAX
$(document).ready(function () {
$('#form1').submit(function (e) {
e.preventDefault();
$('#submit_btn').prev().text("Processing ...").delay( 1000 );
$.ajax({
type: "POST",
dataType: "json",
data: $('#form1').serialize(),
url: $('#form1').attr('action'),
complete: function (HttpRequest, textStatus) {
$('#submit_btn').prev().text('Submit');
}
});
return false;
});
});
Demo page: http://jsfiddle.net/yckelvin/V5mSv/
Use $ajax's beforeSend option:
$.ajax({
cache: false,
type: "POST",
beforeSend: function() { ... },
...
$(document).ready(function(){
$('#submit_btn').click(function(e) {
e.preventDefault();
$(this).val('Processing ...'); // this did the trices
$.ajax({
cache: false,
type: "POST",
dataType: "json",
data: $('#form1').serialize(),
url: $('#form1').attr('action'),
complete: function (HttpRequest, textStatus) {
$('#submit_btn').val('Create');
}});
return false;
});
});
WORKING DEMO
For my this was the one that worked in a page with many forms with the same name and id
$(this).find("#submit").val("Saved");
Are there any jQuery/AJAX functions that when a form (or anything for that matter) is displayed, upon pressing a button the div containing the original form is replaced by a new form? Essentially, a multi-part form without having to reload the page.
Can I use something like this?
$('form#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: '',
url: '',
data: $(this).serialize(),
success: function(response) {
$('#divName').html(response);
//somehow repopulate div with a second form?
}
})
return false;
});
I've used this before for adding items to a list, but I've never used it to totally repopulate it with different content. How can I direct it to the second form?
edit - I got it to work, but only when I write '#form2' for the replacement. I alerted the response and I get {"formToShow":"show2"}. I tried doing response.formToShow but it's undefined.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<div id="divName">
<form method="POST" action = "#" id="form1">
<input type="textbox" name="textbox1" value="1"/>
<input type="submit" name="submit1"/>
</form>
<form method="POST" action = "#" id="form2" style="display: none">
<input type="textbox" name="textbox2" value="2"/>
<input type="submit" name="submit2"/>
</form>
</div>
<script>
$('form#form1').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'JSON',
url: 'receiving.php',
data: $(this).serialize(),
success: function(response) {
$('#form1').hide(); //hides
//$('#form2').show(); //this will show
$(response.formToShow).show(); //this does not display form 2
}
})
return false;
});
</script>
Here is receiving.php. When I view this page {"formToShow":"show2"} is displayed
<?php
echo json_encode(array("formToShow" => "#form2"));
?>
Check the JQuery Load Function
This is personal preference, but I'd never send HTML through the response and display it like that, what I'd do is:
Send a JSON array back from the server, such as { formToShow: "#form1" }
Then you can simply do this:
success: function(response) {
$('form').hide();
$(response.formToShow).show();
}
Obviously, using this method, you'd also have to have the second form in your markup like this:
<form method="POST" action = "#" id="form2" style="display: none">
<input type="textbox" name="textbox2"/>
<input type="submit" name="submit2"/>
</form>
You'd also have to change (to pickup the array):
$.ajax({
type: 'JSON'
try this
$('form#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: '',
url: '',
data: $(this).serialize(),
success: function(response) {
$('#divName').html(response);
$('#form1').hide();
$('#form2').show();
}
})
return false;
});
<form method="POST" action = "#" id="form1">
<input type="textbox" name="textbox1"/>
<input type="submit" name="submit1"/>
</form>
<form method="POST" action = "#" id="form2" style="dispay:none;">
<input type="textbox" name="textbox2"/>
<input type="submit" name="submit2"/>
</form>