i'm new in jquery ajax and i need some help.
This is my basic html.
<form id="replayForm1">
msg_id:
<input type="text" name="msg_id">
<br>
msg_replay
<input type="text" name="msg_replay">
<button onClick="getmsg(1)">Click Me</button>
</form>
<form id="replayForm2">
msg_id:
<input type="text" name="msg_id">
<br>
msg_replay
<input type="text" name="msg_replay">
<button onClick="getmsg(2)">Click Me</button>
</form>
This is my jquery:
<script>
function getmsg(formID) {
var formName = '#replayForm' + formID;
$(formName).submit(function (e) {
e.preventDefault();
var msg_id = $('input[name=msg_id]').val();
var msg_replay = $('input[name=msg_replay]').val();
alert(msg_id + msg_replay);
});
}
</script>
My problem is, when i fill the second form i get empty value. First form don't have problem it return value and don't have problem. How to deal this problem? i try make this form unique to easy submit form just using 1 function.
jQuery will look for the first instance which it finds of the inputs, so use the formName to match the correct ones.
You should also remove the previous event or you will get multiple alerts after the second click on the same button.
function getmsg(formID) {
var formName = '#replayForm' + formID;
$(formName).off('submit').on('submit', function (e) {
e.preventDefault();
var msg_id = $(formName + ' input[name=msg_id]').val();
var msg_replay = $(formName + ' input[name=msg_replay]').val();
alert(msg_id + msg_replay);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="replayForm1">
msg_id:
<input type="text" name="msg_id">
<br>
msg_replay
<input type="text" name="msg_replay">
<button onClick="getmsg(1)">Click Me</button>
</form>
<form id="replayForm2">
msg_id:
<input type="text" name="msg_id">
<br>
msg_replay
<input type="text" name="msg_replay">
<button onClick="getmsg(2)">Click Me</button>
</form>
In both the case the name is same. Change the name & pass those values to getmsg function
function getmsg(formID, inputName, msgReplyName) {
var formName = '#replayForm' + formID;
$(formName).submit(function(e) {
e.preventDefault();
var msg_id = $('input[name=' + inputName + ']').val();
var msg_replay = $('input[name=' + msgReplyName + ']').val();
alert(msg_id + ' ' + msg_replay);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="replayForm1">
msg_id:
<input type="text" name="msg_id">
<br> msg_replay
<input type="text" name="msg_replay">
<button onClick="getmsg(1,'msg_id','msg_replay')">Click Me</button>
</form>
<form id="replayForm2">
msg_id:
<input type="text" name="msg_id_2">
<br> msg_replay
<input type="text" name="msg_replay_2">
<button onClick="getmsg(2,'msg_id_2','msg_replay_2')">Click Me</button>
</form>
Related
I am trying to create form where I can submit two answers.
Alongside the form I would like to create an alert where the alert takes the input from the form when one of the buttons are clicked. That works fine.
Alongside the form I would like to create another button that displays the text from the form in html.
function htmlText(argument) {
document.getElementById("fname").innerHTML = alertText();
document.getElementById("lname").innerHTML = alertText();
}
function alertText(argument) {
return "Your name is: " +
document.getElementById("fname").value + " " +
document.getElementById("lname").value + ".";
}
<form>
<label>Name :</label><input type="text" id="fname"> <br>
<label>Name2 :</label><input type="text" id="lname"> <br>
</form>
<button onclick="htmlText()">html</button>
<button onclick="window.alert(alertText())">alert</button>
You likely meant to do this
Note the user of recommended eventListeners instead of inline event handlers
window.addEventListener("load", function() { // on page load
function getText() {
return "Your name is: " +
document.getElementById("fname").value + " " +
document.getElementById("lname").value + ".";
}
document.getElementById("htmlButton").addEventListener("click", function() {
document.getElementById("fullName").innerHTML = getText();
});
document.getElementById("alertButton").addEventListener("click", function() {
alert(getText());
});
});
<form>
<label>Name :</label><input type="text" id="fname"> <br>
<label>Name2 :</label><input type="text" id="lname"> <br>
</form>
<button type="button" id="htmlButton">html</button>
<button type="button" id="alertButton">alert</button>
<sid id="fullName">
</div>
Please let me know why this doesn't work and how I can achieve this as simple as possible. my professor wants the simplicity to reflect 15 minutes or work. I just don't grasp it though. Thanks in advance!
<script language="JavaScript">
var obj = {
name = "",
address = "",
ccNumber = "",
}
function printObj() {
document.getElementById("display").innerHTML = obj.name + " " + obj.address + " " + obj.ccNumber;
}
function storeInput(user_input1, user_input2, user_input3) {
name = document.getElementById("myObject").form.user_input1;
address = document.getElementById("myObject").form.user_input2;
ccNumber = document.getElementById("myObject").form.user_input3;
}
</script>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
</form>
<form>
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
</form>
<form>
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="obj.storeInput(user_input1, user_input2, user_input3);obj.showInput()"><br />
<p id='display'></p>
Ok! You need your storeInput() to reference the declared object. Currently with your code as it is storeInput() is an independent function but for you event handler (onclick) to work. You need to redefine the storeInput() as
obj.storeInput() = function(user_input1, user_input2, user_input3) {.....};
This will get the job done. It will not store the values, but will display them.
<!DOCTYPE html>
<html>
<body>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="aFunction();"><br />
<p id='display'></p>
<script>
function aFunction(){
var x = document.querySelector('#user_input1').value; // gets value of user_input1 field
var y = document.querySelector('#user_input2').value; // gets value of user_input2 field
var z = document.querySelector('#user_input3').value; // gets value of user_input3 field
document.querySelector('#display').innerHTML = x + ' ' + y + ' ' + z; // puts the values in <p> with id of 'display'
}
</script>
</body>
</html>
Hope this helps you understand.
When I try adding the first contact and submit it, it shows in the div id=contact.
The function hide/show is working then.
But as soon as I add a second contact it's not working anymore.
Seems, jQuery doesn't enter display...
function css(){
$('.contacts').css('background-color', 'lightblue');
}
function visibility() {
$("#vis").click(function(){
$(".description").toggle();
return false;
});
};
$( document ).ready(function() {
$("form").submit(function (event) {
var fname = $('#fname').val();
var lname = $('#lname').val();
var desc = $('#desc').val();
$('.contacts').append( "<div id='contact'>"+fname+"<br>"+lname+"<br><button id='vis'>Show/Hide</button><div class='description' style='display:;'>"+desc+"</div></div>");
// alert(fname);
event.preventDefault();
css();
visibility();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
<fieldset>
<legend>Personal information:</legend>
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>
</fieldset>
<fieldset>
<legend>Description:</legend>
<textarea id="desc" value="desc"> </textarea><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<div class="contacts"> </div>
Any help would be appreciated, thanks.
As I wrote in comment - You can't have multiple elements with the same ID in html. You also don't have to add listeners for each button. You can add listener for body and selector as second parameter (see attached code).
function css(){
$('.contacts').css('background-color', 'lightblue');
}
$( document ).ready(function() {
//this way you don't need to add listener for each button
$('body').on('click', '.vis', function() {
$(this).closest('.contact').find('.description').toggle();
});
$("form").submit(function (event) {
var fname = $('#fname').val();
var lname = $('#lname').val();
var desc = $('#desc').val();
$('.contacts').append( "<div class='contact'>"+fname+"<br>"+lname+"<br><button class='vis'>Show/Hide</button><div class='description'>"+desc+"</div></div>");
event.preventDefault();
css();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
<fieldset>
<legend>Personal information:</legend>
First name: <input type="text" name="fname" id="fname"><br>
Last name: <input type="text" name="lname" id="lname"><br>
</fieldset>
<fieldset>
<legend>Description:</legend>
<textarea id="desc" value="desc"> </textarea><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<div class="contacts"> </div>
So basically, I have been trying to writing some jQuery that will add and duplicate a row of inputs on click, everything is working perfectly except for this.
Illustration of problem:
When you hit the remove button it leaves the 'Add Field' button beneath, I would like it to move back up into the row as shown above.
Html:
<form action="javascript:void(0);" method="POST" autocomplete="off">
<input type="submit" value="Submit">
<br>
<br>
<div class="bigjane">
<button class="add">Add Field</button><input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>
</div>
</form>
jQuery:
jQuery(document).ready(function () {
'use strict';
var input = 1,
button = ("<button class='add'>Add Field</button>");
$('.add').click(function () {
$(this).clone(true).appendTo('form');
$(this).remove();
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input1">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input2">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
$('form').on('click', '.remove', function () {
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).next('br').remove();
$(this).remove();
input = input - 1;
});
$('form').on('click', '.duplicate', function () {
$('.add').attr('id', 'add');
$('#add').removeClass().appendTo('form');
$(this).prev().prev().prev('input').clone().appendTo('form');
$(this).prev().prev('input').clone().appendTo('form');
$(this).prev('input').clone().appendTo('form');
$('form').append('<input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
});
JSFiddle Example
I have a feeling the answer for this is going to be somewhat simple, thanks in advance!
I simplified a bit, here's a suggestion, but I think the structure especially could be simplified even more.
<form action="javascript:void(0);" method="POST" autocomplete="off">
<input type="submit" value="Submit">
<br>
<br>
<div class="bigjane"><button id="add">Add Field</button>
<div class='input_line'>
<input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br></div>
</div>
</form>
jQuery(document).ready(function () {
'use strict';
var input = 1,
button = ("<button class='add'>Add Field</button>");
var blank_line = $('.input_line').clone();
$('#add').click(function () {
$('form').append(blank_line.clone())
$('.input_line').last().before($(this));
});
$('form').on('click', '.remove', function () {
$(this).parent().remove();
$('.input_line').last().before($('#add'));
input = input - 1;
});
$('form').on('click', '.duplicate', function () {
$('form').append($(this).parent().clone());
$('.input_line').last().before($('#add'));
input = input + 1;
});
});
added some css:
#add
{
float: left;
}
See jsfiddle:http://jsfiddle.net/tor9wvev/
EDIT:
to duplicate beneath correct line, modify
$('form').append($(this).parent().clone());
For:
$(this).parent().after($(this).parent().clone());
check this code i edit your code to solve the problem
jQuery(document).ready(function () {
'use strict';
var input = 1,
button = ("<button class='add'>Add Field</button>");
$('.model').on('click', '.add', function () {
$(this).clone(true).appendTo('form');
$(this).remove();
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input1">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input2">');
$('form').append('<input type="text" name="input_' + (input) + '"placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
$('form').on('click', '.remove', function () {
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).prev('input').remove();
$(this).next('br').remove();
$(this).prev().prev().prev().prev().prev().prev().prev().before('<button class="add">Add Field</button>')
$(this).prev().remove();
$(this).remove();
input = input - 1;
});
$('form').on('click', '.duplicate', function () {
$('.add').attr('id', 'add');
$('#add').removeClass().appendTo('form');
$(this).prev().prev().prev('input').clone().appendTo('form');
$(this).prev().prev('input').clone().appendTo('form');
$(this).prev('input').clone().appendTo('form');
$('form').append('<input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>');
input = input + 1;
});
});
</script>
<div class="model">
<form action="javascript:void(0);" method="POST" autocomplete="off">
<input type="submit" value="Submit">
<br>
<br>
<div class="bigjane">
<button class="add">Add Field</button><input type="text" name="input_0" placeholder="Input1"><input type="text" name="input_0" placeholder="Input2"><input type="text" name="input_0" placeholder="Input3"><input type="button" class="duplicate" value="duplicate"><input type="button" class="remove" value="remove"><br>
</div>
</form>
</div>
Probably not the neatest possible solution, but this works to move the button without changes to the rest of the code:
$('form').on('click', '.remove', function () {
/* ... */
$(this).closest('form')
.find('input[type="text"]:last')
.prev().prev().before($('.add'));
Updated fiddle:
http://jsfiddle.net/mah0nqz0/1/
I have created a form with a dynamically created field and i am trying to find a way to validate all the fields with javascript. I just want to alert the user that a field is null. Here is my code:
<script>
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form['field[]'];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
</script>
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>
I was expecting that will work but i was obviously wrong:(
With this code if i haven't pressed the "New field" button and press submit i will get the alert as expected. But on all other cases i am not getting anything!
Thanks for your time anyway, and sorry if i have made grammar mistakes!
<script type="text/javascript">
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form[i];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
</script>
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>
I don't understand this line: field=form['field[]'];, so I changed it to field=form[i];
http://jsfiddle.net/sZ4sd/