getting css style property using javascript - javascript

I have a image draggable and would like to save it via PHP so I decided to get the inner style and put it as value in input field, so I can get it via $_POST, but I am unable to find like if it would be a inner HTML data I could have get it via calling innerHTML syntax, but like so is there any way of getting style for the image
<div class="scott_img">
<img id="uploadPreview" src="<?php echo (empty($data['profile_pic'])) ? "images/profile.jpg" : "uploads/" . $data['profile_pic']; ?>" style="style goes here">
<span class="scouttag"></span>
</div>
<form method="POST" action="profile.php?uid=<?php echo $uid; ?>" enctype="multipart/form-data" style="text-align:center;">
<input id="uploadImage" type="file" name="image" style="margin:auto;" />
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="uploadPreview1" value="need style here so i can save it to database" />
<button type="submit" name="update_picture" class="btn_form">Update Picture</button>
</form>
<img class="scott_line"src="images/line.png">
<script>
(function() {
var elem = document.getElementById('uploadPreview');
var val = getComputedStyle(elem);
document.getElementById('uploadPreview1').value = val;
var $section = $('.scott_img').first();
$section.find('#uploadPreview').panzoom({
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset")
});
})();
</script>
Thank you

if you get element style tag (inline css)
var a = document.getElementById('uploadPreview');
var b= a.getAttribute('style');
alert(b);
if you get element css
var element = document.getElementById('uploadPreview'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');

I'm not sure how and why you are going to use this server-side, but if you believe that's the right thing to do, just stringify the JSON object:
var val = JSON.stringify(getComputedStyle(elem));

You can get an element's CSS style in JS and transform it into JSON like so:
var elementCSS = JSON.stringify(document.getElementById('uploadPreview').style)

since the Css value is in an input you have to get it via:
Var x = Document.getElementById("").value
Then in your java script, append the Css rules by doing;
X.style.width = Y;
Or div.style.color = "#ccc";
Hope you get the point

Can't you use simple jQuery to get style value like below?
var imgstyle = $("#uploadPreview").attr("style"); //this will get your whole value of style attribute.
$("#uploadPreview1").val(imgstyle); //this will update hidden field's value.
also it seems that it is going to be different on each upload. So you can put this above code inside your draggable or file uplaod's change event.

Related

Get the id of input using it's name

I want to get the id of input using it's name,and to empty the input field.But it's not working.Is it possible?
html:
<input type="text" id="1" name="Color" maxlength="2" />
jQuery:
var myId="#";
myId=myId + $('[name="Color"]').attr('id');
$($myId).var('');
You can do this:
let id = $('input[name$="Color"]').val('').attr('id');
console.log(id);
$(`#${id}`).val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="1" name="Color" maxlength="2" />
You can set the input value using the val() function.
<input type="text" id="1" name="Color" maxlength="2"/>
var myId='#' + $('[name="Color"]').attr('id');
$(myId).val('');
To get the input value use it like this:
$(myId).val();
Try this code.
const myId = $('input[name="Color"]').attr('id');
$("#"+myId).val(''); // you can set any value here or you can perform any other operations on this element -> $("#"+myId)
On first line of this JS code, we are getting id attribute and then on second line, we're using to manipulate element.
Now, if you want id only for performing some operations on that input element, you don't need to get id. You can also do like this.
let elem = $('input[name="Color"]');
elem.val(''); // only if same name is not used anywhere else.
I hope this helps you.
You can use attr directly to set a value. Moreover there is no need to append #.
let element = $('[name="Color"]');
console.log("before", element.attr('id'));
element.attr('id', null);
console.log("after", element.attr('id'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="1" name="Color" maxlength="2" />

html sending parameters to function from id

I'm an absolute beginner and tried to find similar questions but couldn't. Apologies if this has been answered previously.
In my assignment we need to create a form with 2 text fields and 1 button. The fields are for height and width and the idea is that onclick on the button will send the 2 parameters to a function that will change the height + width attributes for a photo. I know I'm doing something wrong because the picture simply disappears. Ideas? Thanks!
<html>
<head>
<script>
function borderResize(height1, width1)
{
document.getElementById('Amos').height = height1;
document.getElementById('Amos').width = width1;
}
</script>
</head>
<body>
<img src="Amos.jpg" id="Amos" />
<form>
<input type="text" id="height" placeholder="Height" />
<input type="text" id="width" placeholder="Width" />
<input type="button" value="click!" onclick="borderResize('height.value', 'width.value')"/>
</form>
</body>
</html>
When you write
onclick="borderResize('height.value', 'width.value')"
in means that on click borderResize function will be invoked with two string arguments, literally strings "height.value" and "width.value". In your case you want something like this
onclick="borderResize(document.getElementById('height').value, document.getElementById('width').value)"
In above case you are selecting element from DOM using getElementById method and then read its value property.
You should learn to use addEventListener(), I would recommend you not to use ugly inline click handler.
The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.
Here is an example with your code.
window.onload = function() {
document.getElementById('button').addEventListener('click', borderResize, true);
}
function borderResize() {
document.getElementById('Amos').height = document.getElementById('height').value;
document.getElementById('Amos').width = document.getElementById('width').value;
}
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/s200x200/11034289_10152822971918167_2916173497205137007_n.jpg?oh=71de7a46a75a946cf1d76e5ab10c1cdc&oe=55889977&__gda__=1434173455_6127f174627ed6014c84e562f47bc44c" id="Amos" />
<input type="text" id="height" placeholder="Height" />
<input type="text" id="width" placeholder="Width" />
<input type="button" id="button" value="click!" />
However as for your immediate problem you can use
onclick="borderResize(document.getElementById('height').value, document.getElementById('width').value)"
onclick="borderResize('height.value', 'width.value')"
here you pass to borderResize strings: 'height.value', 'width.value'.
You may get value of input from function:
function borderResize(height1, width1)
{
document.getElementById('Amos').height = document.getElementById('height').value;
document.getElementById('Amos').width = document.getElementById('width').value;
}

Accessing the javascript code inside the html tags

I am new to "html" and "Javascript".
<p id="pid"></p>
<script>
abc="hello";
document.getElementById("pid").innerHTML=abc;
</script>
<input type="text"
value="<script>document.getElementById("pid").innerHTML</script>"/>
How the code gets executed in the above case.
Looks like you are trying to set a value of the input field to be equal to the content of the pid paragraph. In this case you should set value property of the HTMLInputElement. You can get a reference to it using getElementById (there are many ways to get this element object) which you already know how to use. For example:
<p id="pid"></p>
<input type="text" id="input" />
<script>
var abc = "hello";
var pid = document.getElementById("pid");
pid.innerHTML = abc;
document.getElementById("input").value = pid.innerHTML;
</script>
the content of the 'value' attribute is just text, the browser will not interpret the JS code.
You can use the DOM instead:
<p id="pid"></p>
<script>
abc="hello";
document.getElementById("pid").innerHTML=abc;
</script>
<input id = "myInput" type="text" value="" />
<script>
document.getElementById("myInput").value = abc;
//OR : document.getElementById("myInput").value = getElementById("pid").innerHTML;
</script>
see : Accesing the javascript variable in html tag
I think you're trying to do this:
<script>
function myFunction(){
var abc="hello";
document.getElementById("pid").innerHTML=abc;
}
</script>
<p id="pid"></p>
<input type="button" value="Click Me" onclick="myFunction();" >

get name of hidden form

What i want to do is get the name of the hidden form which in this case is named:6ca3787zz7n149b2d286qs777dd8357b, the problem is, that form name always changes, the only thing that is the same is its value, which is 1, well 99% of the time, the only thing that is 100% the same that i guess could be somehow used to retrieve the form name is:L2ZvcnVtcy8 which is just above it. I am also attempting to do this via running javascript manually on the browser (chrome), so having that in mind where the javascript code is run through the url bar like this javascript:codegoeshere, how can i get the form name, -->(6ca3787zz7n149b2d286qs777dd8357b)?
<form action="index.php?feature=xxxxxx" method="post" name="login">
<input type="submit" name="submit" class="button" value="Logout" />
<input type="hidden" name="option" value="username" />
<input type="hidden" name="task" value="logout" />
<input type="hidden" name="return" value="L2ZvcnVtcy8=" />
<input type="hidden" name="6ca3787zz7n149b2d286qs777dd8357b" value="1" /> </form>
</li>
Check all the solutions below in this fiddle.
Some possibilities:
Assuming there is only one element with the name login and that element is the <form>, you can use:
document.getElementsByName('login')[0].getElementsByTagName('input')[4].name
If the return <input> has a fixed name attribute, then this should work (the additional .nextSibling is because there is a text node between them):
document.getElementsByName('return')[0].nextSibling.nextSibling.name
If any other of of those <input>s has a fixed name, you can use (in the example I take the <input> with name=task):
document.getElementsByName('task')[0].parentNode.getElementsByTagName('input')[4].name);
If all you really have is that fixed value, you'll have to use a for loop through all the <input>s:
var lastResortName = (function () { for(var i=0, ipts = document.getElementsByTagName('input'), n = ipts.length; i < n; i++) { if (ipts[i].value === "L2ZvcnVtcy8=") return ipts[i+1].name; } })();
Note: If there are duplicated values for the mentioned name attributes, test with the index ([0], [1], [2] and so on) until you find the expected elements.
That's really easy if you use JQuery:
$('input[type="hidden"]:eq(3)').attr('name')
Here your code running:
http://jsfiddle.net/7CHYa/

How to replace "value" in Javascript with Regular Expression?

Suppose I have three kind of HTML coming either of them:
<input name="myName" id="myID" role="textbox" style="width: 98%;" type="text" value="SDFSF"/>
OR
<input name="myName" id="myID" role="textbox" style="width: 98%;" type="text" value='SDFSF'/>
OR
<input name="myName" id="myID" role="textbox" style="width: 98%;" type="text"/>
I don't know which of them coming. I am trying to edit them like this:
<input name="myName" id="myID" role="textbox" style="width: 98%;" type="text" value=''/>
I am using this thing:
html = html.replace(/value="(?:[^\\"]+|\\.)*"/,"value=''");
This is able to replace value="Something" to value=''. How can I extend this for other two? Is there any option for OR in Javascript?
Edit
I don't have the DOM element. So, I have to use it like this.
Parse the HTML into a DOM element and manipulate it. Then you can convert it back to HTML or whatever you want to do with it:
var container = document.createElement('div');
container.innerHTML = html;
container.firstChild.setAttribute('value', '');
html = container.innerHTML;
Note: Others mentioned to use element.value = '';. This works as long as you don't want to serialize the element back to HTML. If you did, it would still have the original value value.
Please use simply the DOM
document.getElementById("myId").value = "";
you can also refer to the previous value to check.
var el = document.getElementById("myId")
var myValue = el.value;
if (myValue === notSoGood) {
el.value = "BetterValue";
}

Categories