If textfield is empty do not send! - Help JavaScript [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
So to understand what I'm asking go to http://quicknews.99k.org/java_chat.html
It's a chatbox that I've made with JavaScript.
When you click "send" it would keep sending... is there an if/else statement for JS?
my code:
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var message = $('textarea').val();
var old = $('#content').html();
$('#content').html(old + '<p>' + message);
});
});
</script>

Yes, it has if/else statement, you may try this
$('button').click(function(){
var message = $('textarea').val();
var old = $('#content').html();
if(message.length==0) return false;
$('#content').html(old + '<p>' + message);
});

I would do this
$('button').click(function(){
var message = $('textarea').val();
if (!message) return false;
var old = $('#content').html();
$('#content').html(old + '<p>' + message);
});

If you want to bar any submit request when textarea is empty, try this:-
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(e){
var message = $('textarea').val();
var old = $('#content').html();
//We are checking if the length of the message is zero
if(message.length==0)
//Cancel form submission
e.preventDefault();
else {
$('#content').html(old + '<p>' + message);
//Empty the textbox when you are done
$('textarea').val('');
}
});
});
</script>

Related

How to create an HTML Email using JavaScript [duplicate]

This question already has answers here:
mailto link with HTML body
(10 answers)
Closed 1 year ago.
I would like to create an HTML email using JavaScript so that the draft is ready, and the user can send the email.
Here is what I have tried so far:
location.href = "mailto:"+"isflibrary.net.com.de.xxx"+'?cc='+"emailCC"+'&subject='+("Stuff bought by: ", email)+'&body='+"Visit mywebsite.com!";
Wrong output:
Output that I want:
Is this what you were trying to do?
$(document).ready(function() {
$('#btn').click(function() {
mailto = 'isflibrary.net.com.de.xxx';
emailCC = 'test#emailCC.com';
subject = 'Stuff bought by: ' + mailto;
htmlBody = 'Visit mywebsite.com!';
location.href = "mailto:" + mailto + "?cc=" + emailCC + "&subject=" + subject + "&body=" + htmlBody;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id=btn>e-mail</button>

Edit Reply Message (comment) to a Discussion - SharePoint Online JavaScript

I need to do this in JavaScript since the entire solution is current in JavaScript and this is the last part.
I need to be able to update a reply message (comment) to an existing discussion. I am able to change the discussion fields but not the message fields. I know the message and the discussion are two different content types and that the reply messages are under a folder for the discussion but I don't know how to edit the reply message. (There is a utility to add the reply message but not to edit it).
This is a sample of the discussion (in the list) in which you can see there are 5 replies, I want to change the body text of one of the replies via JavaScript.
Image of the Discussion Showing Replies I would like to update
And for example, I want to change the message below:
Image of Replies that I want to change the body text
I have tried to update using this code, but it only changes the discussion and not the message.
I have a feeling I need to tell the system to go into that folder to find the message and change its body text, but I am not sure how to do this and after a 2 day search on the interwebs, I can't find an answer.
Code that does not work:
function aeditListItem() {
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getById('40b2fbd4-4f87-d92fb05f8044'); //ID changed to protect client
this.oListItem = oList.getItemById(getParameterByName('commentid'));
oListItem.set_item('Body', document.getElementById("ideaDetails").value.replace(/\r?\n/g, '<br />'));
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}
function onQuerySucceeded() {
alert('Item Updated: ' + oListItem.get_id());
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}
Many Many THANKS!
Apparently at the line:
this.oListItem = oList.getItemById(getParameterByName('commentid'));
getParameterByName('commentid') does not return the proper message id, make sure the message list item id is specified.
As a proof of concept the following example shows how to:
find a message by body
replace the message with a new body
Example
var listTitle = "Discussions";
var oldMessageBody = "";
var newMessageBody = "";
var ctx = SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle(listTitle);
var items = list.getItems(createMessageFindQuery('Body',oldMessageBody));
ctx.load(items);
ctx.executeQueryAsync(
function(){
if(items.get_count() == 1){
var foundItem = items.getItemAtIndex(0);
foundItem.set_item('Body',newMessageBody);
foundItem.update();
ctx.executeQueryAsync(
function(){
console.log("Updated");
},
function(sender,args){
console.log(args.get_message());
});
}
else
console.log('Not found or multiple items are found')
},
function(sender,args){
console.log(args.get_message());
});
});
function createMessageFindQuery(fieldName,fieldVal){
var qry = new SP.CamlQuery;
qry.set_viewXml(String.format('<View Scope="RecursiveAll"><Query><Where><Contains><FieldRef Name="{0}" /><Value Type="Text">{1}</Value></Contains></Where></Query></View>',fieldName,fieldVal));
return qry;
}

issue getting elements from XML [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to retrieve some data from my XML file and I want to insert it inside an unordered list. This is how my Ajax code looks like:
var request;
//For backward compatibility
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET','data.xml');
request.onreadystatechange = function(){
// if((request.readyState === 4) && (request.Status===200)){
console.log(request.responseXML);
var items = request.responseXML.getElementByTagName('name');
alert('hello');
var ouptput = '<ul>';
for (var i = 0; i >= items.length; i++) {
output += '<li>' + items[i].firstChild.nodeValue + '</li>';
}
output += '</ul>';
document.getElementById('update').innerHTML = output;
//}
}
request.send();
This code doesn't read my XML file, it gives me an error saying 'Response XML is null(Type error)' I tried to use this in a server(localhost) but it didn't work either.
Can someone please give me an idea how to solve this? Thank you.
i used jQuery to solve this... this is how i did this.....
<script>
$(document).ready(function(){
$(".update").append("<ul></ul>");
$.ajax({
type: "GET",
url: "data.xml",
dataType: "xml",
success: function(xml){
$(xml).find('book').each(function(){
var sTitle = $(this).find('title').text();
var sprice = $(this).find('price').text();
$("<li></li>").html(sTitle + ", " + sprice).appendTo(".update ul");
});
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
</script>

How to convert JQuery to Pure Javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
please help me how to convert the JQuery script into pure Javascript? I'm beginner in this PL.
Thank you
Here's the JQuery script:
$(document).ready(function () {
$('address').each(function () {
var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent( $(this).text() ) + "' target='_blank'>" + $(this).text() + "</a>";
$(this).html(link);
});
});
Here's the link for output of JQuery script
document.addEventListener("DOMContentLoaded", function(){
var ele = document.querySelectorAll("address");
for(var i = 0; i < ele.length; i++){
var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent( ele[i].innerText ) + "' target='_blank'>" + ele[i].innerText + "</a>";
ele[i].innerHTML = link;
}
});

Multiple GET requests using JQuery and AJAX

Very new to JQuery AJAX here. I have been looking around for a answer for awhile on this and can't find an answer.
I have a form that users would fill out. Once filled click on submit. This starts an ajax call to an asp page and basically just displays the information that was entered and fades out the user form. A confirm button below that takes the user to another .asp page that puts it into a database and gives them a ticket number.
My issue is that on the second call ( page that does the input ) , I notice in firebug that the get is happening twice. If I try the asp page alone it is only doing the input once so it's not my sql code. If I switch the second .asp page with the first it works fine.
Here is my jquery. I appreciate any comments. Thanks
$('#submit').click(function (event){
event.preventDefault(); // DECLARE EVENT IN THE CLICK FUNCTION
//Get the data from all the fields
var posting = 'no';
var firstname = $('input[name="firstname"]');
var lastname = $('input[name="lastname"]');
var phone = $('input[name="phone"]');
var email = $('input[name="email"]');
var family_size = $('select[name="family_size"]');
var date_3 = $("#date3");
var date_4 = $("#date4");
var book_option = $('input[name=book_option]:radio:checked');
var payment_type = $('input[name=payment_type]:radio:checked');
var comments = $('textarea[name="comments"]');
if (firstname.val()=='') {
firstname.addClass('fn_error');
firstname.focus();
return false;
} else
firstname.removeClass('fn_error');
if (lastname.val()=='') {
lastname.addClass('ln_error');
lastname.focus();
return false;
} else
lastname.removeClass('ln_error');
if (phone.val()=='') {
phone.addClass('fn_error');
phone.focus();
return false;
} else
phone.removeClass('fn_error');
if (email.val()=='') {
email.addClass('ln_error');
email.focus();
return false;
} else
email.removeClass('ln_error');
// TEST FOR VALID EMAIL
var email_pattern=new RegExp("^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$");
var email_result = email_pattern.test(email.val());
if( email_result == true ) {
email.removeClass('fn_error');
}else{
email.addClass('fn_error');
email.focus();
return false;
}
// TEST FOR VALID PHONE NUMBER
var phone_pattern=
new RegExp("^(\\(?\\d\\d\\d\\)?)?( |-|\\.)?\\d\\d\\d( |-|\\.)?\\d{4,4}(( |-|\\.)?[ext\\.]+ ?\\d+)?$");
var phone_result = phone_pattern.test(phone.val());
if( phone_result == true ) {
phone.removeClass('fn_error');
}else{
phone.addClass('fn_error');
phone.focus();
return false;
}
var dataString= 'firstname=' + firstname.val() + '&lastname=' + lastname.val() + '&phone=' + phone.val() + '&email=' + email.val() + '&family_size=' + family_size.val() + '&date3=' + date_3.val() + '&date4=' + date_4.val() + '&book_option=' + book_option.val() + '&payment_type=' + payment_type.val() + '&comments=' + comments.val() + '&posting=' + posting;
//alert(dataString);
$('#ticketform').fadeOut('slow', function() {
$('#testdiv').load('../resources/confirm_ticket.asp', dataString, function() {
$('#generateform').fadeIn('slow');
$('#submit').unbind('click');
});
}); // LOAD CLOSE
}); // SUBMIT CLICK FUNCTION CLOSE
$('#gen').click(function (event){
event.preventDefault(); // DECLARE EVENT IN THE CLICK FUNCTION
var firstname = $('input[name="firstname"]');
var lastname = $('input[name="lastname"]');
var phone = $('input[name="phone"]');
var email = $('input[name="email"]');
var family_size = $('select[name="family_size"]');
var date_3 = $("#date3");
var date_4 = $("#date4");
var book_option = $('input[name=book_option]:radio:checked');
var payment_type = $('input[name=payment_type]:radio:checked');
var comments = $('textarea[name="comments"]');
var dataString= 'firstname=' + firstname.val() + '&lastname=' + lastname.val() + '&phone=' + phone.val() + '&email=' + email.val() + '&family_size=' + family_size.val() + '&date3=' + date_3.val() + '&date4=' + date_4.val() + '&book_option=' + book_option.val() + '&payment_type=' + payment_type.val() + '&comments=' + comments.val();
alert(dataString);
$('#testdiv, #generateform').fadeOut('slow', function() {
$('#message').load('../resources/generate_ticket.asp', function() {
$('#message').fadeIn('slow');
});
}); // LOAD CLOSE
}); // SUBMIT2 CLICK FUNCTION CLOSE
First off, a better way to verify if a field is filled in is to use jQuery $.trim(), it will trim all white space in the beginning and end so if someone enters a bunch of spaces, it will return false still. This is how you would do it:
if ($.trim(firstname.val())) {
firstname.addClass('fn_error');
firstname.focus();
return false;
}
This is a much better way to verify if it is empty, but an even better idea is to use the jQuery Validation plugin, in which you can simple put class="required", class="required email", etc. for each rule (they can also be defined in the javascript if you prefer).
Also, I see that you keep using .load. Did you know a thing called $.get exists? It is a little more powerful way to send a get request and you don't have to load it into an element to make it work (there's also $.post). I used to use .load myself all the time a while back until I discovered $.get and $.post. This is an example with your code:
$.get('../resources/confirm_ticket.asp', dataString, function(data) { // data is what is returned from the request (html, etc.)
$('#generateform').fadeIn('slow');
$('#submit').unbind('click');
});
Anyway, now to your question.
I don't see any problems of why it would be doing that, but it could be a bug with the browser or something (usually not but this happened to me before too and I never found out how to fix it). Have you tried it in other browsers like Google Chrome or Safari?
I got the answer from a forum today. Can't remember where but the answer is....
$('#testdiv, #generateform').fadeOut('slow', function() {
$('#message').load('../resources/generate_ticket.asp', function() {
$('#message').fadeIn('slow');
});
I have 2 selectors in the fadeOut. It was calling the load function twice for each selector. Changed it and now I'm only getting the one GET request. Thanks for the help though all! :) Happy Coding!

Categories

Resources