In my view I have a checkbox input as follows:
<input type="checkbox" data-toggle="modal" data-target="#CheckItemsModal" id="#item.ItemId" onclick="location.href = '#Url.Action("CheckedItem", "List", new { id = item.ItemId })'; Checked(this.id)" />
I am trying to have a modal confirmation on the checking and un-checking of the checkbox however this means that my URL action would need to be moved to the modal's button while still preserving the id = item.ItemId so my plan is to us javascript to do this however I am not sure how to assign the onclick event of the modal button properly.
This is what I have so far (The error it's throwing is that checkId inside the url action does not exist in the current context):
function Checked(checkId) {
if ($(checkId).Checked == true) {
$(modalButton).setAttribute('onclick','location.href = '#Url.Action("CheckedItem", "List", new { id = checkId })'')
}
}
Any help would be much appreciated.
C# is run on the server and JavaScript in the browser. Your URL.Action is executed on the server where the checkId variable does not exist. You need to generate the url from pure JavaScript in the onclick method or generate links using Url.Action for all checkboxes in advance.
Another option is to use string replace in the JavaScript onclick method. For example:
location.href = '#Url.Action("CheckedItem", "List", new { id = "_REPLACE_ID_" })'.replace( "_REPLACE_ID_", checkId);
Look at the generated HTML source to see what happens.
You also need to be careful about your quotes. In your code you have invalid JavaScript with multiple consecutive single quotes at the end.
Related
I have an HTML file with an input element to which I wish to add a new attribute, named "valid-fieldset011", which is used as a link to an AngularJS validator. The input element has the attribute id="fieldset011". If I use the following script (enclosed in script tags)
var inputElement = document.getElementById('fieldset011');
inputElement.setAttribute('valid-fieldset011', '');
everything works fine. The validator recognizes the new attribute. However, if I add the attribute onfocus="theFunction()" and invoke the following script (also enclosed in script tags)
function theFunction() {
var inputElement = document.getElementById('fieldset011');
inputElement.setAttribute('valid-fieldset011', '');
console.log("in theFunction");
}
by clicking on the input element, it doesn't work. In this case the validator is not recognizing the new attribute. But I know the function is being executed because the message "in theFunction" appears in the browser console.
Would anyone know why this is happening? I want to use the function as I want to be able to feed in the element id as a parameter.
I have created a dyanmic button in Java script with the following code:
var pathname = window.location.pathname;
var html = '<div id="gmSomeID"><form action="https://apples.com/active/index?u='+pathname+'"><input id="tapButton" type="submit" value="TAP" /></form></div>'
That should pass direct someone to the link mentioned above with pathname appended.
When I paste this URL in myself manually this works. However, each time I click this link, the URL is truncated to just:
https://apples.com/active/index?
For reference:
Original URL: https://apples.com/class/1/info
Pathname: /class/1/info
Why would JavaScript / Browser be truncating a link like this?
I thought about this, and had another idea:
Try putting the u parameter as a hidden input instead of action.
var html = '<div id="gmSomeID"><form action="https://apples.com/active/index"><input type="hidden" name="u" value="'+pathname+'"/><input id="tapButton" type="submit" value="TAP" /></form></div>'
I think that GET input values always override the values in the query string of the action parameter.
See also: submitting a GET form with query string params and hidden params disappear
Not sure if this is causing your problem, but every time you construct parameters of a URL, you should URL-encode the values.
So, to be correct, the code should look like this:
var pathname = window.location.pathname;
var html = '<div id="gmSomeID"><form action="https://apples.com/active/index?u='+encodeURIComponent(pathname)+'"><input id="tapButton" type="submit" value="TAP" /></form></div>'
I have a HTML table which I am populating with PHP.
I have
<td><a class='Edit_Btn' data-value='".$row["Driver_Reference"]."' onclick='Edit_Btn_Click();' href='#'>Edit</a></td>
to build the edit button for each for.
I am trying to avoid using JQuery, but I need to write a Javascript function to get the data-value of the respective edit button that has been pressed, so I can perform the relevant action (in this case it will take me to another page).
Here is what I tried already:
function Edit_Btn_Click(Driver_Reference) {
var Driver_Reference = this.dataValue;
alert("Edit button pressed! Artist ID: " + Driver_Reference);
}
this in your existing function doesn't refers to your element. Change the the HTML and pass current element context to inline click handler i.e. onclick='Edit_Btn_Click(this);'
<td><a class='Edit_Btn' data-value='".$row["Driver_Reference"]."' onclick='Edit_Btn_Click(this);' href='#'>Edit</a></td>
Then modify your function as
function Edit_Btn_Click(elem) {
var Driver_Reference = elem.dataset.value;
alert("Edit button pressed! Artist ID: " + Driver_Reference);
}
In the above function, You can use Element.dataset property to access the data.
You can use:
this.getAttribute('data-value');
I am trying to update some old code that works correctly on all versions of IE except IE11. When an anchor tag is clicked a javascript function is run. The function . All that the function does is that it gets certain values from the DOM and then submits a form using the post action.
I understand that IE11 submit does not work if the input element does not have a name. Here, the submit is done by clicking on an anchor tag- I tried adding a name and id to the anchor tag but it is still not working.
Any idea on how to get it to work. Following is the anchor tag.
<a class="nohigh" href="javascript:getClassDetails('<%=Id%>');">
Following is the javascript function:
function getClassDetails(a){
var classId = document.getElementById(classIdRow ).value;
var courseId = document.getElementById(courseIdRow).value;
document.getElementById('val1').value = classId
document.getElementById('val2').value = courseId
document.getElementById('clasCourseForm').submit();
}
The function that you want should be:
function getClassDetails(a){
var classId = document.getElementById(classIdRow).value; // assuming classIdRow is defined
var courseId = document.getElementById(courseIdRow).value; // assuming courseIdRow is defined
document.getElementById('val1').value = classId;
document.getElementById('val2').value = courseId;
document.getElementById('clasCourseForm').submit();
}
That's at least assuming that all the JavaScript you have up there ^ is verbatim.
[edit: removed the original answer, as the question has been changed to correct the syntax]
In addition, the JS code has other weirdness, in that the function is accepting a parameter (a) but never uses it within the function. There's almost certainly some kind of logic mistake involved there which you'll want to look into.
fixed it - by adding both a name and id to the form.
currently I'm trying to make it so that when the user clicks a link it submits the corresponding form via javascript. I used document.getElementById("id").submit() as a basis on how to send the form so my code should act similar to it in my understanding.
Here's the code:
function run(clickedLink){
clickedLink.id.submit(); //I did it like this since document.getElementById just gets the form id and since link and form have similar id's I thought it would send
}
<form id = 'formId'>
<a href = '#' id = 'formId' onclick = run(this)>Link</a>
</form>
I tried going with name = 'formId' too but it still doesn't run as I wanted it too.
Note: doing this since this code iterates dynamically and the id gets updated i.e. formID1, formID2...
Better ways to implement this are welcome too
Modify your function as follows
function run(clickedLink){
clickedLink.parentNode.submit(); // parentNode refers to the form element
}
You cannot use same id on the same page for more than one element. This is against HTML and DOM specifications https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really .
You can change it to class if you want to reuse or you can change the id itself of other element. Also links are not recommended to submit the form. Their job is to navigate
Try this:
<a href="#" onclick="document.forms[0].v.value='Link1';
document.forms[0].submit();">Link 1</a>
One Basic thing:
-ID's are used to Uniquely Describe The Element in DOM Hierarchy. Please Don't Repeat it. (it is really bad)
Now to the answer:
function run(x){
var y=findParentForm(x); /* if Id's aren't Unique */
// If iD's are Unique :- var y=document.getElementById("formId");
y.submit();
}
function findParentForm(elem){
/*
This function will find exact parent form
even if link or elem is inside <div> or other complex DOM structure
This will Only return the parent <form> of that elemnt
*/
var parent = elem.parentNode;
if(parent && parent.tagName != 'FORM'){
parent = findParentForm(parent);
}
return parent;
}
<form id='formId' action="Server Side Script" method="GET/POST">
Link <!-- change id of link -->
</form>