Thnaks in advance. I am new in web developing and stuck in one problem. I am creating a form in which I want variable number of input fields. So I have tried to create dynamic input fields creation by taking help of some online sources. I have tried everything I could imagine but the code is not working.
So far I have written this code : index.html
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>Dynamic Add Input Fields</header>
<form name="form1" id="form1">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
<td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
</tr>
</table>
<input type="button" name="submit" id="submit" value="Submit"/>
</form>
<script type="text/javascript" >
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="row'+i+'" class="btn_remove" Value="X" /></td></tr>');
});
$('.btn_remove').on('click','.btn_remove',function () {
var button_id = $(this).attr("id");
$("#row"+button_id+"").remove();
});
});
</script>
</body>
</html>
Now when I run this code then the output comes :
Dynamic Add Input Fields
[ Input Fields ] [Add Button]
[Submit Button]
So it soould work like when I click "Add" button then it should add one more input field and a "remove" button beside it.
But if I click the "Add" button, nothing happens, just URL changes.
You need add event handler for each new item
$('#dates').append(
$('<div class="'+classname+'">'+dd+'<br /><span class="month_selector">'+dm+'</span></div>')
.click(function(){
// handle click
})
);
jQuery: adding event handler to just created element
Related
I would like to show the second text field incl. copy button as soon as i submit the the first text field. how i can hide the second text field and show after submit?
I tried as following:
HTML:
First Texfield:
<tr><td><input type="text" id="source">
<button type="submit" id="submit" id="formButton">Submit</button></td></tr>
Second Textfield:
<tr><td><input type="text" size="62" id="target" id="form1">
<button onClick="myFunct()" id="form1">Copy</button></td></tr>
JQuery:
<script>
$("#formButton").click(function(){
$("#form1").toggle();
});
</script>
Thank you so much for your support.
If you intend to submit data to a server normally you should have your inputs and buttons wrapped in a <form> tag, so I added one and set it up so that it sends to a live test server. There's also an iframe added as well to display the server's response. The jQuery is simple:
$('#main').on('submit', function() {...
When form#main "hears" a submit event (i.e. when the button[type=submit] is clicked...
$('.row2').removeClass('hide');
...Remove the class .hide form tr.row2 which removes the style display:none
BTW, ids must be unique. #form1 is duplicated and there's 2 ids on one button in OP code.
Demo
$("#main").on('submit', function() {
$(".row2").removeClass('hide');
});
.hide {
display: none
}
<form id='main' action='https://httpbin.org/post' method='post' target='view'>
<table>
<tr>
<td><input type="text" id="source" name='source'>
<button type="submit">Submit</button></td>
</tr>
<tr class='row2 hide'>
<td><input type="text" size="62" id="target" name='target'>
<button type='button'>Copy</button></td>
</tr>
</table>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The first problem is that you have duplicate IDs on the button (both submit and formButton). An element can only have one ID. I've gone with the latter in my example.
Second, you have duplicate form1 IDs, which is also invalid markup. Simply make use of classes instead.
Then it's just a matter of hiding these elements by default, and showing them on click of the button. I'd recommend .show() for this instead of .toggle().
This can be seen in the following:
$("#formButton").click(function() {
$(".form1").show();
});
.form1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="text" id="source">
<button type="submit" id="formButton">Submit</button>
</td>
</tr>
<tr>
<td>
<input type="text" size="62" id="target" class="form1">
<button onClick="myFunct()" class="form1">Copy</button>
</td>
</tr>
If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE
I have create a form, and I want to insert image when I click on the button "tester".
This is my code :
<table id="table">
<tr>
<td id="col1">
<form>
<p><label for="text"> your text</label>:<input type="text" id="text"></input></p>
<input type="submit" value="tester" onclick="addImage()" />
</form>
</td>
<td id = "img"></td>
</tr>
</table>
<script>
function addImage(){
document.getElementById("img").innerHTML = "<img src='newWatermark.png'/>"
}
</script>
<style>
#table{width:100%}
#col1{width:50%}
</style>
It's work but just half a time ... And just during a few second ...
I don't understand why
Moreover I think that when I click on the button I refresh the page.
In the URL I have : /watermark.html at the beginning and /watermark.html?your+text= when I click on the button.
But I just want to add an image on the same page. How can I do this?
You submitting Your form.
Change type of input from submit to button.
To avoid page refresh use input type button not submit
function addImage(){
document.getElementById("img").innerHTML = "<img src='newWatermark.png'/>"; //This will overwrite previous image
}
function appendImage(){
document.getElementById("img").innerHTML += "<img src='newWatermark.png'/>"; //This will append image
}
#table{width:100%}
#col1{width:50%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tr>
<td id="col1">
<form>
<p><label for="text"> your text</label>:<input type="text" id="text"></input></p>
<input type="button" value="tester" onclick="addImage()" />
<input type="button" value="Append" onclick="appendImage()" />
</form>
</td>
<td id = "img"></td>
</tr>
</table>
Im developing chrome extension. I want to change input value(username) to some text when user click button. But my solution not working. Need advise.
My code is shown below:
<!DOCTYPE html>
<html>
<head>
<META http-equiv=content-type content=text/html;charset=utf8>
<META http-equiv=content-type content=text/html;charset=windows-1254>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<script>
$('#target').submit(function() {
alert('something');
return false;
$('#UserName').value('test');
});
</script>
</head>
<body>
<form id="target">
<table>
<tr>
<td>UserName:</td>
<td>
<input type="text" id="UserName" size="20" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" id="Password" />
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Login" id="Login" /></td>
</tr>
</table>
</form>
</body>
</html>
Change your submit button from type button to submit from:
<input type="button" value="Giriş" id="Login" />
to:
<input type="submit" value="Giriş" id="Login" />
Also change your JS code from:
$('#target').submit(function() {
alert('uyarı');
return false;
$('#UserName').value('deneme');
to:
$('#target').submit(function() {
alert('uyarı');
$('#UserName').val('deneme');
return false;
Your submit button needs to be of type 'submit'.
So this:
<input type="button" value="Login" id="Login" />
should be:
<input type="submit" value="Login" id="Login" />
Also, the appropriate jQuery function for getting/setting input values is .val().
Lastly, you don't want to return false until the end of the function.
$('#target').submit(function() {
alert('something');
$('#UserName').val('test');
return false;
});
See this working Fiddle.
This is working fine
$('input#Login').click(function() {
$('#UserName').val('test');
return false;
});
jQuery uses the VAL rather than VALUE
in other words
<script>
$('#target').submit(function() {
alert('something');
return false;
$('#UserName').val('test');
});
</script>
and also the FORM is not submitado change the type of input and submit to the adciona FORM METHOD = "POST"
Guys thank you very much. I found. The problem is when you are developing google chrome application you must seperate javascript code from html. Otherwise javascript not work.
I have a form where a user inputs a word, when pressing the button I want it to translate the word (using the jquery script) into the same field.
Only after completed to populate the field, it should continue and submit the translated word.
everything is working except that it will submit as soon as it translating causing the original word to be submitted instead of the translated one.
the original page shows that the word had been translated.
please help on how to make it submit only after the word have been translated in the text field. ?
should I use a delay ? if so how ?
or is there an oncomplete, "onpopulate" or something like that ?
here is the script:
<script type="text/javascript">
$(function transle() {
$('#transbox').sundayMorningReset();
$('#transbox input[type=submit]').click(function(evt) {
$.sundayMorning(
$('#transbox input[type=text]').val(),
{ source:'', destination:'ZH', menuLeft:evt.pageX, menuTop:evt.pageY},
function(response) {
$('#transbox input[type=text]').val(response.translation);
}
);
});
});
</script>
and the form:
<table id="transbox" width="30px" border="0" cellspacing="0" cellpadding="0">
<form action="custom-page" method="get" name="form1" target="_blank" id="form1" >
<tr>
<td><input id="q" name="q" type="text" class="search_input" value="Evening dress" /></td>
<td><input type="submit" /></td>
</tr>
</form>
</table>
there are another JS called for the script but I don't sure its needed for the question.
thank you.
you can use type="button" instead of type="submit" and after filling call submit event of your form
function(response) {
$('#transbox input[type=text]').val(response.translation);
document.forms.form1.submit();
}
<input type="button" />