I want to add a form including an input text using javascript.
the adding works fine, but if i click the submit button nothing happens.
Here is the code:
if (document.getElementById("run_name_query_box") == null) {
var run_name_search = '<fieldset id="run_name_query_box">' +
'<table> <td><tr>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<form method="post" action=query name="query_runname_name">' +
'<input style="font-size:14px" value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' +
'</form>' +
'</tr></td></table>' +
'</fieldset>';
$("#query_type_box").append(run_name_search);
}
the run_name_querycreator() function sets the value of the input.
I already use almost the same thing somewhere else and there it works:
'<form method="post" action=query name="query">' +
'<input style="font-size:14px" value = "Search Database" onclick = "combine_query()" id="search" type="submit" name="search" >' +
'</form>'
If i copy the plain html part just into the main html body it works too.
This is all part of mako file used in a pyramid interface.
I think your HTML is malformed. I don't think a form element can be a child of a table element.
Your code should be like this,
var run_name_search = '<fieldset id="run_name_query_box">' +
'<form method="post" action=query name="query_runname_name">' +
'<table>'+
'<tr><td>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<input style="font-size:14px" value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ';
$("#query_type_box").append(run_name_search);
This is your code generated HTML,
<fieldset id="run_name_query_box">
<p style="font-size:16px">Runname:</p>
<input style="font-size:16px" id="run_name" type="text">
<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit">
<table>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<form method="post" action="query" name="query_runname_name"></form>
</tr>
</tbody>
</table>
</fieldset>
There is no form elements in within your <form>. (Including your form submit button). Then How it will work?
Your code should generate HTML like this to work,
<fieldset id="run_name_query_box">
<form method="post" action="query" name="query_runname_name">
<table>
<tbody>
<tr>
<td>
<p style="font-size:16px">Runname:</p>
<input style="font-size:16px" id="run_name" type="text">
<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit">
</td>
</tr>
</tbody>
</table>
</form>
</fieldset>
See this FIDDLE
In this fiddle You can see BEFORE FIX section dynamic elements generated by you.
In AFTER FIX section you can see the correct html format.
FYI, When you are working with Dynamic html, Check you dynamically created html in developers tool.
Working example: http://jsfiddle.net/awesome/6hh8r/
Description: Added missing onclick function run_name_querycreator() in global namespace and connected it to .post() with apparent form data.
window.run_name_querycreator = function () {
//alert($('#run_name').val());
var x = '{"run_name":"' + $('#run_name') + '"}'
$.ajax({
type: "POST",
url: $form.attr('action'),
data: x,
success: alert('success'),
dataType: 'json'
});
}
$(function () {
if (document.getElementById("run_name_query_box") === null) {
var run_name_search = '<fieldset id="run_name_query_box">' +
'<table> <td><tr>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<form method="post" action=query name="query_runname_name">' +
'<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' +
'</form>' +
'</tr></td></table>' +
'</fieldset>';
$("#query_type_box").append(run_name_search);
$form = $('[name="query_runname_name"]');
$form.submit(function (e) {
e.preventDefault();
});
}
});
Related
I am trying to append a table row which has a form and input type submit. Typically, this is what my loop looks like:
#foreach (var item in Model)
{
using (Html.BeginForm("Edit", "User"))
{
<tr>
<input type="hidden" name="Id" value="#item.Id" />
<td>
#Html.DisplayFor(modelItem => item.Email)
#Html.HiddenFor(modelItem => item.Email, new { name = "Email" })
</td>
Edit
<button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
</td>
</tr>
}
}
Now on my AJAX call, I need to add additional user here on this table row, here's how I usually do it:
$.ajax({
type: "POST",
url: 'URL',
dataType: 'json'
}).done(function (data) {
if (data.status == 'True') {
var usrObj = data.uobj;
$(function () {
var table = $('#tblUsers tbody');
for (var i = 0; i < usrObj.length; i++) {
$('#tblUsers').find('tbody')
.append('<tr><form action="/User/Edit" method="post">' +
'<input type="hidden" name="Id" value=' + usrObj[i].Id + '>' +
'<td>' + usrObj[i].Email + '</td>' +
"<td></i>Edit" +
`<button type='submit' name='btnDisable' id = 'btnDisable' onclick="return confirm('Disable this?')";>Disable</button></td>` +
'</form></tr>');
}
}
});
Now what is happening is that, the appended link is working fine since everything the link that is needed to function is already set on it's attributes:
</i>Edit
This is I am having a hard time submitting the form:
<button type='submit' name='btnDisable' id = 'btnDisable' onclick="return confirm('Disable this?')";>Disable</button>
I tried adding the following code below but still, nothing is happening, the confirm dialog box is popping up, but upon clicking Ok button, nothing is happening. The form is not submitting. But the other rows are working fine after the append.
Here's what I tried, but all of these are not working fine.
$(function () {
$(document).on('submit', 'form', function (event) {
$(this).submit();
});
});
I guess the way I appended my table row is the problem but I am not clearly sure.
Problem in your current jquery code was that when you were appending new rows inside table it was going outside tr tag that's the reason form submit was not working . Instead you can put form tag inside td tag and the input field as well which you need to pass to backend so that form gets trigger using button inside it .
Demo Code :
//this is for demo :)
var usrObj = [{
"Email": "cdcdc",
"Id": 11
}, {
"Email": "cdcdc2",
"Id": 12
}]
for (var i = 0; i < usrObj.length; i++) {
$('#tblUsers').find('tbody').append('<tr><td>' + usrObj[i].Email + '</td>' + "<td><form action='/User/Edit' method='post'></i>Edit" + `<button type='submit' name='btnDisable' onclick="return confirm('Disable this?')";>Disable</button>` + '<input type="hidden" name="Id" value=' + usrObj[i].Id + '/></form>' + "</td></tr>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblUsers">
<tbody>
<form>
<tr>
<input type="hidden" name="Id" value="1" />
<td>
frg
</td>
<td>
Edit
<button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
</td>
</tr>
</form>
<form>
<tr>
<input type="hidden" name="Id" value="2" />
<td>
ckwlkev
</td>
<td>
Edit
<button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
</td>
</tr>
</form>
</tbody>
</table>
Please update your ajax code with
for (var i = 0; i < usrObj.length; i++) {
$('#tblUsers').find('tbody').append('<tr><form action="/User/Edit" method="post">' +
'<input type="hidden" name="Id" value=' + usrObj[i].Id + '>' +
'<td>' + usrObj[i].Email + '</td>' +
'<td></i>Edit' +
'<button type="submit" name="btnDisable" id = "btnDisable" onclick="return confirm(\'Disable this?\')";>Disable</button></td>' +
'</form></tr>');
}
Also, $(document).on has much lower performance than $('form.remember').on('submit'). It now has to listen for all submit events in the document. It's much better to restrict the scope a little than listen on document, if possible
I am very new in jsp, and jquery
my code create dynamic text boxes and one drop-down menu based on button clicked,
after created textboxes I want to add one more textbox if the user select option male after the text boxes dynamically added.
the add code works, but the text box when selecting the male option not works.
please please help.
this is my code
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<br />
<div class="container">
<h3 align="center">Change Control Board (CCB)</h3>
<br />
<h4 align="center">Enter Change Details</h4>
<br />
<form name="form1" method="GET" action="jsv" id="form1">
<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Enter Change Name</th>
<th>Enter Change Description</th>
<th>Enter Change GW</th>
<th>Enter Change AW</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Insert" />
</div>
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$(document).on('click', '.add', function() {
var html = '';
html += '<tr> name="change_name1[]"';
html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html += '<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business" type="text" name="change_G[]" class="form-control change_GW" /></td>';
html += '<td><select id="purpose" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
});
});
$(document).ready(function() {
$('#purpose').on('change', function() {
if (this.value == '1') {
$("#business").show();
} else {
$("#business").hide();
}
});
});
</script>
First of all you have an error on the first line where you are concatenating the tr in the $html, it is '<tr> name="change_name1[]"'; where as it should be '<tr name="change_name1[]">'; but since the name attribute is not a valid attribute for tr you should change it to a unique id.
I hope the select menu and the input boxes that are generated by the click of a button are not multiple as there is an id attribute on the select input which needs to be unique in case there are multiple select boxes, but since it is not mentioned you make a slight change to your event binding like the code below
You must change the id attributes from static to dynamic something like appending a count along with their ids i have added it for you hope it solves your problem.
your final script will look like this
$(document).ready(function () {
var count = 0;
$(document).on('click', '.add', function () {
var html = '';
html += '<tr>';
html +='<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html +='<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html +='<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business_' + count +
'" type="text" name="change_G[]" class="form-control change_GW" /></td>';
html += '<td><select id="purpose_' + count +
'" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';
html +=
'<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
$('#purpose_' + count).on('change', function () {
if (this.value == '1') {
$("#business_"+count).show();
} else {
$("#business_"+count).hide();
}
});
count++;
});
$(document).on('click', '.remove', function () {
$(this).closest('tr').remove();
});
});
Cut this code:
$('#purpose').on('change', function() {
if ( this.value == '1')
{
$("#business").show();
}
else
{
$("#business").hide();
}
}
and paste it right behind $('#item_table').append(html);
Two $(document).ready() sections make no sense. And the event handler (on click) needs to be attached after you create the select box.
You are adding select dynamically at run time.so, after adding Select You need to bind it's change event.
So Just make change into your javascript code
<script>
$(document).ready(function(){
counter=0;
$(document).on('click', '.add', function(){
counter=counter+1;
var html = '';
html += '<tr> name="change_name1[]"';
html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
html += '<td><input type="text" name="change_GW[]" class="form-control change_GW" /></td>';
html += '<td><input style="display:none;" id="business_'+counter+'" type="text" name="change_G[]" class="form-control change_GW" /></td>';
html += '<td><select id="purpose_'+counter+'" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
$('#purpose_'+counter).on('change', function() {
if ( this.value == '1')
{
$("#business_"+counter).show();
}
else
{
$("#business_"+counter).hide();
}
});
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
});
</script>
I am working on a project where my job is to create a basic web data entry form. I have all the syntax functioning exactly as it should, except now I have the need to have a hyperlink on the page and when clicked add a label and text box.
My questions:
Should be simple enough with some JavaScript, however for whatever reason my syntax does not add anything?
What do I need to do in order for when the Add Additional Child link is clicked it will add a new text box and label?
My index.php:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
$("#newChild").on('click', function() {
$('#ChildInfo').after(
'<div id="ChildInfo">' +
'<td><label for="lblChildName">Child Name: </label></td>' +
'<td class="style1"><input type="text" name="txtChildName" maxlength="100" size="30"></td>' +
' remove Child' +
'</div>'
);
});
$(document).on('click', '#rmChild', function() {
$(this).closest('#ChildInfo').remove();
});
</script>
</head>
<body>
<div id="BasicInfo">
<table>
<tr>
<td><label for="lblParent">Parent Name:</label></td>
<td class="style1"><input type="text" name="txtparentname" maxlength="500" size="30"></td>
</tr>
<tr>
<td><label for="lblPhone">Contact Number:</label></td>
<td class="style1"><input type="text" name="txtphone" maxlength="500" size="30"></td>
</tr>
</table>
</div>
<div id="ChildInfo">
<label for="lblChildName">Child Name:</label>
<input type="text" name="txtChildName" maxlength="100" size="30">
<br><br><br>
Add Additional Child
</div>
</body>
</html>
Update 2:
Change your event handler assignment ot be dynamic, like you are doing for removing:
https://jsfiddle.net/5n6du1qt/2/
$(document).on('click', '#newChild', function() {
$('#ChildInfo').after(
'<div id="ChildInfo">' +
'<td><label for="lblChildName">Child Name: </label></td>' +
'<td class="style1"><input type="text" name="txtChildName" maxlength="100" size="30"></td>' +
' remove Child' +
'</div>'
);
});
$(document).on('click', '#rmChild', function() {
$(this).closest('#ChildInfo').remove();
});
-------------- other ways ---------------------
This is because you need to move your script to be called after load event, once the dom is ready.
Please see the working fiddle here: https://jsfiddle.net/5n6du1qt/
You can try changing the script to this:
//<![CDATA[
window.onload=function(){
$("#newChild").on('click', function() {
$('#ChildInfo').after(
'<div id="ChildInfo">' +
'<td><label for="lblChildName">Child Name: </label></td>' +
'<td class="style1"><input type="text" name="txtChildName" maxlength="100" size="30"></td>' +
' remove Child' +
'</div>'
);
});
$(document).on('click', '#rmChild', function() {
$(this).closest('#ChildInfo').remove();
});
}//]]>
Update:
Here is one other variation for the script : https://jsfiddle.net/5n6du1qt/1/
$(function(){
$("#newChild").on('click', function() {
$('#ChildInfo').after(
'<div id="ChildInfo">' +
'<td><label for="lblChildName">Child Name: </label></td>' +
'<td class="style1"><input type="text" name="txtChildName" maxlength="100" size="30"></td>' +
' remove Child' +
'</div>'
);
});
$(document).on('click', '#rmChild', function() {
$(this).closest('#ChildInfo').remove();
});
})
So far I am able to display the data in an HTML page. However I am stuck when it comes to searching against the Description field and also filtering this data according to Location radio buttons selected.
HTML:
<form>
<input id="searchterm" type="search" name="query" placeholder="Search">
<input type="radio" name="location" value="houston">
<label for="houston">Houston</label>
<input type="radio" name="location" value="austin">
<label for="austin">Austin</label>
<input type="button" name="searchbutton" value="search" onclick=search();>
</form>
JSON data:
[
{
Description: A bunch of text from which I need to search against
Location: This will be selected by a radio button
}
]
Here is what I have tried:
JS CODE:
function search() {
var $searchField = $('#searchterm');
var query = $searchField.val();
$.getJSON("API LINK HERE", function(data) {
var output="<ul>";
$.each( data, function (i, item) {
output+="<li class='results'><div class='title'><div class='mainCat'>" + data[i].MainCategoryName + "</div>";
output+="<div class='AdID'>" + data[i].AdID + "</div></div>";
if(data[i].PhotoUrl !== null){
output+="<img class='image' src=" + " ' " + data[i].PhotoUrl + " ' " + "></img>";
}
output+="<div class='description'>" + data[i].Description + "</div>";
output+="<button type='submit' class='goToAd' formaction=" + data[i].AdUrl + ">Go To Ad </button> </li>" ;
});
output+="</ul>";
$("#content").html(output);
});
}
<div id = '147'>
<u><b><font color = 'blue' onClick = 'javascript:showbox(147)'>Comment </font</b></u>
</div>
<script type='text/javascript'>
<!--
function showbox(var1) {
document.getElementById(var1).innerHTML = var1 + " <form name = 'commentform' method = 'post' action = ''><input type='text' name = 'comment' value='Enter Your Comment' ><input type='hidden' value= " + var1 + " name='wallpostid'> <input type ='hidden' value = '$userid' name = 'userid' > <input type='submit' name = 'send' value='Post your Comment' onClick='javascript:postcomment()'> </form>";
<b onclick= 'postcomment()' > </b>;
}
function postcomment() {
document.commentform.comment.submit();
}
-->
</script>
Above is the code. It is working in FF but not in IE or Chrome.
Can anyone tell where I went wrong. Any solution to make it work in all browsers?
There are some typos here is one:
"...<input type='hidden' value= " + var1 + " name='wallpostid'>... "
"...<input type='hidden' value='" + var1 + "' name='wallpostid'/>... "
Note the / and the two '
Also this line
<b onclick= 'postcomment()' > </b>;
does not do anything as it is in javascript and not html section of the file.
First of all, your markup is a bit of a mess so no wonder there's a mess up amongst it. However I think your problem is that $userid is being passed through as a string and not it's value as a variable of some sorts.
Here's your markup tidied up a bit (but still leaves much to be desired) with some redundant stuff removed and the $userid echoed PHP-style.
<div id="147" onclick="showbox(this)">Comment</div>
<script>
function showbox(el) {
el.innerHTML = el.id + '\
<form name"="commentform" method="post" action="">\
<input type="text" name="comment" value="Enter Your Comment" />\
<input type="hidden" value="' + el.id + '" name="wallpostid" />\
<input type="hidden" value="<?php echo $userid; ?>" name="userid" />\
<input type="submit" name="send" value="Post your comment">\
</form>';
}
</script>
document.getElementById(var1).innerHTML = var1 + " <form name = 'commentform' method = 'post' action = ''><input type='text' name = 'comment' value='Enter Your Comment' /><input type='hidden' value= '" + var1 + "' name='wallpostid' /> <input type ='hidden' value = '$userid' name = 'userid' /> <input type='submit' name = 'send' value='Post your Comment' onClick='javascript:postcomment()' /></form><b onclick= 'postcomment()' ></b>";
A bunch of things are wrong:
1. ID's can't start with a numeral
2. Use onclick, not onClick
3. Don't put javascript: in your onclick
4. Your <b onclick... is useless
5. Your postcomment function just submits the form - you don't need JS for that
6. Make sure you set an action for the form
Here's the complete fixed code:
<div id='div147'><u><b><font color='blue' onclick='showbox(147)'>Comment</font></b></u></div>
<script type='text/javascript'>
function showbox(var1) {
document.getElementById(var1).innerHTML = var1 + " <form name='commentform' method='post' action='someurl.php'><input type='text' name='comment' value='Enter Your Comment'><input type='hidden' value='" + var1 + "' name='wallpostid'><input type='hidden' value='$userid' name='userid'> <input type='submit' name='send' value='Post your Comment'> </form>';
}
</script>
While adding inner html some times run time errors are shown by some browsers. Reffer this question for better understandability for how to add inner html. Also I dont think you need onclick function for submitting form. It will submit automatically after clicking on submit