We Keep Coding

Problem passing arguments to function using .submit in JQuery

I cannot for the life of me understand why this doesn't work.
function test(event) {
alert(event.data.fieldone);
};
$('form').submit({fieldone: $('#field').val()}, test);
I just end up with a blank alert. If I hardcode a string and pass that instead it works fine and if I declare a variable within the function and fetch the data that way it also works. What gives?

It will not process the input field , because the form submit line will be executed only ONCE at the beginning, when the input field is blank.
If you wish to make it able to alert with the text inside the input field, you need to add event listener. For example, I add a button that will trigger the alert that prints the text inside the input field in the snippet below.
function test(event) {
event.preventDefault();
console.log(event.data);
alert(event.data.fieldone);
};
$('#submit').click(function() {
var data = $('#field').val();
$('form').submit({'fieldone': data}, test);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="field" id="field">
<button id="submit" type="submit">submit</button>
</form>

In this version the data argument contains a reference to the #field input element and the .value property is then read at submit time and not at the time the submit event was attached to the form:
function test(event) {
event.preventDefault();
console.log(event.data.value);
};
$('form').submit($("#field")[0], test);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="field" id="field">
<button>submit</button>
</form>

Uncaught ReferenceError: (function) is not defined at HTMLButtonElement.onclick

I have a search form where I'm trying to have it output the results at the bottom of the page without reloading.
<form action='' method='post'>
<div id="search-form">
<input type="text" name="search" class="search-field" id="search" value="" />
<div class="submit-container">
<button type="button" value="" class="submit" id="searchbutton" onclick="searchoutput()" /></button>
</div>
</form>
<br><br>
<p>Type First Name</p>
I want the search results to show below when the button is clicked, using Ajax call to another script. I keep getting an error: "Uncaught ReferenceError: searchoutput is not defined at HTMLButtonElement.onclick
Here is my javascript (using jquery):
$( document ).ready(function() {
function searchoutput() {
if($(".search-field").val().length > 5) { //only shows results when more than 5 characters have been entered
var search = $(".search-field").val();
var update = $(".result");
var goal = 0;
$.get("query-include.php" , {search: search, goal: goal})
.done(function( data ) {
update.empty();
update.append(data);
$(this).remove();
});
};
}
$( ".search-field" ).keydown(function() {
var update =$(".results");
update.empty();
});
});
I have checked other posts and spent a long time trying to get the solution on my own. The odd thing is if I add an event listener for "keyup" in order to run the same function searchoutput as the user types:
var searchfield = document.getElementById("search");
searchfield.addEventListener("keyup", searchoutput);
Then I don't get the ReferenceError and the script runs fine.. I only get the function issue on button click.

It's a scoping issue - searchOutput is defined within the scope of the $(document).ready() function. What you could try is to declare a var for searchOutput before that code, then assign it to the function like this:
var searchOutput;
$( document ).ready(function() {
searchOutput = function () {
if($(".search-field").val().length > 5) {
//etc.

I add an eventListener in the place of searchoutput();
$( document ).ready(function() {
$('.submit').addEventListener('click', function(){
if($(".search-field").val().length > 5) { //only shows results when more than 5 characters have been entered
var search = $(".search-field").val();
var update = $(".result");
var goal = 0;
$.get("query-include.php" , {search: search, goal: goal})
.done(function( data ) {
update.empty();
update.append(data);
$(this).remove();
});
}
});
$( ".search-field" ).keydown(function() {
var update =$(".results");
update.empty();
});
});

In my case,
I was using modular code in my JS (i.e. import and export statements) so when I tried to use onclick, it wasn't calling my submit function. When I simply removed the import statement from my JS code and replaced dependent code with some default values, onclick called my function. Then I tried the addEventListener with import/export and finally it worked for me.

Accessing a text area within a form using

Please could you advise on the following:
I have a registration form, and within that a text area
<form id="register" name="register" method="post" action="register.php">
<textarea rows="5" id="bio" name="bio" method="post">Biographical information</textarea>
</form>
Using java script i have been trying to create an event handler for the onfocus and onblur events so the default text is removed on focus and restored on blur, as follows:
var bioField = document.getElementById("bio");
bioField.onfocus = function() {
if (bioField.value == "Biographical information") {
bioField.value = "";
}
};
bioField.onblur = function() {
if (bioField.value == "") {
bioField.value = "Biographical information";
}
};
i thought by getting the element by id would work, but it doesn't seem to be. no other duplication of names/id exist.
Any help much appreciated.
Thanks guys

Use the placeholder attribute:
<textarea rows="5" id="bio" name="bio" method="post" placeholder="Biographical information"></textarea>

It's working fine, perhaps the issue is that the placeholder default is "Biographical Information" and the script is testing for "All about you". The change that you made as I was posting this is exactly what you needed.
var bioField = document.getElementById("bio");
bioField.onfocus = function() {
if (bioField.value == "Biographical information") {
bioField.value = "";
}
};
bioField.onblur = function() {
if (bioField.value == "") {
bioField.value = "Biographical information";
}
};
http://jsfiddle.net/YeaTQ/1/

My educated guess is that you've placed your code as is right into a <script> tag inside <head> so when the script runs the form has not loaded yet.
Move your <script> below the form or wrap everything with window.onload:
window.onload = function(){
// Code goes here
};

You have two solutions:
In order to not use the javascript code you wrote, Use the following code:
<textarea cols="30" rows="5" id="bio" name="bio" onfocus="this.value = '' " onblur="this.value = 'All about you'">Biographical information</textarea>
I think the javascript code is located before control (in the header I guess), Because of this, the onfocus and onblur properties are not initialized. You'll have to put the script at the end of the document (before the tag).
Also, you script is searching for another text ("All about you") and not the current text that's inside ("Biographical information"). Even if you insert the javascript code at the of the document, the code it will work.

Add an html element on click

I have a very simple function to render the value of an input "text" into the html.
<form>
<input type="text" class='test'><input type='submit' value='send'>
</form>
<div class='test2'> </div>
<script>
$("form").submit(function() {
var value = $('.test').val();
$('.test2').html(value);
});
</script>
The thing is that everytime we press "send", the new value replace the old one. I would like to display the new message without deleting the old ones, on top of them.
i.e I would like to add a 'DIV' or a 'P' each time I click on the button send.
Thank you for your help.

Try it like this
$("form").submit(function() {
var value = $('.test').val();
$('.test2').append('<p>' + value + '</p>');
});

jsBin demo
$("form").submit(function(e) {
e.preventDefault();
$('<div>',{ text: $('.test').val() }).appendTo('.test2');
$('form').get(0).reset();
});

How does one validate a dojo javascript form for Ajax?

I'm trying to validate a form written in Javascript/Dojo before posting it using Ajax. Here's the code:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ValidationTextBox");
</script>
<script>
function send()
{
var mainForm = dojo.byId( "mainform" );
dojo.connect( mainForm , "onsubmit", function( event )
{
dojo.stopEvent(event);
if ( mainForm.validate() )
{
alert( "valid" );
var xhrArgs = {
form: dojo.byId( "mainform" ),
load: function( data )
{
// Success
alert( "Success" );
},
error: function( error )
{
// Error
alert( "Error" );
}
}
var deferred = dojo.xhrPost( xhrArgs );
}
else
{
alert( "not valid" );
}
});
}
dojo.addOnLoad( send );
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro">
<h2>Invitation:</h2>
<div dojoType="dijit.form.Form" id="mainform" jsId="mainform" encType="multipart/form-data" action="whatever.php" method="post">
<label for="name">Name: </label><input type="text" id="name" name="name" size="50"
dojoType="dijit.form.ValidationTextBox"
required="true"
propercase="true"/>
<br><br>
<button type="submit" dojoType="dijit.form.Button">Send Message</button>
</div>
</body>
Obviously I'm not using "alert"s in the production code; they help show me what's working and what's not working. The problem here is that the call to mainForm.validate() never returns. Commenting out the call to validate() "fixes" the problem (the form data is POSTed to the .php file), but now there's no validation at all.

Hello and welcome to StackOverflow.
Make sure that you are using dijit.byId to find dijits (as opposed to just their DOM nodes with dojo.byId), and that you are using properly cased event names. Try changing your send function like so:
function send()
{
var mainForm = dijit.byId( "mainform" );
dojo.connect( mainForm , "onSubmit", function( event )
....
When you use dojo.byId you get a regular DOM node (the regular HTML <form> tag), and not the actual dijit object (which has the validate function). This is also why improperly case on "onsubmit" works: a regular HTML form has an event called "onsubmit", but the dijit only has a method "onSubmit" (I agree this is a bit confusing).

Its a pie cake. do like this.
dijit.form.Form has a attr called state. if this state is empty string then the form widgets like dojo textbox are valid.
You can do like this.
1) Don't attach onsubmit for the form. Instead just attach click for the button and do the following code inside the button click handler.
var validForm = "";
dojo.connect( submitBtnDojoWidget, "onclick", function( event ){
if(mainform.state === validForm){
mainform.submit();
}
else {
// here mainform.state may be 'invalid' or 'incomplete'
console.log(mainform.state);
}
})