Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Is there any way to change the inner text of tag when the form is subbmitting?
For example, I have this HTML code:
<form>
<button>Submit</button>
</form>
When I click to the button or press Enter key, the submit text will change to processing or something like that. A class will be added to the button element..etc.
What element do you want to change? You can identify it a number of ways. The most common ways are by ID or class
$('form').submit(function(){
$('#element_id').text('what_you_want_to_write');
$('#element_id').attr('class', 'new_class_name');
return false;
});
Or, you can change the class name by doing
$('#element_id').addClass('new_class_name');
you can add a handler to the submit event of the form like
$('form').submit(function(){
$(this).find('button').text('Processing');
//form submission logic goes here if any
})
Change html:
<form>
<button id="submitButton" onclick="changeText()">Submit</button>
</form>
Javascript:
<script>
function changeText()
{
document.getElementById("submitButton").innerHTML="Processing...";
}
</script>
Try this
code
$(document).ready(function () {
$('#submit').click(function (e) {
$(this).val("Processing....");
$(this).addClass('processing');
$('#frm1').submit();
});
});
html
<form id="frm1">
<input type="button" value="submit" id="submit"/>
</form>
css
.processing
{
background:blue;
color:white;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a js file with the following code to fire a click event. But the event is not working. The console given just above for jQuery.fn gives the result.
In my HTML I have a form with input values and a submit button with class submit.
Can anyone help?
(function(jQuery) {
"use strict";
console.log(jQuery.fn)
jQuery(".submit").on('click',function(e){
console.log('test')
e.preventDefault();
});
})(window.jQuery);
<form name="login-form">
<input id="email" type="email">
<input id="password" type="password">
<input type="submit" class="submit" value="submit">
</form>
.submit is a css-selector.Make sure you have a class submit on you submit button.
Here is working snippet:
(function(jQuery) {
"use strict";
//console.log(jQuery.fn)
jQuery(".submit").on('click',function(e){
console.log('test')
e.preventDefault();
});
})(window.jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" class="submit" value="Send Request">
Take a look at this http://api.jquery.com/trigger/
$('body').click(function() {
$('#submit').trigger('click');
});
Hope so this will help you.
(function (jQuery) {
jQuery('body').on('click', '.submit', function (e) {
console.log('test')
e.preventDefault();
});
})(window.jQuery);
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Stuck on a tough situation!
I have a form for inputting different cities where user want to go.
I have a form box and a submit button.
Now I want my user to enter as many cities he likes, in order to do so he must click on a link Add 1 more city and one more form box should appear.
How can I perform such task in HTML
This is a nice way to do it:
<div id="inputBoxes">
<input />
</div>
<button type="button">Add more</button>
$('button').click(function() {
$('#inputBoxes').append('<input>');
});
Hope it will help,
Zorken17
$('button').click(function() {
$('#inputBoxes').append('<input>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="inputBoxes">
<input />
</div>
<button type="button">Add more</button>
Use jquery clone function.
$('select#options').clone().attr('id', 'newOptions').appendTo('.blah');
See this question
UPDATE
found good snippet for you. exactly what you need
put city box in a div and assign a id to that div and call a menthod of java script on the click of add 1 button then in method append other city box html in div through java script.
maybe thats a good starting point
<form id="myForm">
<div id="cities">
<input class="city" type="text" />
</div>
var $cityInputs;
function registerEvents() {
$cityInputs = $('input.city').not(':disabled');
$cityInputs.blur(function(event){
var $element = $(event.target);
if ($element.val().trim().length !== 0) {
appendNewInput.call($('#cities'));
$element.attr('disabled','disabled');
}
})
}
function appendNewInput() {
this.append('<input class="city" type="text">');
registerEvents();
}
registerEvents();
http://jsfiddle.net/9ckv5f23/3/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm just wondering if anyone can point me in the right direction on how to create a dynamic list on a webpage based on user entry without refreshing the page each time.
For instance, a user would:
type a word into a textbox
click a button
the word would show up somewhere else on the page
the word would be erased from the textbox
Any new word typed would automatically be written underneath any previously entered words.
<div id="target"><div>
<input type="text" id="newInput" />
<input type="button" id="saveInput" />
<script>
// when button is pressed:
$('#saveInput').on('click', function(){
// check if something is there
if( $('#newInput').val().length !==0){
$('#target').append('<div>'+ $('#newInput').val()+'</div>'); //append to a target
$('#newInput').val(''); // empty input
$('#newInput').focus() // for bonuspoint, place cursor back in input
}
});
</script>
If you want each new entry as first listitem, use prepend() instead of append()
Here's an working example:
Html:
<input type="text" id="txtWord"/>
<input type="button" id="btnAddWord" value="Add new word" />
<ul id="words">
</ul>
Script:
$(document).ready(function(){
$('#btnAddWord').bind('click', function(){
if( $('#txtWord').val() !== ""){
$('#words').append('<li>'+ $('#txtWord').val()+'</li>');
$('#txtWord').val('');
}
});
});
Example
http://jsfiddle.net/AfNgH/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a page where I display results form database and there are checkboxs which filter ther results. The problem is that I don't want to use submit button because I would like to let the user only click on the checkboxes to get the desired results. So is there anyway using javascript or jquery to submit a form when checkbox is checked with no submit button? if you see on shopping sites there are no submit buttons just the checkboxes..Like that. thanks
<form>
<input type="checkbox" name="size" > Size
</form>
here is the php
<?php if (isset($_POST["size"])){
//do something
?>
<form id="form" method="post" action="">
<input type="checkbox" name="checkbox" class="checkbox"/>
</form>
<script type="text/javascript">
$(function(){
$('.checkbox').on('change',function(){
$('#form').submit();
});
});
</script>
OR
<form id="form" method="post" action="">
<input type="checkbox" onchange="$('#form').submit();" name="checkbox" class="checkbox"/>
</form>
$(input:name=[checkboxname]).change(function(){
$('#form').submit();
});
alternately
$('#checkboxId').click(function(){
$('#formId').submit();
});
of course additional parameters can be passed withing the submit() function for ajax, etc.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
<form action="javascript:message();">
<input type="text" id="#msg" value='test'>
</form>
This is a simple form I made. Now when I call my JS function using this code it works (only one input can be accessed though):
function message() {
alert($('input').val());
}
But using this code doesn't work (alerts Undefined):
function message() {
alert($('#msg').val());
}
I have really no clue what to do and I have been looking for hours...
The value of the id attribute shouldn't start with a #:
<form action="javascript:message();">
<input type="text" id="msg" value='test'>
</form>
Here's the fiddle: http://jsfiddle.net/XrJjU/
If, for whatever reason, there is a # in the id, you'll have to escape it in your selector:
$('#\\#msg').val();
Here's the fiddle: http://jsfiddle.net/7P5ER/