Develop Reference

JavaScript jQuery issue with submit button

I have a problem. I think it's because of the rendering but I don't know because that topic is new to me.
Okay, I have a simple form:
<form method="post" action="/send-mail">
<input type="text" name="msg" value="">
<input type="submit" value="send that fancy mail">
</form>
Now i want to catch that submit using jQuery like:
$('[type=submit]').submit(function(e) {
e.preventDefault();
var formHtml = $(this).parent().html();
$.ajax({
..all these options..,
beforeSend: function(xhr) {
$('form').html("sending mail");
},
success: function(data) {
$('form').html(formHtml); // I think here's the problem...
}
});
});
okay, that code works really good. It does what it should do. But, If I want to send a second request, the submit button doesn't work anylonger as intended. It tries to send the form using the default-action although I prevnted that - at least that's what I thought.
I did use google but I don't even know how to explain my problem.
Hopefully someone can help me, thanks a lot!
Greetz

Instead of .html() you can use:
.clone(true): Create a deep copy of the set of matched elements.
.replaceWith(): Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
The event must be click if attached to submit button or submit if attached to the form.
The snippet:
$('[type=submit]').on('click', function (e) {
e.preventDefault();
var formHtml = $(this).closest('form').clone(true);
$.ajax({
dataType: "json",
url: 'https://api.github.com/repos/octocat/Hello-World',
beforeSend: function (xhr) {
$('form').html("sending mail");
},
success: function (data) {
console.log('Success');
$('form').replaceWith(formHtml); // I think here's the problem...
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="/send-mail">
<input type="text" name="msg" value="">
<input type="submit" value="send that fancy mail">
</form>

Use $(document).on("click", "[type=submit]", function (e) { for dynamically created ekements instead of $('[type=submit]').submit(function(e) {

Use <input type="button"> instead of <input type="submit"> and add an onclick function like this:
<input type="button" onclick="_submitForm()" value="send that fancy mail">
And then your js will be:
function _submitForm(){
var formHtml = $(this).parent().html();
$.ajax({
..all these options..,
beforeSend: function(xhr) {
$('form').html("sending mail");
},
success: function(data) {
$('form').html(formHtml); // I think here's the problem...
}
});
}
I hope that solved your problem.

Jquery form element access

I'm new to jquery and trying to do the following:
I have a form:
<form method="POST" class="add-product" >
...
<label name="message"></label>
...
</form>
And script:
$(document).ready(function() {
$(".add-product").submit(function(e) {
e.preventDefault();
var form = this;
$.ajax({
type: "POST",
url: "/product/add/",
data: $(this).serialize(),
success: function(data) {
$(form.elements["message"]).html(data.message);
}
});
});
});
I'm trying to update label with message, but it doesn't work. Seems that I have some mistake in syntax:
$(form.elements["message"]).html(data.message);

The issue is because the label does not appear in the form.elements collection. Instead you need to select it directly:
$(".add-product").submit(function(e) {
e.preventDefault();
var form = this;
// inside the AJAX callback...
var data = {
message: 'Foo bar'
}
$(form).find('label[name="message"]').html(data.message);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" class="add-product">
<label name="message"></label>
<button>Submit</button>
</form>

You used wrong jquery selector, try it:
$('label[name="message"]').html(data.message);
hope this help;

Try using the selector:
$("form.add-product label[name='message']").html(data.message)
You can read more about jQuery Attribute selector's here. https://api.jquery.com/attribute-equals-selector/
If you have more than one label on the page with the attribute name='message' then the above won't work.

How to load data to specific input value in javascript?

I am having this piece of code, to load data form PHP after users click on link.
Then I am displaying received data to div id="vies":
<script>
$(document).ready(function(){
$("#data-received").hide();
$("#click_me").click(function(){
$("#data-received").show();
$("#vies").load('127.0.0.1/get_data/', {VATID : $("#vat_id").val()});
});
});
</script>
<label>VATID</label>
<input type="text" id="vat_id" name="vat_id" value="">
Check VATID
<div id="data-received">
<label>Data received from PHP</label>
<div id="vies">.. checking ..
<input type="text" name="put-here" id="put-here" value="test-value"/>
</div>
</div>
The question is how to load data and insert as a input value here:
<input type="text" name="put-here" id="put-here" value="test-value"/>
instead to whole div.

<script>
$(document).ready(function(){
$("#data-received").hide();
$("#click_me").click(function(){
$("#data-received").show();
$.post('http://127.0.0.1/get_data/', {
VATID : $("#vat_id").val()
}, function(data) {
$('#put-here').val(data);
});
});
});
</script>

load() is a convenience function which does an ajax request and then replaces the target element with the data returned. When you don't want to replace the whole element, use jquery.ajax() to do the request. In the success callback you can set your value to the returned data using .val().
$.ajax({
url: "127.0.0.1/get_data/",
data: {VATID : $("#vat_id").val()}
}).done(function(data) {
$( '#put-here' ).val(data);
});

How to disable other input when this input OnKeyUp?

How to disable other input when this input OnKeyUp ?
When i input data into input name="inputid1" , i want to disabled other input
when i input data into input name="inputid2" , i want to disabled other input
when i input data into input name="inputid3" , i want to disabled other input
when i input data into input name="inputid4" , i want to disabled other input
How can i do this with javascript loop ?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<input type="text" id="inputid1" name="inputid1" onKeyUp="fn_test1()">
<br>
<input type="text" id="inputid2" name="inputid1" onKeyUp="fn_test2()">
<br>
<input type="text" id="inputid3" name="inputid1" onKeyUp="fn_test3()">
<br>
<input type="text" id="inputid4" name="inputid1" onKeyUp="fn_test4()">
<br>
<span id="myplace"></span>
</form>
<?PHP
for($i=1;$i<=4;$i++)
{
?>
<script>
function fn_test<?PHP echo $i; ?>() {
$("#inputid2").prop('disabled', true);
$("#inputid3").prop('disabled', true);
$("#inputid4").prop('disabled', true);
setTimeout(function(){
$.ajax
(
{
url: 'test_mm16.php',
type: 'POST',
data: $('#form-id').serialize(),
cache: false,
success: function (data) {
$("#inputid2").prop('disabled', false);
$("#inputid3").prop('disabled', false);
$("#inputid4").prop('disabled', false);
$('#myplace').show();
$('#myplace').html(data);
}
}
)
}, 2000);
}
</script>
<?PHP
}
?>

This will work
$('#form-id input').on('keyup',function() {
$('#form-id input').attr('disabled','disabled'); //disable all
$(this).removeAttr('disabled'); //enable the one that triggers the event
doPost();
});
function doPost() {
$.ajax({
url: 'test_mm16.php',
type: 'POST',
data: $('#form-id').serialize(),
cache: false,
success: function (data) {
$('#myplace').show();
$('#myplace').html(data);
},
always: function() {
$('#form-id input').removeAttr('disabled');
}
}
)
}
Working example:
http://jsfiddle.net/z4apqjan/
Edited: I put the doPost function to execute the Ajax request.

There are to much messy things in your code, but I've made some corrections for you:
You have same names for four input elements, so you will always get inputid1 param in your PHP and I think this is not want you want to achieve.
You don't need to bind keyup for each element manually in html, better use advantage of jQuery, for this purpose I've added class attribute to all four inputs with value strangeInputs, you can change it respectively as you wish.
No need to create functions for each input, you already have enough information which separates the meaning of them.
Also after once keyup occurs to one of the input elements I think you no longer need keyup handler, so we will remove it after first it's been fired with jQuery's .off function. Edit: but because you send request all the time keyup occurs to the input we should not disable event listener
Finally your simplified code would look like this:
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<input type="text" id="inputid1" class='strangeInputs' name="inputid1">
<br>
<input type="text" id="inputid2" class='strangeInputs' name="inputid2">
<br>
<input type="text" id="inputid3" class='strangeInputs' name="inputid3">
<br>
<input type="text" id="inputid4" class='strangeInputs' name="inputid4">
<br>
<span id="myplace"></span>
</form>
JavaScript:
/**
* scenario is simple, bind keyup event, when it fires once,
* execute desired code and remove keyup listener finally
*/
$(function(){
$('.strangeInputs').keyup(function(){
$('.strangeInputs').not(this).prop('disabled', true);
fn_test_inputs();
// $('.strangeInputs').off('keyup');
// in the case you send request at once keyup event occurs,
// you should not remove listener
});
});
function fn_test_inputs()
{
setTimeout(function(){
$.ajax
(
{
url: 'test_mm16.php',
type: 'POST',
data: $('#form-id').serialize(),
cache: false,
success: function (data) {
// here enable inputs again
$('.strangeInputs').prop('disabled', false);
$('#myplace').show();
$('#myplace').html(data);
}
}
)
}, 2000);
}
Simple input thing you can see here: http://jsfiddle.net/gttv53fg/

Javascript button onclick get input value and submit post request

I have a form that looks like this:
<form method="post">
<input type="text" name="username" id="username">
<input type="text" name="password" id="password">
<select id="item" name="item">
<option value="1">Blue</option>
<option value="3">Pink</option>
<option value="4">Black</option>
</select>
<input type="button" id="submit" onclick="addItem();" name="submit" value="Submit"/>
</form>
How can I use javascript to call the addItem() function and send a post request to test.php with the value of the username as username, password as password, and item as item?
EDIT:
This is the only code in my addItem(); function so far:
$.post("http://test.com/test.php",{username:username, password:pword, item:item}, function(data) {
$('#message').html(data);
});
However, I'm wondering, how can I grab the data from all of the input fields and put it into the code I have above? This is because the function is called through a button and NOT a submit button.

To grab the data, jQuery has beautiful function inside. based upon your edited question you can try this :
var username = $("#username").val();
var pword = $("#password").val();
var item = $("#item option:selected" ).text();
// you can check the validity of username and password here
$.post("http://test.com/test.php",{username:username, password:pword, item:item},
function(data) {
$('#message').html(data);
});
(again, if you are following this way then there is no use of form tag.)

Using jQuery you can send the form as simply as doing:
$('form').submit(function(){
$.post('path/to/server/file', $(this).serialize(),function(response){
/* do something with returned data from server*/
});
return false; /* prevent browser submitting form*/
});
$.post is a shortcut method of $.ajax
jQuery $.ajax() docs
jQuery $.post() docs

give a form name and a action url, then use form.sumit() method to post form data
<form method='post' name='myform' action='test.php'>
...
<script type="text/javascript">
function addItem() {
document.myform.submit();
}
</script>

<form action="your.php" onSubmit="return addItem()">
This should do it
then in js
function addItem() {
//whatever you want to do
return true;
}
=============================================================
I see you are using Ajax, if you want to do it, then you should do the following:
$(document).on("click", "#yoursubmitbuttonID", function(e){
var password = $("#password").val();
var username = $("#username").val();
//send Ajax here
}