jquery mobile button doesn't come up - javascript

I'm using jquery mobile 1.3.2, and whenever I press the button, the button shows the style of being pressed, but then it never come back up again.
HTML:
<form id="login_form">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit" data-theme="b" data-role="submit">Login</button>
</form>
Javascript:
$("#login_form").submit(function()
{
$.mobile.allowCrossDomainPages = true;
var options = {
url:API_SERVER_URL+"/login",
type: "post",
success: function(data)
{
if (data.success)
{
$.mobile.changePage('success.html', {transition: "slide"});
}else
{
alert("failed:(");
}
},
error: function()
{
alert('cannot connect');
}
};
options = $.extend(DEFAULT_AJAX_OPTIONS, options);
$(this).ajaxSubmit(options);
return false;
});

Remove ui-btn-active when form is submitted.
$("#login_form").on("submit", function () {
$("[type=submit]").closest('div').removeClass("ui-btn-active");
});
Demo

Related

Input values are still accessible after a form reset via ajax call

I am faced with a problem which is a real disaster. After I click the send button to send variables via Ajax to my PHP page, a form reset will get triggered in success response. But the input values are liked to be cached, so when I click the send button while inputs are empty, it resends the previous inserted values.
Moreover, I have disabled the form submission event to prevent submitting the form.
Here is the sample code:
<body>
<form id="myform">
<input class="area" type="text"></input>
<input class="area" type="text"></input>
<input class="area" type="text"></input>
<button id="add">Add</button>
</form>
<div class="response"></div>
</body>
$(document).ready(() => {
$(document)
.off()
.on("click", "#add", function (e) {
e.preventDefault();
var area = $(".area");
area.each(function (i) {
if ($(this).val()) {
var x = $(this).val();
areadim.splice(i, area.length, x);
}
});
$.ajax({
type: "POST",
url: "addsettings.php",
data: {
area: area,
},
beforeSend: function () {
if (areadim.length == 0) {
alert("fill up all inputs");
currentRequest.abort();
} else if (areadim.length <= area.length) {
$.each(area, function () {
if ($(this).val() < 100) {
alert("input is less than 100");
currentRequest.abort();
}
});
}
},
success: function (response) {
$("#myform").trigger("reset");
$(".response").append(response);
$(".area").val("");
},
});
});
});

Custom made google form opens another tab on submit

I have made a custom google form and using google spreadsheet as my database.
But on clicking the submit button on the form the same page opens in a new tab
and the previous page text boxes have the data that the user has entered .
The custom form code is :
<form action="" target="hidden_iframe" method="POST" id="mG61Hd" onsubmit="submitted=true;">
<h5>Name</h5>
<input type="text" id ="_name" name="name">
<h5>emailaddress</h5>
<input type="text" id="_email" name="email">
<h5>message</h5>
<textarea name="entry.839337160" id ="_message"></textarea>
<button class="btn btn-lg btn-warning" onclick="postContactToGoogle()">Send</button>
</form>
The JavaScript code is :
function postContactToGoogle() {
var name = $('#_name').val();
var email = $('#_email').val();
var message = $('#_message').val();
validate();
if(validate=true)
{
$.ajax({
url: "https://docs.google.com/forms/d/1sKGYnZfwEC_3sQvsjjx57swxLxdHMHPBC89s5C72x5s/formResponse",
data: { "entry.2005620554": name,
"entry.1045781291": email, "entry.839337160": message },
type: "POST",
dataType: "xml",
statusCode: {
0: function () {
swal("Heyy there","Thank You for your feedback!","success");
$('#_name').val('');
$('#_email').val('');
$('#_message').val('');
window.setTimeout(function(){location.reload()},4000)
},
200: function () {
swal("Heyy there","Thank You for your feedback!","success");
$('#_name').val('');
$('#_email').val('');
$('#_message').val('');
window.setTimeout(function(){location.reload()},4000)
}
}
});
}
}
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)
(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA
Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
var email = $('#_email').val();
if (validateEmail(email)) {
} else {
swal('Oops!','The email '+email+' is not valid','error');
return false;
}
}
I myself solved the above issue by keeping the target of the form to a hidden iframe and creating a hidden iframe on the same page.

Submit form when enter key is pressed

I currently have a live chat room up and running and just asked some users what I can do to make the chat room even better. One thing that was asked multiple times was this...
"Can you please add a feature where pressing the enter button will send my message instead of adding a new line in the text box?"
I tried to apply some jQuery from a different post on StackOverflow but couldn't get it to work. Here is my current code...
jQuery:
<!-- jQuery for submitting form -->
<script>
var msgForm = false;
$(function () {
$('.expand').keyup(function(event) {
if (event.keyCode == 13) {
this.form.submit();
msgForm = true;
return true;
}
});
if( msgForm = true ) {
$('#formSend').on('submit', function (e) {
e.preventDefault();
var formData = $('form').serialize();
$('.expand').prop("disabled", true)
$.ajax({
type: 'post',
url: 'send.php',
data: formData,
success: function () {
$(".expand").val('');
$('.expand').prop("disabled", false)
}
});
});
}
});
</script>
Here ^^ an Ajax request is made to send the message so no page refresh is involved like a usual form.
Here is the HTML markup for the form if needed...
<form action="send.php" method="post" name="formSend" id="formSend" />
<textarea id="styled" class="expand" name="msg" placeholder="Your Message Here" onfocus:"setbg(\'#e5fff3\');"required></textarea>
<input type="submit" name="submit" value="Send" class="send" />
</form>
I just tested this in a jsfiddle and it works fine.
html:
<form>
<textarea></textarea>
<input type="submit" value="Submit"/>
</form>
javascript:
$("textarea").keyup(function(event){
if(event.keyCode == 13){
$("form").submit();
}
});
$("form").on('submit', function(e){
e.preventDefault();
alert('abcde');
});
Demo
Why not just put them in one action. No need to separate. Like this:
<form action="send.php" method="post" name="formSend" id="formSend" />
<textarea id="styled" class="expand" name="msg" placeholder="Your Message Here" onfocus:"setbg(\'#e5fff3\');" required></textarea> <br/>
<input type="submit" name="submit" value="Send" class="send" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.expand').keyup(function(event) {
if(event.keyCode == 13) {
var formData = $('#formSend').serialize();
$(this).prop('disabled', true);
console.log(formData);
$.ajax({
type: 'POST',
url: 'send.php',
// url: document.URL,
data: formData,
success: function(response) {
$('.expand').attr('placeholder', 'Sending Message...');
setTimeout(function(){
$('.expand').attr('placeholder', 'Your Message Here').prop('disabled', false);
// sample delay
}, 1000);
$(".expand").val('');
}
});
}
});
});
</script>
Why not trigger an event click if the user press the enter key
$('selector').on('keyup', function(e) {
if(e.which == 13) {
$('button_selector').trigger('click');
}
}
$('button_selector').on('click', function() {
//do ajax request here.....
});
// get from my code hope it hepls....

Use Javascript when pressing enter

I want to call a function when I press enter in the input field. The problem is, that it just reloads the page at the moment, and doesn't call the JavaScript. The JavaScript works without any problems, when I'm pressin the button. Now I want to have the same result, when I press enter.
This is my form
<form onSubmit="changeView()">
<input type="text" value="London" name="region" id="region">
<input type="button" onClick="changeView()" name="mySubmit" value="Search" >
</form>
I also tried to put this into the text field onKeydown="Javascript: if (event.keyCode==13) changeView();
But it didn't really help.
This is my JavaScript function
function changeView(){
var region = document.getElementById('region').value;
$.ajax({
type: 'GET',
url: 'webservice.php',
data: {region: region},
success: function(response, textStatus, XMLHttpRequest) {
alert("SUCCESS");
map.panTo(new L.LatLng(response[0].lat,response[0].lon));
}
});
return false;
}
HTML:
<form action="webservice.php" method="post">
<input type="text" value="London" name="region" id="region">
<input type="submit" name="mySubmit" value="Search" >
</form>
Javascript:
$('#region').on('keydown', function(e) {
if (e.which === 13) {
$(this).parent('form').submit();
}
});
$('.form').on('submit', function(e) {
var self = $(this);
$.ajax({
type: self.attr('method') ,
url: self.attr('action'),
data: {region: $('#region').val()},
success: function(response, textStatus, XMLHttpRequest) {
alert("SUCCESS");
map.panTo(new L.LatLng(response[0].lat,response[0].lon));
}
});
e.PreventDefault();
return false;
});
it looks like you're using jQuery, have you thought about just biding an event to the text box
something like this
$(document).ready(function(){ // binds when the document has finished loading
$("#region").on('keypress', function(e){
if (e.which === 13){ // enter key
changeView();
}
});
});

Validate and submit a form without enter in an infinite cycle?

I am having an infinite cycle using this jquery code, I know WHY but I dont know HOW to fix this:
<form id="submitme">
<input value="" name="n1" id="n1" type="text"/>
<input value="Send" type="button"/>
</form>
<script>
$('#submitme').bind( 'submit', function() {
$.post( 'validate.php', 'value=' + $('#n1').val(), function (data) {
if (data == "true")
$('#submitme').submit();
});
});
</script>
The jQuery.validate plugin takes care of this and I would strongly recommend you using it:
$('#submitme').validate({
rules: {
n1: {
remote: {
url: 'validate.php',
type: 'post'
}
}
}
});
But if you don't want to use it another possibility is to use a global variable, like so:
$('#submitme').submit(function() {
if (!$.formSubmitting) {
var $form = $(this);
$.post('validate.php', { value: $('#n1').val() }, function (data) {
if (data == 'true') {
// set the global variable to true so that we don't enter
// the infinite loop and directly submit the form
$.formSubmitting = true;
$form.submit();
}
});
return false;
}
return true;
});
Just a remark: the button you have placed inside the form is not a submit button so clicking it will not trigger the submit handler. You should make it a submit button:
<input value="Send" type="submit" />
I am not a jQuery expert, but in Prototype, when you write an event handler for an action and you don't stop the default action, than it will be executed after all of your callback functionality was done. So by simply flipping the if-else statement you should be able to avoid a infinite loop:
$('#submitme').bind( 'submit', function(event) {
$.post( 'validate.php', 'value=' + $('#n1').val(), function (data) {
if (data != "true")
// if validation has failed, prevent default action (submit)
event.preventDefault();
});
// if default action was not prevented it will be executed
})
I found this solution:
<form id="submitme">
<input value="" name="n1" id="n1" type="text"/>
<input value="Send" type="button"/>
</form>
<script>
$('#submitme').bind( 'submit', function() {
if ($.data( $('#submitme' ), 'validated'))
return true;
$.post( 'validate.php', 'value=' + $('#n1').val(), function (data) {
if (data == "true") {
$.data( $('#submitme'), 'validated', true );
$('#submitme').submit();
}
});
return false;
});
</script>

Categories