Form won't submit when generated with Javascript - javascript

I'm generating a login form in javascript. The form displays perfectly and the HTML looks fine in Google Dev Tools but the form won't submit when I click the submit button.
Heres's the generated form code:
var loginBox = '<div id="loginBox">';
loginBox += '<h1>Login</h1>';
loginBox += 'Please use the form to login below<br /><br />';
loginBox += '<form action="home.php" method="post">';
loginBox += '<div class="input">';
loginBox += '<label for="username">Username</label>';
loginBox += '<input type="text" name="username" />';
loginBox += '</div>';
loginBox += '<div class="input">';
loginBox += '<label for="userpass">Password</label>';
loginBox += '<input type="password" name="password" />';
loginBox += '</div>';
loginBox += '<div class="clear"></div>';
loginBox += '<div class="input">';
loginBox += '<input type="submit" class="submit button" value="Submit" />';
loginBox += '</div>';
loginBox += '</form>';
loginBox += '</div>';
Any ideas on why this wouldn't work?
I know I could probably write some Javascript to submit the form when the submit button is pressed but I don't see why that should be necessary.
Thanks

The bigger question is why are you creating a login box with Javascript?
I think that it is cleaner to refactor it and have the form live inside a hidden div, and use JavaScript to show/hide it as required. This would get around some brower's issues with dynamically adding a form using element.innerHTML.
If that is not an option then you may have to change your JS to add it using the DOM. This is quite verbose and not very easy to read.

I added it to this page and it seemed to work. Do you have any client validation scripts that might intercept the form submit event?
My code:
$(loginBox).appendTo("body");

Related

submit a comment form with jquery that has multiple id

I have the the following form below in jquery
' <form class="form comment_form" role="form" id="'+this._id+'" name="comment-form" action="/users/reply" method="post">'+
'<div class="form-group">'+
'<input type="hidden" name="post_id" value="'+this._id+'"/> ' +
'<input class="form-control col-lg-12 red" style="width:100%" type="text" name="user_comment" placeholder="Your comments" />'+
'</div>'+
'<div class="form-group">'+
'</div>'+
'</form>' +
I am trying to submit the form but it has a specific id. The form is just an input field and i would just like to submit it when the user press enter. Similar to Facebook. My problem is how do i let the user submit a specific form by just pressing the enter button?
id need to be unique.Also a form with submit button is useful to trigger submit on hitting enter
'<form class="form comment_form" role="form" id="' + this._id + '" name="comment-form" action="/users/reply" method="post">' +
'<div class="form-group">' +
'<input type="hidden" name="post_id" value="input_' + this._id + '"/> ' +
'<input class="form-control col-lg-12 red" style="width:100%" type="text" name="user_comment" placeholder="Your comments" />' +
'</div>' +
'<div class="form-group">' +
'</div>' +
'<div><button type="submit">Submit</button></div>'+
'</form>'
Alternately if there is no submit button , you can use javascript/jquery to submit the form
$("body").find("#yourFormId").find('input').keypress(function(e) {
// check for enter/return
if (e.which == 10 || e.which == 13) {
$("body > #yourFormId").submit();
}
});
I successfully found the answer to my question. what in did was that i used the this keyword to find other elements of the form.
var form = $('form.comment_form');
form.on('submit',function(e){
e.preventDefault();
var input = $(this).find('input[type=text]'),
comment_id = $(this).find('input[name=post_id]');
})

jquery and input selects

JS Fiddle of nonworking code :
https://jsfiddle.net/8fo28ccL/
With the code below, I have items that are dynamically added to my html body whenever a user clicks a button to add a line. The top line works just fine(its a checkbox), but I cannot get the select input lines to work....
var addNewRow = function(id){
html = '<tr id="tr_'+i+'">';
html += '<td><input class="case" id="caseNo_'+i+'" type="checkbox"/></td>';
html += '<td class="prod_c"><input type="text" data-type="productCode" name="data[InvoiceDetail]['+i+'][product_id]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html +='<span class="add_icon hide" id="add_icon_'+i+'"> <i class="fa fa-plus-circle"></i></span>';
html +='</td>';
html += '<td><input type="text" data-type="productName" name="data[InvoiceDetail]['+i+'][productName]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][price]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="text" name="data[InvoiceDetail]['+i+'][quantity]" id="quantity_'+i+'" class="form-control changesNo quanyityChange" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;">';
html += '<input type="hidden" id="stock_'+i+'"/>';
html += '<input type="hidden" id="stockMaintainer_'+i+'" name="data[InvoiceDetail]['+i+'][stockMaintainer]" />';
html += '<input type="hidden" id="previousQuantity_'+i+'"/>';
html += '<input type="hidden" id="invoiceDetailId_'+i+'"/>';
html += '</td>';
html += '<td><input type="text" id="total_'+i+'" class="form-control totalLinePrice addNewRow" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
html += '<td><input type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><select value="" name="data[InvoiceDetail][0][location]" id="location_1'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html += '<option value="Used">Used</option>';
html += '<option value="RTS">RTS</option>';
html += '<option value="LAJ">LAJ</option>';
html += '</select></td>';
html += '</tr>';
if( typeof id !== "undefined"){
$('#tr_'+id).after(html);
}else{
$('table').append(html);
}
Edit : Sorry, added an old revision of code, updated with the proper TD elements. The select box will appear on the page, but if you try to select values, nothing saves...
Edit 2 : Guys/Gals, the issue is not whether the html appears in my body(it does via the append function, the issue is AFTER it is added. After the text is added, a checkbox appears, and a form select field. If you select a different option in the form select, and save the form, that option is NOT saved.
Try adding var before html , adjusting += to = at first html variable reference
var i = 0;
var html = '<td><input type="checkbox" name="data[InvoiceDetail][0][staged]" id="staged_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html += '<td><select value="" name="data[InvoiceDetail][0][location]" id="location_1'+i+'" class="form-control autocomplete_txt" autocomplete="off">';
html += '<option value="Used">Used</option>';
html += '<option value="RTS">RTS</option>';
html += '<option value="LAJ">LAJ</option>';
html += '</select></td>';
document.body.innerHTML = html
From those stuff you provided i can suggest only this things. You should try once.
var html = "";
html += "<td><input type='checkbox' name='data[InvoiceDetail][0][staged]' id='staged_1'" + i + " class='form-control autocomplete_txt' autocomplete='off'></td>";
html += "<td><select value='' name='data[InvoiceDetail][0][location]' id='location_1'" + i + "'class='form-control autocomplete_txt' autocomplete='off'>";
html += "<option value='Used'>Used</option>";
html += "<option value='RTS'>RTS</option>";
html += "<option value='LAJ'>LAJ</option>";
html += "</select></td>";
$(html).appendTo(WhereYouwanttoappend);
Hope it may work for you.
your html wasn't initialised (probably)
var html = ''
check out this running code: http://codepen.io/anon/pen/zvOaqj
Remove the "value" attribute from your select element.

Get simple CMS plugin

I am currently trying to modify a plugin that was made for get simple cms. The plugin is called "pages with comments". The reason I am posting here is because the topic for the plugin in the forums looks to be dead. Here is the link to the plugin I am currently using. https://mega.co.nz/#!pVcRnTiI!N0SyhLXrPbE1vFH3dNBaqO0zznETDD--QQpWp0c1EJoI have modified it but so you can see what code I am working with I am uploading it as a zip. My question is how do I make a a field required so when users submit the comment there has to be something in it. Either that or make that field a drop down.
Thanks
if ($capt =='Y'){
echo '<div id="captch"> ';
echo '<img alt="" class="capt" id="captcha'.$imfin.'" src="'.$siteurl.'plugins/pages_comments/img_cpt.php?url='.GSPLUGINPATH.'pages_comments/" />';
echo '<input type="button" value="'.$i18n['reload'].'" onClick="javascript:rec_cpt("captcha'.$imfin.'","'.$siteurl.'plugins/pages_comments/img_cpt.php?url='.GSPLUGINPATH.'pages_comments/")" /> <span class="msgavs">'.$i18n['rl'].'</span>';
echo '</div>';
echo '<div class="cap_input">';
echo '<input type="text" value="" name="guest[pot]" /><span>'.$i18n['Cpt'].'('.$i18n['Rf'].']'.'</span>';
echo '</div>';
}
echo '<div class="submit">';
echo '<input type="submit" value="'.$i18n['Ev'].'" name="guest-submit" />';
echo '</div>';
if (empty($_POST["field_name"])) {
$FieldErr = "FIELD is required"; //or any other error message
} else {
// code for submitting;
}
// you can dispaly the error message using echo $FeildErr beside your field area

form will not submit in innerHTML

I'm trying to get a form to submit with javascript in innerHTML, and the submit button just doesn't work. How do I make the form submit with innerHTML? The form works perfectly when it's in the body, but I need it in the function because I need the picdata data[1].
function photoShowcase(picdata){
var data = picdata.split("|");
_("picbox").style.display = "block";
_("picbox").innerHTML += '<div id="contain" style="background: url(\'user/<?php echo $u; ?>/'+data[1]+'\') center no-repeat rgba(0,0,0,.8);">';
if("<?php echo $isOwner ?>" == "yes"){
_("picbox").innerHTML += '<div id="deletelink">';
_("picbox").innerHTML += '<form method="POST" action="php_parsers/change_image.php" name="ChangeImage">';
_("picbox").innerHTML += '<input type="hidden" value="'+data[1]+'" name="file_name" />';
_("picbox").innerHTML += '<input type="submit" value="Set as Profile Picture" name="SetImage" />';
_("picbox").innerHTML += '</form>';
_("picbox").innerHTML += 'Delete Photo';
_("picbox").innerHTML += '</div>';
}
_("picbox").innerHTML += '</div>';
}
There is some points:
1/ Where is your PHP code?
2/ Where did You call the function? here is the function without any call... You have to call the function with right argument to work..
3/ You used (( += )) for first innerHTML...? why is that??? have you used this command before?
I think your answer is in this 3 point.
for more help, please make a jsfiddle...
In your code you are inserting incomplete html fragments and this is likely to cause the issue.
I would recommend to store the innerHTML in a variable and only append it to the document after it contains all the required closing tags:
var htmlString = '<div id="contain" style="background: url(\'user/<?php echo $u; ?>/'+data[1]+'\') center no-repeat rgba(0,0,0,.8);">';
//...
_("picbox").innerHTML += htmlString;

How to turn a hidden type input into a checkbox type input?

This might sound stupid, but I need something like this. I have displayed, say, 10 skills on the webpage, each of which is a hidden input of a form.
At the bottom there is an 'EDIT' button.
On clicking that, I want checkboxes to appear next to each skillName so that the user can check/uncheck them and then submit the form.
my php code snippet right now is something like this:
<?php echo '<span id="skillSet">';
for($x=0;$x<count($userSkills);$x++)
echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select">' . $userSkills[$x] . "</div>";
echo '</span>'; ?>
<input type="button" value="Edit" onClick="someFunction()">
What can i put instead of some function to achieve the required result?
Also, if there is any other way I can implement the editing thing, please do tell.
Thanks in advance!
Give all inputs the class input_skill, like this:
echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select" class="input_skill">' . $userSkills[$x] . "</div>";
Then use this function to change their types:
<script type="text/javascript">
function ShowSkillCheckboxes() {
var skills = document.getElementsByClassName("input_skill");
for(var i=0; i<skills.length; i++)
skills[i].setAttribute("type","checkbox");
}
</script>
Keep in mind that the special checked value which the elements get by becoming checkboxes will vanish once you transform the checkboxes back into hidden type inputs. Besides: hidden inputs do not display at all on the webpage. You can say they have 0x0 px dimensions. This means that upon clicking the Edit button, those checkboxes will pop out and extent your layout.
Thanks for the input guys, but I found a way around it.
And apologies as well, since I ended up NOT using the hidden input at all.
If any of you are interested, this function should do the trick:
function editSkills()
{
var skills = document.getElementsByClassName("skillName");
for(var i=0;i<skills.length;i++)
{
var value = skills[i].innerHTML;
skills[i].innerHTML = '<input type="checkbox" checked name="skill[]" value="' + value + '" title="Toggle Selection">' + value;
}
document.getElementById('EditOrApply').innerHTML='<input type="submit" value="Apply Changes">';
}
That final line converts the 'Edit' to the 'Submit' button for the form.
the -1 he gave me is the usual way to act of greedy and unfair people. Probably he did it like the users before have done with him (have taken advantage of his low reputation). Anyway I want to underline this not for revenge,but to let the users to valutate the answers in an fair way
Something like this? jsfiddle
$userSkills = array('pasta','maccheroni','pizza');
echo '<span id="skillSet">';
for($x=0;$x<count($userSkills);$x++)
echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select">' . $userSkills[$x] . "</div>";
echo '</span>'; ?>
<input type="button" value="Edit" onClick="$('input:hidden').attr('type','checkbox');">
you need jquery (<script src="http://code.jquery.com/jquery-1.9.1.js"></script>)
FULL JAVASCRIPT
<input type="button" value="Edit" onClick="show(document.getElementsByTagName('input'))">
<script>
function show(val){
for(i=0;i<val.length-1;i++){
if(val[i].type=='hidden'){
val[i].type='checkbox';
}
}
}
</script>

Categories