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>
Related
I am trying to create a form validation using HTML and JQuery to check that all the input fields are not empty when a "Submit" button is clicked. If any of them are empty, the Submit button will not process the form, and will change the color of the empty input fields to Yellow and display a message at the bottom of the form (using innerHTML in a .
This are the relevant HTML codes:
<body>
<div id="div_main">
<form action="process.html" method="POST">
<div id="div_left">
<p>Name:</p>
<p>Age:</p>
<p>Gender:</p>
</div>
<div id="div_right">
<p><input type="text" id="name" name="name"></p>
<p><input type="text" id="age" name="age"></p>
<p><input type="text" id="gender" name="gender"></p>
</div>
<input type="submit" id="chksubmit" value="submit"/>
<div id="divmessage"></div>
</form>
</div>
</body>
And these are my relevant JQuery codes to perform the validation:
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$('#chksubmit').click(function(){
if($('#name').val()==''){
$('#name').css('background-color','yellow');
$('#divmessage').append("Please enter Name.")
success = false;
}
});
$('#chksubmit').click(function(){
if($('#age').val()==''){
$('#age').css('background-color','yellow');
$('#divmessage').append("<br>Please enter Age.")
success = false;
}
});
$('#chksubmit').click(function(){
if($('#gender').val()==''){
$('#gender').css('background-color','yellow');
$('#divmessage').append("<br>Please enter Gender.")
success = false;
}
});
});
</script>
When I click the Submit with empty input boxes, the form still goes through instead of stopping. I can't figure out why.
Check the below example
$(document).ready(function() {
$('#chksubmit').on("click", function(e) {
//clean divmessage
$('#divmessage').html("");
//or use $("#div_main form input") to check all inputs
$("#name, #age, #gender").each(function() {
$(this).css('background-color', '');;
if ($(this).val().replace(/\s+/g, " ").trim() == '') {
$(this).css('background-color', 'yellow');
success = false;
$('#divmessage').append("<br>Please enter " + $(this).data("for"))
}
});
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_main">
<form action="process.html" method="POST">
<div id="div_left">
<p>Name:</p>
<p>Age:</p>
<p>Gender:</p>
</div>
<div id="div_right">
<p><input type="text" data-for="Name" id="name" name="name"></p>
<p><input type="text" data-for="Age" id="age" name="age"></p>
<p><input type="text" data-for="Gender" id="gender" name="gender"></p>
</div>
<input type="submit" id="chksubmit" value="submit" />
<div id="divmessage"></div>
</form>
</div>
$(document).ready(function() {
$(document).on("click", ".remove", function() {
$(this).parent(".add1").remove()
});
$(document).on("click", ".add", function() {
var clone = '<div class="add1"><input type="text" name="selprice" /><input type = "submit" value = "+" class = "add" ><input type = "submit" value = "-" class = "remove" ></div>';
$("#container").append(clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
It works well!!But I want to duplicate that field just next to the button clicked.
ie., If I enter '1' in the field and clicked on the '+' button ,It shows up the next field and If I enter '3' and again if I click on the 1st button which has the value of 1,the button should visible next to it.
Change $("#container").append(clone) to $(this).closest('.add1').after(clone) or $(this).parent('.add1').after(clone) or $(this).parent().after(clone). Those should all work in this case.
.append() inserts the new element at the end of the selected container, whereas .after() inserts the new element directly after the selected element.
$(document).ready(function() {
$(document)
.on("click", ".remove", function() {
$(this).parent(".add1").remove()
})
.on("click", ".add", function() {
var clone = '<div class="add1"><input type="text" name="selprice" /><input type="submit" value="+" class="add"><input type="submit" value="-" class="remove"></div>';
$(this).closest('.add1').after(clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
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";
}
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
I have this form http://jsfiddle.net/thiswolf/XDsSt/ with four identical inputs and buttons.The problem is,each section is updates its own unique data in the database so when updating,its important the submit button i click updates the database with the input from that section only.
My function is
$(document).ready(function() {
$(".xx").live('click', function(){
alert('clicked');
});
});
How do i make sure the button click is unique to that section?.
Use an ID value instead for each input button. This way, jQuery can identify it like so:
$('#button_tag');
HTML:
<html>
<head></head>
<body>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn1" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn2" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn3" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn4" type="submit" class="xx" value="Submit">
</section>
</body>
</html>
Javascript:
$(document).ready(function () {
$(".xx").live('click', function () {
alert('clicked ' + $(this).attr('id'));
});
});
JsFiddle:
http://jsfiddle.net/XDsSt/7/
Get the corresponding section that button belongs to . Then access the elements inside that. You may use the jQuery closest()/parent()(if only one layer of hierarchy of controls) function for that.
$(document).ready(function() {
$(".xx").live('click', function(e){
e.preventDefault(); //if you want to prevent normal form submit
var item=$(this);
var sectionClicked=item.closest("section");
//Let's alert the first text box
alert(sectionClicked.find("input").first().val());
//do whatever with the items belongs the current section
});
});
Sample : http://jsfiddle.net/XDsSt/8/
I recommend you to switch to jQuery on instead of live as it is deprecated.
$(document).ready(function() {
$(".xx").live('click', function() {
$('section').has(this).find(':input:text').each(function() {
alert( this.value ) ;
});
});
});
Demo
If possible then instead of .live(), use .on() with jQUery 1.7+, because live() is deprecated.
$(document).ready(function() {
$("body").on('click', '.xx', function() {
$('section').has(this).find(':input:text').each(function() {
alert( this.value ) ;
});
});
});
Demo
if id is not an option - I don't understand that , but you can put multiple classes in buttons
<input type="button" class="xx btn1" ... >
$(document).ready(function() {
$(".xx").live('click', function(){ // look into on instead on live
if $(this).hasclass('btn1');{
alert('clicked');
}
});
});