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
});
Related
I have below code in which Jquery function is called
<script>
function FocusContent(event) {
event.preventDefault();
console.log('Fire here');
setTimeout(function () { $('.cSSFirst').focus() }, 0);
}
</script>
I have the link in the page as
Skip To main content
The problem is that when I press tab on this a link and when i click on the link it works fine. Now when i click on elsewhere in the page, and when I again click on this link, the focus does not set.
Can someone help please ?
Below is the complete code
<body>
<form id="form1" runat="server">
<div>
Skip To main content
GoogleMicrosoftDeloitte
<br />
<a href="http://www.wikipedia.org">
<input type="text" value =" Some text " />
</a>
<table id ="table1" border="1">
<tr>
<td>
One
</td>
</tr>
<tr id="Two">
<td>
Two
</td>
</tr>
<tr>
<td>
Three
</td>
</tr>
<tr>
<td>
Four
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<script>
function FocusContent(event) {
event.preventDefault();
console.log('Fire here');
if (event.which == 1) {
$('.cSSFirst').focus();
}
}
</script>
onmousedown="FocusContent(event); solved my issue.
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(){});
I have a main textbox(Months), on the change of which, a dropdown menu is created for another textbox(Days). Once I have these populated, I save it. Now when I go back to edit it, I directly want to change the option in the Days textbox, but since the dropdown of Days is triggered on change of the textbox "Months" I do not get the dropdown of days.
The following is my code:
function editValues() {
//initializations
$('.Months').on("change", function(){
monthsValueSet = this.value;
//pass monthsValueSet to database to retrieve values
$('.Days').html("");
for(i=0;i<data.length;i++){
$('.Days').append('<option>' + data[i].days + '</option');
}
});
}
//code for Save button
//code for edit
$("#daysMonthsTable").on("click", ".edit-months", function(event){
editValues();
});
My HTML code is:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<tr>
<td>
<div class="Months">
<table>
<tbody>
<tr>
<td><label>Months</label></td>
<td ><input type="text" class="Months"></td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div class = "Days">
<table>
<tbody>
<tr>
<td><label>Days</label></td>
<td><input type="text" class="Days"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</body>
</html>
Do following
$("#daysMonthsTable").on("click", ".edit-months", function(event){
editValues();
$('.Months').trigger("change");
});
I've table with inline create (when user click on new button it create new empty row first in the table, which he can put data inside),when user click on save I go to the controller and check if this values are valid,if yes store them on the DB.if not I raise exception to the UI and not store the data.The problem is that the new row is not stored but I see it in the UI. just when I refresh the page in the browser the line was omitted..
My question is if there is a way by code search for the first line of the table and remove it explicitly from the UI?
I try like the following but its not refresh the table,any idea?
$("table:first").find("tr:first").remove();
The following should work with a general table.
HTML
<table>
<tbody>
<tr>
<td>row1</td>
</tr>
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
</tbody>
</table>
<br />
<br />
<input type="submit" id="btnAdd" value="add"></input>
<input type="submit" id="btnRemove" value="remove"></input>
jquery
$(function () {
$("#btnAdd").click(function () {
$("table:first > tbody").prepend('<tr><td>new row</td></tr>');
});
$("#btnRemove").click(function () {
$("table:first tr:first-child").remove();
});
});
Working example: http://jsfiddle.net/5NxL4/
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
});