I present you my curious problem.
I'm coding a function that permits users to add more email with input field.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<form method="post" action="../admin/A_Office/publish_newsletter">
<div id="list" class="input_more_target">
<label for="email">Email</label>
<div class="form-group">
<input class="form-control" name="email[]" type="email" value="">
</div>
<input type="button" value="Add more" class="add_field_button btn btn-primary">
</div>
<input type="submit" value="Publish" class="btn btn-primary">
</form>
This script adds/removes new input fields:
<script type="text/javascript">
$(document).ready(function() {
var wrapper = $(".input_more_target");
var add_button = $(".add_field_button");
$(add_button).click(function(){
$(wrapper).append('<label for="email">Email</label><div class="form-group"><input class="form-control" name="email[]" required type="email" value=""></div><input type="button" class="remove_field btn btn-primary" value="Remove">')
});
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
My problem is :
When I click on add button, fields are added. But when I submit form,
I just get the value from the first input email and not from the
added inputs. (I just get => Array ( [0] => test#test.fr ) )
When I add directly the second input field under the first (without JS), I get data from both.
If you can enlight me about this, it would be great ! Thanks !
Okay, I find it ;
The form was opened in an outer div so i didnt receive any data
Related
I have a login button that works fine,it logs a user in etc.. but i want to allow the user to press the enter key to login as well. how do i do this.I tried a test using onkeypress but it didnt do anything as bellow
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username id="username" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction() /> //i just tried this myFunction() to see if it would give an alert but it doesnt
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>
</div>
</div>
</form>
function myFunction()
{ alert("button pressed")}
so how do i use the enter key to submit my request in javascript and jquery
As you've placed the input within a form element which contains a submit button, you get this behaviour by default. To hook to it, use the submit event of the form, like this:
$('form').on('submit', function(e) {
e.preventDefault(); // only used to stop the form submission in this example
console.log('form submitted');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" id=" username" />
</div>
<div class="form-group ">
<input type="password" class="form-control" placeholder="........" id="password" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>
</div>
</form>
Note that I fixed the missing " after the placeholder attribute in the first input. You also don't need the trailing space after all the attribute values, so I removed those too.
First you need to send the Event to the myFunction() function and add ID to your form to add submit manually::
HTML
<form id='myForm'>
<!-- form actions (etc..) -->
<input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction(e) />
<!-- form actions (etc..) -->
</form>
Now in ASCII the reenter code is 13 all you need to check is when the pressed key is reenter (13) then you need to take the event key code and call the submit function::
function myFunction(e)
var code = (e.keyCode ? e.keyCode : e.which);
{
if (code == "13")
{
//Calling the submit or clicking manually it
$( "#myForm" ).submit();
}
}
Before anyone marks this as a duplicate, I have looked at many sites and am currently using this one - jQuery - passing value from one input to another for guidance, yet no result... I am trying to pass a value from one input in one form to another input in a 'table'. I have put it in a table because of a very weird reason - it does not display a Sparql value when in a form only displays in a table so the input was placed in a table. My code is below:
Form
<form onclick="txtFullName.value = txtFirstName.value +'_'+ txtLastName.value">
First name : <input type="text" name="txtFirstName" value="#ViewBag.FirstName"/> <br><br>
Last name : <input type="text" name="txtLastName" value="#ViewBag.LastName" /> <br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="submit12" type="button" value="Submit">
</form>
Table
<table id="results">
<Full name:
<br>
<input id="userInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="#ViewBag.DisplayName">
<br>
<input id="submit" type="submit" value="Submit">
</table>
JQUERY
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').change(function () {
$('txtFullName').val($(this).val());
});
});
I am trying to display the txtFullName into userInput input when pressing submit but right now only the `txtFullName' is displayed when pressing submit. Also the submit is the submit button in the FORM.
Anymore info needed let me know:)
You need to change the onclick to action on the form if you are trying to use submit button. The other way is to use input type button instead of submit:
So:
$(document).ready(function() {
$('#submit12').on('click', function (e) {
console.log('test');
$("#txtFullName").val($("#txtFirstName").val() + '_' + $("#txtLastName").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
First name : <input type="text" id="txtFirstName" value="First"/> <br><br>
Last name : <input type="text" id="txtLastName" value="Last" /> <br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="submit12" type="button" value="Submit">
</form>
If you want to display txtFullName into userInput, simply do something like this:
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').val($('#txtFullName').val());
});
And why do you need change function there , if yo need changes when click submit.
Edit your JQuery like this:
$('#submit12').on('click', function (e) { //Form submit
$('#userInput').change(function () {
$('#txtFullName').val($(this).val());
});
});
$('#submit').on('click', function () { //Form submit
$('#userInput').val($('#txtFullName').val());
});
I don't clearly understand why you do it but It can fix your code.
It is not entirely clear what the two buttons do, but the operation itself is really very simple. See comments inline for explanations:
// Wait until the DOM is loaded and all elements are avaialble
window.addEventListener("DOMContentLoaded", function(){
// Get references to the DOM elements you'll need
var theForm = document.getElementById("frmTest");
var txtFirstName = document.getElementById("txtFirstName");
var txtLasttName = document.getElementById("txtLastName");
var txtFulltName = document.getElementById("txtFullName");
var txtUserInput = document.getElementById("txtUserInput");
var btn1 = document.getElementById("btnSubmit1");
var btn2 = document.getElementById("btnSubmit2");
// Function to join names together
function combine(){
txtFullName.value = txtFirstName.value + '_' + txtLastName.value;
}
// Set event handlers
frmTest.addEventListener("click", combine);
btn1.addEventListener("click", combine);
});
<!-- Keep you JavaScript out of your HTML -->
<form id="frmTest">
First name : <input type="text" id="txtFirstName" name="txtFirstName" value="#ViewBag.FirstName">
<br><br>
Last name : <input type="text" id="txtLastName" name="txtLastName" value="#ViewBag.LastName" >
<br><br>
Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
<input id="btnSubmit1" type="button" value="Combine Names">
<table id="results">
<Full name:
<br>
<input id="txtUserInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="#ViewBag.DisplayName">
<br>
<input id="btnSubmit2" type="submit" value="Submit">
</table>
</form>
How can I know which form I clicked? Is it possible with a button class instead of buttons with id?
$(document).ready(function () {
$(".form-buttons").click(function () {
//I only want the form which corresponds to the button I clicked
var formDates = $(form).serialize()
alert ("You clicked "+formDates)
})
})
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
Yes use class instead of id for similar elements. Please try this.
Note: form-button is the class name in your HTML and not form-buttons
$(document).ready(function () {
$(".form-button").click(function () {
var formDates = $(this).closest('form').serialize();
alert ("You clicked "+formDates)
})
})
I think you be looking for
$('.form-button').on('click', function () {
alert($(this).parents('form').attr('id')); // Check the ID of the form clicked
});
something Maybe Like mentioned above.
You can get the name of the element by using the this keyword which refer, in a DOM event, to the cibled element :
$(document).ready(function () {
$(".form-buttons").click(function () {
alert('You clicked the form' + this.parentElement.getAttribute('id'));
})
})
You can do this in a few different ways. You can traverse up the DOM and see which form is used or -and this is my favorite- you can submit the form!
Solution 1: Traversing up the DOM
<script>
$(document).ready(function () {
$(".form-button").click(function () {
var clicked_form = $(this).parent();
var formDates = clicked_form.serialize();
alert ("You clicked "+formDates);
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
</body>
Solution 2: Submit the form
You already are using the form, so why not submit it? Change the buttons to input elements with type submit and intercept the submit event, like this. This is how I think it should be done. It is also better for user experience because the user can just submit the form by pressing enter.
<script>
$(document).ready(function () {
$("form").on('submit', function (e) {
e.preventDefault();
var formDates = $(this).serialize()
alert ("You clicked "+formDates)
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
</body>
Check this fiddle on how I would do it.
https://jsfiddle.net/xtfeugav/
Simple use
$("form").submit(function(e) {
to listen for every submit on all the forms you have. To get the ID of the form you use
var formid = $(this).attr('id');
I used e.preventDefault(); to prevent the form don't update the page.
Remember to use <input type="submit" value="Submit"> on your forms to make this work.
Its a simple code, hope it helps.
I want to have form fields, when populated and a button clicked will change the contents of span's within html. I have tried the following but the span contents aren't being replaced.
I have written the following html:
<form role="form">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="nameValue" />
</div>
<button id="generate" type="submit" class="btn btn-default">
Generate Story
</button>
</form>
<p>The persons name is <span id="name"></span></p>
Then have written the following jQuery:
<script>
$(function() {
$("button").click( function()
{
$("#nameValue").keyup(function() {
var val = $(this).val();
$("#name").html(val);
});
}
);
});
</script>
Try separating keyup, click event handlers , setting button disabled to true if no value at "#nameValue" , setting button disabled to false at keyup event
$(function() {
var button = $("button"),
val = "";
$("#nameValue").keyup(function() {
val = $(this).val();
if (val.length > 0 && /\w+/.test(val)) button.prop("disabled", false)
});
button.click(function(e) {
e.preventDefault();
$("#name").html(val);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form role="form">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="nameValue" />
</div>
<button id="generate" type="submit" class="btn btn-default" disabled="true">
Generate Story
</button>
</form>
<p>The persons name is <span id="name"></span>
</p>
This will change span value after button click and on keyup
<script>
$(function() {
$("button").click( function(){
changeSpanValue($("#nameValue").val());
});
$("#nameValue").keyup(function() {
changeSpanValue($(this).val());
});
});
function changeSpanValue(val){
$("#name").html(val);
}
</script>
How do i change my submit button text after submit?? i have a form with a button . i would like to change the button text from click to Next after submit the form.
<form>
<div class="form-group">
<div class="rightbox"> <label for='phone'>phone</label></div>
<div class="leftbox">
<div class="col-sm-12">
<input class="text-box single-line" data-val="true" name="phone" type="tel" value="" />
</div></div>
</div>
<div class="form-group">
<div class="rightbox"> <label for='phone'>mobile</label></div>
<div class="leftbox">
<div class="col-sm-12">
<input class="text-box single-line" data-val="true" name="phone" type="tel" value="" required />
</div></div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="btnok">
<br/>
<button type="submit" class="btn-primary" >
click
</button>
</div>
</div>
</div>
</form>
$("#save").on('click',function(){
var $btnElm = $(this);
$("form").submit(function() {
return $btnElm.text('Next');
});
})
<button type="submit" class="btn-primary" id="save" >
i think this is how you can change.
else you want to more specific with the only after form is submitted then you can go with the ajax method to submit the form and change the text the of button to next after only submitting the form
$("#save").on('click',function(){
var $btnElm = $(this);
$("form").submit(function() {
$.ajax({
url: $(this).attr('action'),
method: "POST",
data : $(this).serialize(),
success : function (data){
$btnElm.text('Next');
}
});
});
});
You can try with the below link.
fiddle link
$(document).ready(function(e) {
$('#theForm').submit(function() {
var txt = $('#btnSubmit');
txt.val("Next");
return confirm("Do you want to save the information?");
});
});
Updated link: Fiddle
Try with this.
First off all, add id to your form and button.
<form id="myform">
....
<button id="mybutton" type="submit" class="btn-primary" >
click
</button>
...
</form>
Then, using JQuery you can do a Jquery Callback after form submit.
$("#myform").bind('ajax:complete', function() {
document.getElementById("mybutton").value="New Button Text";
});
It works for me. I Hope it helps.
Edit
If you dont want to use JQuery you can use onSubmit event to call a function after form submit.
<form onsubmit="changeButton()">
....
<button id="mybutton" type="submit" class="btn-primary" >
click
</button>
...
</form>
This is the function to change button text.
function changeButton(){
document.getElementById("mybutton").value="New Button Text";
}