I wrote this code that should submit registration form (PHP) using jQuery and iframe.
Javascript:
<script type="text/javascript">
$(document).on('click', '#reg_form_sub', function(event) {
var error_message_lgn = $("#reg_frame").contents().text();
$('#reg_error').text(error_message_lgn);
});
</script>
HTML:
<iframe name="reg_frame" id="reg_frame" style="display:none;" src="register.php"></iframe>
<table>
<tr>
<td>
<p id="reg_error"></p>
</td>
</tr>
<tr>
<td><input type="email" name="reg_email" id="reg_form_input" placeholder="Email"></td>
</tr>
<tr>
<td><input type="password" name="reg_pass" id="reg_form_input" placeholder="Password"></td>
</tr>
<tr>
<td><input type="password" name="reg_pass_confirm" id="reg_form_input" placeholder="Confirm password"></td>
</tr>
<tr>
<td><input type="submit" name="reg_submit" id="reg_form_sub" value="Send me a confirmation email"></td>
</tr>
</table>
</form>
It is kind of working, but when I click the button the first time nothing happens.
When I click the second time I get echo from PHP (script submits the form, it creates the account etc, but I get echo only after clicking for the second time).
I just added onload and now its working
$(document).on('click', '#reg_form_sub', function(event) {
$('#reg_frame').on("load", function() {
var error_message_lgn = $("#reg_frame").contents().text();
$('#reg_error').text(error_message_lgn);
});
});
First there is no form Tag. If you planning to save data's use button click function.
$("button_id_name").click(function(){});
Related
so i have this html code and jquery code. And when i press a tablerows "produkter" button whith the class name "fa-products", i want to find the hidden field input that is on the same tablerow as the button you choose to click(every tablerow have a hidden field input and a "produkter button"). Then i want to save the value of the hidden field in a variable thats all can anyone help me? when i "console.log(discountId);" it responds undefiend
<div class="eastSide row top-buffer col-xs-8" style="overflow:scroll; height:250px;">
<table style="width:100%">
<tr>
<th>Code</th>
<th>Aktiv</th>
<th>Skapad</th>
<th></th>
</tr>
#foreach (var discount in Model.DiscountList)
{
<tr>
<td><input name="codeTextBox" id="codeTextBox" value="#discount.Code" maxlength="18" /></td>
<td><input type="checkbox" id="activeCheckBox" name="activeCheckBox" checked="#discount.Active" /></td>
<td><input type="datetime" value="#discount.CreatedDate" readonly /></td>
<td>
<input type="button" value="Radera" class="fa fa-remove" data-url="#Url.Action("DeleteDiscountCode","Discount",new { id= discount.Id})" />
<input type="button" value="Uppdatera" class="fa fa-update" data-url="#Url.Action("UpdateDiscount","Discount")" />
<input type="button" value="Produkter" class="fa fa-products" id="#discount.Id" data-url="#Url.Action("chooseProductsForDiscountCode","Discount")" />
</td>
<td><input id="id" type="hidden" value="#discount.Id" /></td>
</tr>
}
</table>
</div>
<script>
$(".fa-products").on("click", function (e) {
var discountId = $(event.target).closest('input[type="hidden"]').val();
console.log(discountId);
});
</script>
It will not work, because the hidden input is not the parent of the registered element.
Probably this will solve your issue: $(event.target).closest('tr').find('input[type="hidden"]').val();
You need to do search for common parent element via closest and then find input inside of the result:
$(".fa-products").on("click", function (e) {
var discountId = $(event.target).closest('tr').find('input[type="hidden"]').val();
console.log(discountId);
});
Why onclick method is not working without return false. When i try to use it without return false it's show answer and then values disappear..
<form id="form1" method="POST">
<table style="border:1px solid black">
<tr>
<td>First Number</td>
<td>
<input type="text" id="first">
</td>
</tr>
<tr>
<td>Second Number</td>
<td>
<input type="text" id="second">
</td>
</tr>
<tr>
<td>Result</td>
<td>
<input type="text" id="result">
</td>
</tr>
<td>
<button id="btn" value="Add" onClick="addNumbers();return false;">Add</button>
</td>
</table>
</form>
Javascript:
function addNumbers() {
var firstNumber = document.getElementById('first').value;
var secondNumber = document.getElementById('second').value;
document.getElementById('result').value = firstNumber + secondNumber;
}
JSFIDDLE
Why onclick method is not working without return false?
The default action of button inside the form is to submit the form when you click on the button. To prevent this from happening you need to use e.preventDefault() or return false on the button click.
Why the values disappear?
When the form is submitted the page is redirected to the URL where form is submitted. As the action attribute is not provided, the form is submitted to the same page. And as the default values are not set the values are cleared when the page is reloaded.
How to solve the problem
You can stop this from happening by using return false; in the click event handler function as the last statement and adding return before the onclick attribute before the function in the HTML.
One more thing you forgot to do is to cast the string to Number when the values are read from the DOM element. Otherwise + will be used as string concatenation operator and the result will be a joined string.
You can cast the string to number by putting +(unary + operator) before the string.
Updated fiddle: http://jsfiddle.net/tusharj/ufe7aqhw/
function addNumbers() {
var firstNumber = +document.getElementById('first').value;
var secondNumber = +document.getElementById('second').value;
document.getElementById('result').value = firstNumber + secondNumber;
return false;
}
<form id="form1" method="POST">
<table style="border:1px solid black">
<tr>
<td>First Number</td>
<td>
<input type="text" id="first">
</td>
</tr>
<tr>
<td>Second Number</td>
<td>
<input type="text" id="second">
</td>
</tr>
<tr>
<td>Result</td>
<td>
<input type="text" id="result">
</td>
</tr>
<td>
<button id="btn" value="Add" onClick="return addNumbers();">Add</button>
</td>
</table>
</form>
Sidenote:
I will suggest/recommend to
not to use table for formatting the UI, you can use div with simple styles
move the styles to separate stylesheet and not to use inline styles
use addEventListener to bind event
Because return false is used to stop the default action of onclick, which is submitting the form. And you obviously have not defined the post handler for your form. So if you submit your form, you will get an error.
I've a following HTML code:
<form name="question_issue_form" id="question_issue_form" action="question_issue.php">
<table class="trnsction_details" width="100%" cellpadding="5">
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>
</tr>
<tr>
<td></td>
<td class="set_message" style="display:none;"><textarea name="que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit" id="report_question_issue"></td>
</tr>
</tbody>
</table>
</form>
Following is my JS code:
$(document).on('click', '#report_question_issue', function (e) {
alert("Jumbo man");
}
And upon clicking the submit button I'm calling the alert to appear but it's not appearing. I'm not getting why this is happening? For your refrence following is link to the js Fiddle;
http://jsfiddle.net/TjK2N/
You are not including JQuery Reference. And you are missing to close );
DEMO
In your code bracket isn't closed properly at last. this is required ")" see this updated fiddle
$(document).on('click', '#report_question_issue', function (e) {
alert("Jumbo man");
});
$(document).on('click', '#report_question_issue', function (e) {
alert("Jumbo man");
}
$(XXX) this is a jquery syntax, but i saw you are in the Pure JS environment.
Should you use a js library?
The problem is with the submit action of the <form> that reload the page before the JS is called.
To avoid it, you can change it by one of following :
1st using JS into action attribute
<form name="question_issue_form" id="question_issue_form" action="javascript:alert('test')">
2nd using onsubmit attribute
<form name="question_issue_form" id="question_issue_form" onsubmit="alert('test');" action="question_issue.php">
3rd using jQuery on submit event
$('form#question_issue_form').submit(function() {
alert('test');
return false; //to avoid the reload
});
4th using jQuery on click event on the submit button
$('form#question_issue_form').click(function() {
alert('test');
return false; //to avoid the reload
});
I have this form that loads rows of data in a table format using form. Than user updates some of the amount and submits the form. Form works fine, I don't know how to submit the updated values from html page to jQuery function.
<div id="Sales">
<script id="salestTemp" type="text/x-jquery-tmpl">
<form id="salesForm" action="">
<table class="" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="label">Name<span class=""> </span></th>
<th class="label">$ Amount<span class=""> </span></th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr class="">
<td>{{=name}}</td>
<td>$ <input type="text" class="{{=id}}" id="Amount" value='{{=Amount}}' /></td>
</tr>
{{/each}}
<tr>
<input type="submit" class="" id="submit" name="" value="Save" />
</tr>
</tbody>
</table>
</form>
</script
</div>
I am using following jQuery:
$(document).ready(function () {
$("#submit").click(function () {
alert("inside");
$.ajax {......};
});
});
When I hit submit it doesn't even hit .click function. Anyone knows how to fix this or where to look? Thanks
Your example has a broken closing tag:
</script
</div>
Consider binding to the submit event:
$("#salesForm").on('submit', function (e) {
e.preventDefault();
alert("inside");
});
e.preventDefault(); will prevent the form from submitting, you can then use ajax to submit the form.
Here is an example based on your code: http://jsfiddle.net/n1ck/Jbbhe/2/
It has hit the click function check the error console in the browser..
and script tag is not ended properly ""..
And y have you put the form content inside script tag???
Just bind your form to submit
$(document).ready(function(){
$('#salesForm_form').bind('submit',function(){
...
});
});
Or
$('#salesForm_form').submit(function(ev) {
ev.preventDefault(); // to stop the form from submitting
/* Validations go here */
this.submit(); // If all the validations succeeded
});
ok should be an easy one for everyone,...
i am calling a javascript function in the tag of a button using inclick. Im trying to get that function to have three different parameters. The function then submits three different times, which should end up being three different records in a ruby table.
But i cant see why this doesnt work...
<script>
function submiteffort( elem )
{
// Elem 1
$("#effort_hours").val( $( elem ).val() );
$("#task_id").val( elem.id );
$("#effort_form").submit();
return true;
}
function medium( leave, toil, sick)
{
var dave = submiteffort(document.getElementsByName(leave));
if(dave == true){
var dave2 = submiteffort(document.getElementsByName(toil));
}
if(dave2 == true){
submiteffort(document.getElementsByName(sick));
}
}
</script>
<div class="startleft">
<table>
<tr>
<td>Leave</td>
<td><input class="dayinput" type="text" name="Leave" placeholder="0" ></td>
</t>
<tr>
<td>TOIL</td>
<td><input class="dayinput" type="text" name="TOIL" placeholder="0"></td>
</tr>
<tr>
<td>Sick</td>
<td><input class="dayinput" type="text" name="Sick" placeholder="0"></td>
</tr>
<tr>
<td>Total</td>
<td><input id="total" class="total_low" type="text" value="0" disabled="" name="Dave">
</tr>
<tr>
<td></td>
<td><button onclick="medium('Leave','TOIL','Sick')">Commit</button></td>
</tr>
</table>
</div>
For some reason this only submits 1 record into the table and i cant figure out why.
Well if you submit the form, the page refreshes, and the other 2 function calls don't execute. You'd have to use AJAX to send data to the backend in 3 separate function calls.