How To Put HTML Input Value As Variable In jQuery Load?

Question

I have this jQuery code from my previous project and I want to modify it :

<script>
...
$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[type="hidden.block-hidden-input"]').val();
    self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php");
    e.preventDefault();
});
...
</script>

and this HTML code relates to it :

<li>
    <input type="hidden" name="block-type" value="0482" class="block-hidden-input" />
    <input type="hidden" name="sid" value="80132930913019309483" class="block-hidden-input" />
    <a href="#" id="manage-1" class="manage-content-link">
        <img src="images/web-block/web-block1.jpg"/>
        <span class="orange-notice">Click to Edit Content</span>    
    </a>
</li>

<li>
    <input type="hidden" name="block-type" value="1932" class="block-hidden-input" />
    <input type="hidden" name="sid" value="98u40190931209402191" class="block-hidden-input" />
    <a href="#" id="manage-2" class="manage-content-link">
        <img src="images/web-block/web-block2.jpg"/>
        <span class="orange-notice">Click to Edit Content</span> 
    </a>
</li>

and I want to modify that jQuery LOAD part into something like this :

.load("web-block/forms/file-XXX.php?key=YYYYYYYYYYYYYYYY");

where :

XXX = last 3 number from input type="hidden" name="block-type"
example :   0482 >> XXX = 482
            1932 >> XXX = 932

and :

YYYYYYYYYYYYYYYY = value from input type="hidden" name="sid"

please note, for this project I've modified the HTML part so it has 2 hidden inputs. so I believe jQuery selection needs to be modified too... but how?

why are you using this input[type="hidden.block-hidden-input"]? This is returning undefined for me. It should be like this input[type="hidden"] — Om3ga
– Om3ga, Commented Oct 27, 2012 at 7:01
yes you're right, but how to put the value as XXX and YYYYYYYYY? — Saint Robson
– Saint Robson, Commented Oct 27, 2012 at 7:04

Mihai Matei · Accepted Answer · 2012-10-27 07:11:47Z

1

$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[name="block-type"]').val();
    file = file.substring(file.length - 3);
    self.next(".manage-content-wrap").find(".manage-content").load("web-block/forms/file-" + file + ".php?key=" + self.siblings('input[name="sid"]').val());
    e.preventDefault();
});

edited Oct 27, 2012 at 7:11

answered Oct 27, 2012 at 7:05

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Om3ga Over a year ago

You are using incorrect path in .load(). Re-read the question.

Om3ga · Accepted Answer · 2012-10-27 07:27:45Z

1

Use e.preventDefault() at the beginning in un-anonymous function

<li>
<input type="hidden" name="name-block-type" value="0482" class="block-hidden-input" />
<input type="hidden" name="name-sid" value="80132930913019309483" class="block-hidden-input" />
<a href="#" id="manage-1" class="manage-content-link">
    <span class="orange-notice">Click to Edit Content</span>    
</a>
</li>

<li>
<input type="hidden" name="name-block-type" value="1932" class="block-hidden-input" />
<input type="hidden" name="name-sid" value="98u40190931209402191" class="block-hidden-input" />
<a href="#" id="manage-2" class="manage-content-link">
    <span class="orange-notice">Click to Edit Content</span> 
</a>
</li>

JS

$('a.manage-content-link').click(function (e) {
e.preventDefault();
var self = $(this),
    name = self.parent().find('input[name^=name]').val(),
    lastThree = file.substr(file.length - 3);
self.next(".manage-content-wrap").find(".manage-content").load("web-block/forms/file-" + lastThree + ".php");
});

edited Oct 27, 2012 at 7:27

answered Oct 27, 2012 at 7:07

Om3ga

33.4k46 gold badges150 silver badges231 bronze badges

2 Comments

Saint Robson Over a year ago

bro, there are 2 input[type="hidden"] on each <LI> tag, don't you think we must select specifically by its name for : var lastThree = file.substr(file.length - 3); ?

Om3ga Over a year ago

OK. check my updated answer. check for my html which I modified a bit. I only added name at the beginning of every name attributes.

Collectives™ on Stack Overflow

How To Put HTML Input Value As Variable In jQuery Load?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related