Develop Reference

Send both POST and GET in HTML form

I'm trying to make a form that sends submitted data to both email and a .txt file when pressing Submit.
After some research here on Stack Overflow I'm now a bit stuck.
I made a new action in the tag and if the "send-email.php" file name is correct in "new_action.php" only the email function works.
If I have the "send-email.php" incorrect or delete it, the "get-data.php" (using $_GET) works fine.
So yeah, I want both to work.
I guess there's something wrong with the Javascript?
Here's the whole chain:
HTML
<form name="form-name" method="Post" action="new_action.php" id="form-one" onsubmit="process()">
NEW_ACTION.PHP
<?php
include('send-email.php');
include('get-data.php');
?>
JAVASCRIPT
function process() {
var form = document.getElementById('form-one');
var elements = form.elements;
var values = [];
for (var i = 0; i < elements.length; i++)
values.push(encodeURIComponent(elements[i].name) + '=' +
encodeURIComponent(elements[i].value));
form.action += '?' + values.join('&');
}

How do you return data from javascript into a html form?

I was wondering if anyone can help? What I am trying to do is retrieve the word count from javascript code into a form and then pass it into php along with the rest of the form which will check that the word count is a certain length or else it won't be submitted.
The javascript is as follows.
counter = function() {
var value = $('#msg').val();
if (value.length == 0) {
$('#wordCount').html(0);
$('#totalChars').html(0);
$('#charCount').html(0);
$('#charCountNoSpace').html(0);
return;
}
var regex = /\s+/gi;
var wordCount = value.trim().replace(regex, ' ').split(' ').length;
var totalChars = value.length;
var charCount = value.trim().length;
var charCountNoSpace = value.replace(regex, '').length;
$('#wordCount').html(wordCount);
$('#totalChars').html(totalChars);
$('#charCount').html(charCount);
$('#charCountNoSpace').html(charCountNoSpace);
};
$(document).ready(function() {
$('#count').click(counter);
$('#msg').change(counter);
$('#msg').keydown(counter);
$('#msg').keypress(counter);
$('#msg').keyup(counter);
$('#msg').blur(counter);
$('#msg').focus(counter);
});
My problem is returning wordCount into a hidden field in a form. I am not too good with javascript and am not sure how to modify this code to make it work. The rest I can figure out but am stuck here. Thank you for your help, it is greatly appreciated.

$('#wordCount').val(wordCount);
$('#totalChars').val(totalChars);
$('#charCount').val(charCount);
$('#charCountNoSpace').val(charCountNoSpace);
Use .val() instead of .html(), because .val() refers to the value of an input field.

Your HTML inside the form should include a hidden input field:
<input type="hidden" id="word_count" name="word_count" value="0" />
Then inside your JS:
$('#word_count').val(wordCount);
All together embedded inside your function:
counter = function() {
var value = $('#msg').val();
if (value.length == 0) {
$('#wordCount').html(0);
$('#totalChars').html(0);
$('#charCount').html(0);
$('#charCountNoSpace').html(0);
return;
}
var regex = /\s+/gi;
var wordCount = value.trim().replace(regex, ' ').split(' ').length;
var totalChars = value.length;
var charCount = value.trim().length;
var charCountNoSpace = value.replace(regex, '').length;
$('#wordCount').html(wordCount);
$('#word_count').val(wordCount);
$('#totalChars').html(totalChars);
$('#charCount').html(charCount);
$('#charCountNoSpace').html(charCountNoSpace);
};
$(document).ready(function() {
$('#count').click(counter);
$('#msg').change(counter);
$('#msg').keydown(counter);
$('#msg').keypress(counter);
$('#msg').keyup(counter);
$('#msg').blur(counter);
$('#msg').focus(counter);
});

If you have INPUT fields in your form, use val()
$('#wordCount').val(wordCount)
That would work for a field like this:
Be aware that there's a difference between "id" and "class". jQuery allows you to select elements based on their properties. The "id" property gets selected with "#", just like you'd do it in CSS. So make sure you have that "id='wordCount'" defined in your hidden field.

Have a look at this http://www.hscripts.com/scripts/JavaScript/word-count.php
There are plenty of examples online, just google "javascript count words in textbox"
Some imporntant notes:
A very long string with no spaces is still 1 word so don't forget to set the max length for fields
If you are doing this as a sort of validation be aware of the fact that you can not trust a form field because it can be easily manipulated, so don't forget to check the word count on the server side after the form is submitted.

The Code that you are showing is not just javascript it also includes jquery, please make sure you included jquery
<script src = "http://code.jquery.com/jquery-1.11.1.min.js"></script>
$('#field').val('asdf'); //Sets Value of a input type="text"
$('#field').html('sadf'); //Sets the html of a div
Using javascript you use either value for a input or innerHtml for a div or other text based element
document.getElementById('field').value = 'asdfsadf';
document.getElementById('field').innerHtml= 'asdfsadf';
Also instead of using a form submit consider using jquery $.ajax(there is nothing wrong with form submits but there are benefits to knowing jquery as well such as you came make async requests
http://api.jquery.com/jquery.ajax/
You will want to use a hidden field such as the following and have it in the form
<form id="myform" action='posttome.php'>
<input type="hidden" id="wordCount"/>
<input type="submit" value="sbumit"> //Submits Form
</form>
Then set its value by using of of three methods, a an elements html, an elements value, or a javascript variable $('#wordCount').val()
$('#wordCount').val($('#wordCountSoruceDiv').html()); // Sets the value to another divs html
$('#wordCount').val($('#wordCountSourceInput').val()); // Sets the value to another inputs value
$('#wordCount').val(wordCountVariable); // Sets the value to a variable

Get all form values into javascript array

I am attempting to get all the form values into a normal array[]. I had it working for tags but then I added some tags and can't seem to get it.
With just tags it worked with this
var content = document.querySelectorAll("#form input[name='content[]']");
I am currently trying something like this
var content = document.elements["content[]"].value;
This form can change from user input down the road as each section of the form is a module that they choose to add. It is also important to get the values in order, if that isn't possible then I would need to make it a JSON array. Pure javascript or jquery is fine either way.
Thank you for any help.
EDIT
I used this to solve my problem
var contents=[]
var content = $('#form').serializeArray()
for (var i = 0; i < content.length; i++) {
contents[contents.length]=content[i].value
};

Try
html
<form id="form">
<input type="text" name="content[]" value="abc" />
<textarea name="textarea" value="">123</textarea>
</form>
js
$(function() {
var form = $("#form");
// escape `[]`
var content = form.find("input[name=content\\[\\]]");
// array `literal declaration`
var _arr = [content.prop("value")];
// map all form values to single array
var arr = $.map(form.serializeArray(), function(v, k) {
return [v.value]
});
// array literal with `textarea` `value`
var t = [$("textarea").prop("value")];
console.log(_arr, arr, t);
// _arr: `["abc"]` , arr:`["abc", "123"]` t:`["123"]`
})
Demo.
See Arrays

jquery/javascript insertion after reading text file

I'm currently working on a small script using jquery 1.11.0 and IE9. Basically its function is to read a CSV or text file. The script basically reads the text file and displays it in IE. You may find the sample content of the text file below. I was able to read the file content and display it in IE with little issue however I'm having issues in inserting script on the string I extracted from the text file.
Text file content: 5:00,5,7,#5:30,6,8,#6:00,7,9,#6:30,7,10,#7:00,8,10,#
var txts = "";
$.get("sample.text",
function(data) {
rows = data.split(",#");
for (x=0; x<rows.length-1; x++){
txts += "<tr><td>"+rows[x]+"</td><tr>";
}
});
$("#output").html("<table>"+txts+"</table>");
It may not be the complete code but I hope you get the idea. So, it will be displayed as a table a what I'm trying to do is to add a "tooltip" to each row that when you hover the mouse over to the first row, the tooltip should display saying "5:00AM - 5 eggs, 7 bacon". I'm not sure where to begin in accomplishing this task.

Your code, as written, is not going to work: you declare and use the string txts outside the asynchronous function get(), but you actually populate the string inside the function (which will be execute after the html() statement.
It should look like this:
$.get("sample.text", function(data) {
var txts = "";
var rows = data.split(",#");
for (x=0; x<rows.length-1; x++) {
var tmp = rows[x].split(",");
txts += "<tr><td title='"+tmp[1]+" eggs, "+tmp[2]+" bacon'>"+tmp[0]+"</td><tr>";
}
$("#output").html("<table>"+txts+"</table>");
});

Split your data again around just a comma at each iteration of the loop. You can then do whatever you want with it, like put it in "title" so it will show up as a tooltip.
var txts = "";
$.get("sample.text", function(data) {
var rows = data.split(",#");
for (x=0; x<rows.length-1; x++) {
var tmp = rows[x].split(",");
txts += "<tr><td title='"+tmp[1]+" eggs, "+tmp[2]+" bacon'>"+tmp[0]+"</td><tr>";
}
$("#output").html("<table>"+txts+"</table>");
});

Match a String in a Webpage along with HTML tags

With below code, I am trying to match a text in a web page to get rid of html tags in a page.
var body = $(body);
var str = "Search me in a Web page";
body.find('*').filter(function()
{
$(this).text().indexOf(str) > -1;
}).addClass('FoundIn');
$('.FoundIn').text() = $('.FoundIn').text().replace(str,"<span class='redT'>"+str+"</span>");
But it does not seems to work.. Please have a look at this and let me know where the problem is...
here is the fiddle
I have tried the below code instead..
function searchText()
{
var rep = body.text();
alert(rep);
var temp = "<font style='color:blue; background-color:yellow;'>";
temp = temp + str;
temp = temp + "</font>";
var rep1 = rep.replace(str,temp);
body.html(rep1);
}
But that is totally removing html tags from body...

change last line of your code to below one...you are using assignment operator which works with variables not with jquery object ..So you need to pass the replaced html to text method.
$('.FoundIn').text($('.FoundIn').text().replace(str,"<span class='redT'>"+str+"</span>"))

try this.
$('*:contains("Search me in a Web page")').text("<span class='redT'>Search me in a Web page</span>");